本例子核心：對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> 源代碼