06 地图添加地图书签

时间 2019-11-29

标签地图添加书签繁體版

原文原文链接

地图书签的功能字面理解就是暂时记录当前地图的范围和放大级别，在后续操做中若是想回到地图以前的状态，能够点击当时建立的书签来回到此状态，以下图所示：css

地图刚加载完成时是一副以成都为中心的地图，放大级别是10：html

咱们将地图的中心拖动到南京，进一步放大地图，而后建立以“南京”为名称的书签，如图：dom

建立好书签以后咱们将地图随意拖动和放大，而后点击刚才建立的“南京”这个书签，地图中心和放大级别顿时切换回了建立南京这个书签时的状态，如图：ui

下面讲解一下实现的主要代码：scala

首先是建立一个基本地图，实例请参考第一篇文章《建立地图》，而后接下来的步骤和地图添加控件的步骤基本一致，由于书签功能也是一个控件。code

建立存放书签功能的容器：htm

<body class="calcite">

<div id="map"></div>

<div class="bookmark-container">

<div id="bookmarks"></div>

</div>

</body>

细心地同窗已经注意到，此次添加了两个div，他们是嵌套的关系，这是由于咱们的书签控件由两部分组成，一部分是外面的书签面板，另外一部分是面板内的建立书签的控件。接下来设置书签面板的样式：blog

.bookmark-container {

position: absolute;

top: 100px;

left: 15px;

padding: 1rem;

background: #ffffff;

border-radius: 4px;

border: 1px solid #eeeeee;

}

在此处一样也是没有设置id为“bookmarks”的容器的样式，这是由于此div的样式已经在esri.css文件中设置过，因此咱们默认不设置就好。ip

接下来咱们引入“esri/dijit/Bookmarks”模块来建立书签控件，实例化一个书签，以下：utf-8

var bookmarks = new Bookmarks({

map: map,

editable: true

}, "bookmarks");

至此，一个书签控件已经添加到地图上，完整的代码以下所示：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

<title>Bookmark Widget</title>



<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/themes/calcite/esri/esri.css">

<style>

html, body, #map {

height: 100%;

margin: 0;

padding: 0;

}



.bookmark-container {

position: absolute;

top: 100px;

left: 15px;

padding: 1rem;

background: #ffffff;

border-radius: 4px;

border: 1px solid #eeeeee;

}

</style>



<script src="https://js.arcgis.com/3.25/"></script>

<script>

require([

"esri/map",

"esri/dijit/Bookmarks",

"dojo/domReady!"

],

function (Map, Bookmarks){

var map = new Map("map", {

basemap: "osm",

center: [104.072259,30.663527],

zoom: 10

});



//建立地图书签控件

var bookmarks = new Bookmarks({

map: map,

editable: true

}, "bookmarks");



});

</script>

</head>

<body class="calcite">

<div id="map"></div>

<div class="bookmark-container">

<div id="bookmarks"></div>

</div>

</body>

</html>