前言
关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：esri 官网 api，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 3.x 的好素材。
内容概览
- 实现地图模态层功能
- 源代码 demo 下载
本文实现的是 arcgis api 3.x 版本的地图模态层，效果图如下：
实现的核心思路跟 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之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波