前言

关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：esri 官网 api，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 3.x 的好素材。

内容概览

1. 实现地图模态层功能
2. 源代码 demo 下载

本文实现的是 arcgis api 3.x 版本的地图模态层，效果图如下：

image

实现的核心思路跟 openlayers4 那里是一致的，利用 turf.js 提供的 difference 相差函数，计算最大四至和裁剪区域的差值；不过跟 openlayers4 不一样的地方是，这里 arcgis api 版本的大四至是地图的当前地图范围，通过监听地图的范围变化事件来动态获取。不用（-180,-90,180,90）是因为发现用（-180,-90,180,90）来跟裁剪区域相差运算时候，绘制的多边形显示，发现有点影响顺畅，绘制的多边形区域太大，所以想用地图当前范围 extent 来替代。
模拟数据源采用大连市的普兰店市区域。

• 实现核心代码

if (typeof DCI == "undefined") { var DCI = {}; }
DCI.modalLayer = {
    map: null,//地图对象
    graphicslayer: null,//显示图层
    highlightSymbol: null,//区域高亮样式颜色
    isModal:false,
    /*
    *初始化加载函数
    */
    Init: function (map) {
        DCI.modalLayer.highlightSymbol = new esri.symbol.SimpleFillSymbol(
          esri.symbol.SimpleFillSymbol.STYLE_SOLID,
          new esri.symbol.SimpleLineSymbol(
            esri.symbol.SimpleLineSymbol.STYLE_SOLID,
            new esri.Color([255, 0, 0, 0]), 3
          ),
          new esri.Color([0, 0, 0, 0.5])
        );
        DCI.modalLayer.map = map;
        DCI.modalLayer.graphicslayer = new esri.layers.GraphicsLayer();
        DCI.modalLayer.map.addLayer(DCI.modalLayer.graphicslayer);//将图层赋给地图

        var obj = DCI.modalLayer.getRegionByNAME("普兰店市");
        if (obj) {
            loadModalLayer();

        }
        //地图范围变化事件
        map.on("extent-change", function (evt) {
            if (DCI.modalLayer.isModal) {
                loadModalLayer();
            }
        });
……
……

更多的详情见：GIS之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

GIS之家作品：GIS之家
GIS之家源码咨询：咨询模式