本例子核心:對MapView對象的map屬性值進行替換即可達到更改地圖數據的效果。
這個例子用的不是Map對象了,而是用的發布在服務器上的專題地圖(WebMap)來加載到MapView上進行顯示。
在html標簽中,使用了section標簽,不過沒什么稀奇的,就把仨按鈕放一塊而已。
先給出預覽圖
三張專題地圖:失蹤人口密度分布、難民遷徙路線、2015年歐洲來港者。
這個東西很有用,尤其是在展示同一地區的專題地圖的時候,這里也展示了什么叫View,什么叫Map。
因為中心點、比例尺是由View對象管控的,所以改變WebMap這個數據的時候,並不會改變位置和比例尺。
我們來看代碼:
給出引用
[ "esri/views/MapView", "esri/WebMap", "dojo/on", "dojo/domReady!" ]
很清爽。
既然要用到3個專題地圖,那么就創建3個WebMap對象:
function(MapView, WebMap, on) { var webmapids = [ "ad5759bf407c4554b748356ebe1886e5", "71ba2a96c368452bb73d54eadbd59faa", "45ded9b3e0e145139cc433b503a8f5ab" ];
// 匿名函數返回一個WebMap實例 var webmaps = webmapids.map(function(webmapid) { return new WebMap({ portalItem: { id: webmapid } }); }); var view = new MapView({ map: webmaps[0], container: "viewDiv" }); }
也是很簡單。
給定一個webmap的ID字符串數組,每個ID是WebMap的唯一標識符。
然后用Collection對象的map()方法進行遍歷操作,對傳入的每一個ID,匿名函數返回一個WebMap實例。
如何實例化WebMap,請參考API中WebMap的構造函數。
然后,實例化一個MapView,map屬性給定webmaps數組的第一個元素,即第一個WebMap——失蹤人口圖。
在實例化MapView后,就是給頂頭的3個按鈕添加事件了。
dojo給DOM元素添加事件還記得嗎?就是goTo()動畫那篇文章。
基本語法:
on(DOM元素,事件類型,事件方法體);
見下:
on(document.querySelector(".btns"), ".btn-switch:click", function(event) { var id = event.target.getAttribute("data-id"); if (id) { var webmap = webmaps[id]; view.map = webmap; var nodes = document.querySelectorAll(".btn-switch"); for (var idx = 0; idx < nodes.length; idx++) { var node = nodes[idx]; var mapIndex = node.getAttribute("data-id"); if (mapIndex === id) { node.classList.add("active-map"); } else { node.classList.remove("active-map"); } } } });
使用css選擇器點選,即對類進行選擇。btns被選中。
在方法體內,先獲取data-id這個自定義屬性,進入if判斷。
先按data-id選擇到序號一致的WebMap,假如data-id=“2”,則選中第三張WebMap。
然后更改view.map屬性為選擇到的WebMap。
這里,數據就替換完成了。
從var nodes...到for循環體結束,講的是:
獲取全部class為btn-switch的DOM元素。
對這個數組進行遍歷操作,若當前點擊的div的data-id和遍歷到的data-id三等號相同,那么就往這個DOM元素的classList添加active-map。
若不,則移除active-map。
意思就是說,如果點擊的div就是當前地圖,那么就標記為當前活動的WebMap,否則就不是活動的WebMap。
————————
整個程序就是這么簡單,替換MapView對象的map屬性值,修改DOM元素的classList和操作DOM元素而已。
給出官方源代碼:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Load a basic WebMap and swap with another on the same View - 4.2</title> <style> html, body { font-family: sans-serif; padding: 0; margin: 0; height: 100%; width: 100%; overflow: hidden; } #viewDiv { position: absolute; right: 0; left: 0; top: 60px; bottom: 0; } .header { position: absolute; top: 0; width: 100%; height: 10%; } .btns { margin: 0 auto; display: flex; flex-direction: row; justify-content: center; align-items: center; overflow: auto; } .btn-switch { flex-grow: 4; background-color: rgba(34, 111, 14, 0.5); color: #FFF; margin: 1px; width: 50%; padding: 20px; overflow: auto; text-align: center; cursor: pointer; font-size: 0.7em; } .active-map { color: #fff; background-color: rgba(34, 111, 14, 1); } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css"> <script src="https://js.arcgis.com/4.2/"></script> <script> require([ "esri/views/MapView", "esri/WebMap", "dojo/on", "dojo/domReady!" ], function( MapView, WebMap, on ) { var webmapids = [ "ad5759bf407c4554b748356ebe1886e5", "71ba2a96c368452bb73d54eadbd59faa", "45ded9b3e0e145139cc433b503a8f5ab" ]; /************************************************************ * Create multiple WebMap instances ************************************************************/ var webmaps = webmapids.map(function(webmapid) { return new WebMap({ portalItem: { id: webmapid } }); }); /************************************************************ * Initialize the View with the first WebMap ************************************************************/ var view = new MapView({ map: webmaps[0], container: "viewDiv" }); on(document.querySelector(".btns"), ".btn-switch:click", function( event) { /************************************************************ * On a button click, change the map of the View ************************************************************/ var id = event.target.getAttribute("data-id"); if (id) { var webmap = webmaps[id]; view.map = webmap; var nodes = document.querySelectorAll(".btn-switch"); for (var idx = 0; idx < nodes.length; idx++) { var node = nodes[idx]; var mapIndex = node.getAttribute("data-id"); if (mapIndex === id) { node.classList.add("active-map"); } else { node.classList.remove("active-map"); } } } }); }); </script> </head> <body> <section class="header"> <div class="btns"> <div class="btn-switch active-map" data-id="0">Missing Migrants</div> <div class="btn-switch" data-id="1">Refugee Routes</div> <div class="btn-switch" data-id="2">2015 European Sea Arrivals</div> </div> </section> <div id="viewDiv"></div> </body> </html>