arcgis api for js入门开发系列二十二地图模态层

前面实现一篇openlayers版本的地图模态层效果：openlayers入门开发系列之地图模态层篇

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

image

实现的核心思路跟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;
    }

}

GIS之家作品：GIS之家
GIS之家在线咨询：在线咨询