前言
關(guān)于本篇功能實現(xiàn)用到的 api 涉及類看不懂的注益，請參照 esri 官網(wǎng)的 arcgis api 3.x for js：esri 官網(wǎng) api，里面詳細(xì)的介紹 arcgis api 3.x 各個類的介紹溯捆，還有就是在線例子：esri 官網(wǎng)在線例子丑搔，這個也是學(xué)習(xí) arcgis api 3.x 的好素材。
內(nèi)容概覽
- 實現(xiàn)地圖模態(tài)層功能
- 源代碼 demo 下載
本文實現(xiàn)的是 arcgis api 3.x 版本的地圖模態(tài)層提揍，效果圖如下：
image
實現(xiàn)的核心思路跟 openlayers4 那里是一致的啤月，利用 turf.js 提供的 difference 相差函數(shù)，計算最大四至和裁剪區(qū)域的差值劳跃；不過跟 openlayers4 不一樣的地方是谎仲，這里 arcgis api 版本的大四至是地圖的當(dāng)前地圖范圍，通過監(jiān)聽地圖的范圍變化事件來動態(tài)獲取刨仑。不用（-180,-90,180,90）是因為發(fā)現(xiàn)用（-180,-90,180,90）來跟裁剪區(qū)域相差運算時候郑诺，繪制的多邊形顯示坠七，發(fā)現(xiàn)有點影響順暢苏章，繪制的多邊形區(qū)域太大，所以想用地圖當(dāng)前范圍 extent 來替代。
模擬數(shù)據(jù)源采用大連市的普蘭店市區(qū)域姚糊。
- 實現(xiàn)核心代碼
if (typeof DCI == "undefined") { var DCI = {}; }
DCI.modalLayer = {
map: null,//地圖對象
graphicslayer: null,//顯示圖層
highlightSymbol: null,//區(qū)域高亮樣式顏色
isModal:false,
/*
*初始化加載函數(shù)
*/
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之家小專欄
文章尾部提供源代碼下載奕剃，對本專欄感興趣的話恩沛，可以關(guān)注一波
