ArcGIS API For Javascript ：如何制作地图切换器

大部分情况下我们开发会使用原生的地图切换器，由于每个项目的页面风格不同，业务场景不同，因此需要做一些样式不同的地图切换器。

首先可以照猫画虎，自己照着地图切换器的样式抄一个，或者看看主流的地图切换器都长什么样，然后以这些为基本框架，自己再去设计地图切换器的样式，从核心功能上都大同小异，本篇文章主要想介绍的就是“换壳”。

前端部分

我们在前端做一个地图切换器。代码如下：

<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 年谷歌地图网页版的切换器设计思路，我发现在地图的缩放拖拽过程中，地图控制器中的小地图不是一张图片而是另一个地图容器，会跟随外部的大地图联动，这是一个很有意思的小细节，于是我沿用了谷歌地图的思路，在新的项目中对原生地图切换器进行了重新开发。

如果大家有更多有意思的地图切换方案，也可以在留言评论。