大部分情況下我們開發會使用原生的地圖切換器，由於每個項目的頁面風格不同，業務場景不同，因此需要做一些樣式不同的地圖切換器。
首先可以照貓畫虎，自己照着地圖切換器的樣式抄一個，或者看看主流的地圖切換器都長什么樣，然后以這些為基本框架，自己再去設計地圖切換器的樣式，從核心功能上都大同小異，本篇文章主要想介紹的就是“換殼”。
前端部分
我們在前端做一個地圖切換器。代碼如下：
<div class="mapSwitch" onclick="mapSwitch(mtype)"></div>
<div> 標簽中的 CSS 樣式代碼為：
.mapSwitch{
height: 60px;
width: 80px;
background: url(img/0.png) center center;
border: 1.5px solid rgb(255, 255, 255);
position: absolute;
z-index: 1;
border-radius: 5px;
top: 2%;
right: 1%;
cursor: pointer;
}
給 <div> 標簽賦予點擊事件，指向的函數為“mapSwitch()”，其中的 mtype 參數接下來會講到。
JS 部分
為了識別我們切換的狀態，需要用到一個全局變量來輔助我們做判斷。
var mtype = 0;
在地圖中假設我們有兩份底圖，將其加入地圖中，並隱藏其中的一個。
var BaseMap=new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/dark/MapServer",{id:"BaseMap"});
var BaseMapx=new esri.layers.ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/basemap/ArcGIS_img_17/MapServer",{id:"BaseMapx"});
map.addLayer(BaseMap,2);
map.addLayer(BaseMapx,1);
map.getLayer('BaseMapx').setVisibility(false);
這樣我們就將名為“BaseMap”的圖層默認顯示，將“BaseMapx”的圖層用代碼關閉顯示了。
我們在向地圖添加圖層的過程中也會遇到圖層順序的問題，假設上述兩張底圖“BaseMap”是影像層，“BaseMapx”是標記層，那么標記層就應該疊加在影像層之上才能正常顯示。
有兩種操作方式：
-
由下到上地進行圖層添加，例如先添加“BaseMap”，然后再添加“BaseMapx”，即可獲得標記層疊加在影像層的效果
-
圖層疊加是無序的，但我想要為其添加圖層順序，這里就可以在 map.addLayer() 函數中在圖層對象后面追加一個數字，這個數字越小，圖層的位置越靠下，反之亦然。 例如上述代碼中如果我沒有屏蔽“BaseMapx”圖層，那么在地圖中“BaseMap”會壓蓋在“BaseMapx”之上，就是因為我們在函數中為其定義了 index 序號。序號越小越處於底層，序號越大越處於頂層。
接下來我們寫控制圖層開關的函數，如下：
function mapSwitch(v){
if(v == 1){
map.getLayer('BaseMapx').setVisibility(false);
map.getLayer('BaseMap').setVisibility(true);
$('#mapSwitch')[0].style.background = 'url("img/1.png") center center';
$('#map')[0].style.background = "#061827";
mtype = 0;
}else{
map.getLayer('BaseMapx').setVisibility(true);
map.getLayer('BaseMap').setVisibility(false);
$('#mapSwitch')[0].style.background = 'url("img/0.png") center center';
$('#map')[0].style.background = "#0d2941";
mtype = 1;
}
}
這里用 mtype 的狀態來判斷當前地圖是哪種類型，我們可以走一遍。
初始狀態加載后，mtype = 0 ，默認顯示的是”BaseMap“底圖，
當我們點擊事件后，會進入 else 語句，關閉”BaseMap“圖層的顯示狀態，打開”BaseMapx“圖層的顯示狀態。
同時前端的地圖容器背景也會發生改變，地圖容器中的圖片也會被修改，這時 mtype 則修改為 1 ，完成了一次地圖切換。
當我們再次點擊地圖切換器后，進入 if 語句執行相反的操作。
拓展聯想
地圖切換器的核心就是對圖層的顯示狀態控制，對於判斷的參數，大家也可以使用圖層本身的屬性或者其他形式。
另外圖層開關的思路實際上也是這樣的，如果要寫一個圖層開關器，可以在前端使用該圖層的名稱為標簽 id ，用樣式 class 作判斷依據，將二者傳入開關函數，即可完成該圖層的顯示/隱藏。
我參考了 2018 年谷歌地圖網頁版的切換器設計思路，我發現在地圖的縮放拖拽過程中，地圖控制器中的小地圖不是一張圖片而是另一個地圖容器，會跟隨外部的大地圖聯動，這是一個很有意思的小細節，於是我沿用了谷歌地圖的思路，在新的項目中對原生地圖切換器進行了重新開發。
如果大家有更多有意思的地圖切換方案，也可以在留言評論。