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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。