arcgis api 3.x for js 入门开发系列二十二地图模态层(附源码下载)

时间:2023-11-25 18:48:02

前言

关于本篇功能实现用到的 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 版本的地图模态层,效果图如下:
arcgis api 3.x for js 入门开发系列二十二地图模态层(附源码下载)

实现的核心思路跟 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之家小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波