前面實現一篇openlayers版本的地圖模態層效果：openlayers入門開發系列之地圖模態層篇

本文實現的是arcgis api 3.x版本的地圖模態層，效果圖如下：

實現的核心思路跟openlayers那裡是一致的，利用turf.js提供的difference相差函式，計算最大四至和裁剪區域的差值；不過跟openlayers不一樣的地方是，這裡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();
            }
        });
        function loadModalLayer() {
            DCI.modalLayer.graphicslayer.clear();
            var boundCoord = [[[map.extent.xmin, map.extent.ymin], [map.extent.xmax, map.extent.ymin], [map.extent.xmax, map.extent.ymax], [map.extent.xmin, map.extent.ymax], [map.extent.xmin, map.extent.ymin]]];
            var zoneCoord = obj.geometry.rings;
            var boundGeo = turf.polygon(boundCoord),
                zoneGeo = turf.polygon(zoneCoord);
            var modalJson = turf.difference(boundGeo, zoneGeo);
            if (modalJson && modalJson.geometry && modalJson.geometry.coordinates.length > 0) {
                if (zoneCoord.length && zoneCoord.length > 1) {
                    for (var i = 0; i < zoneCoord.length; i++) {
                        modalJson.geometry.coordinates.push(zoneCoord[i]);
                    }
                }
                var polygon = null;
                switch (modalJson.geometry.type) {
                    case "Polygon":
                        polygon = new esri.geometry.Polygon(modalJson.geometry.coordinates);
                        polygon.setSpatialReference(map.spatialReference);
                        var modalGraphic = new esri.Graphic(polygon, DCI.modalLayer.highlightSymbol);
                        DCI.modalLayer.graphicslayer.add(modalGraphic);
                        break;
                    case "MultiPolygon":
                        for (var j = 0; j < modalJson.geometry.coordinates.length > 0; j++) {
                            polygon = new esri.geometry.Polygon(modalJson.geometry.coordinates[j]);
                            polygon.setSpatialReference(map.spatialReference);
                            var modalGraphic = new esri.Graphic(polygon, DCI.modalLayer.highlightSymbol);
                            DCI.modalLayer.graphicslayer.add(modalGraphic);
                        }
                        break;
                }

            }
        }
    },
    /**
     * 根據區域名稱獲取對應的區域模擬資料
     */
    getRegionByNAME: function (regionNAME) {
        var obj = {};
        if (regionData && regionData.length>0) {
            for (var i = 0; i < regionData.length; i++) {
                var data = regionData[i];
                if (data.attributes.NAME == regionNAME) {
                    obj = data;
                    break;
                }
            }
        }
        return obj;
    }

}