arcgis api for js入門開發系列六地圖分屏對比
阿新 • • 發佈：2019-01-31
上一篇實現了demo的地圖示繪模組，本篇新增地圖地圖分屏對比模組，截圖如下（原始碼見文章底部）：
對效果圖的簡單介紹一下，在demo只採用了兩分屏對比，感興趣的話，可以在兩分屏的基礎上拓展，修改css樣式以及js控制，可以修改為多屏對比效果：
1對應的是滑鼠當前位置，2對應的是1在另一個分屏的地圖位置；3是切圖不同底圖的作用。
地圖分屏效果的對比，核心在於擁有不同年份或者不同型別的底圖之間的對比才有意義的，這裡的dmeo由於地圖資料素材的限制，沒有不同型別的底圖，所以湊合的採用同一張底圖的對比，但是分屏對比的功能效果是達到了的。
一、專案demo新增部分：
1.新增map.splitScreen.js檔案，實現地圖分屏對比功能模組的程式碼檔案；
2.在map.html頁面引用map.splitScreen.js：
<script type="text/javascript" src="js/main/map.splitScreen.js"></script>3.在地圖工具欄map.map2dPanel.js檔案，新增地圖分屏對比的選單：
"<li class='mapcompare' id='mapCompare'>" + "<a href='javascript:void(0)' class='mapcomparebg' id='mapcompareType'><span class='mapcomparelabel'></span>地圖對比</a><span class='raang_more' id='toolCur'></span>" + "<ul style='display: none;' id='mapcompareDiv'>" + "<li id='one-screen'><a href='javascript:void(0)'><span class='mapcomparelabel'></span>單屏</a></li>" + "<li id='two-screen'><a href='javascript:void(0)'><span class='mapcomparelabel'></span>二屏</a></li>" + "</ul>" + "</li>"+
4.map.map2dPanel.js響應地圖分屏對比的選單事件：
//地圖對比 $("#mapCompare").bind("mouseenter", function () { if (!DCI.map2dTool.is_initialize) {//地圖對比分屏,初始化載入一次 DCI.SplitScreen.initialize(map); DCI.map2dTool.is_initialize = true; } $("#mapcompareDiv").show(); }); $("#mapCompare").bind("mouseleave", function () { $("#mapcompareDiv").hide(); }); //地圖對比 $("#mapcompareDiv li").click(function () { switch ($(this).index()) { case 0://單屏 $("#centerPanel").removeClass("map_two"); DCI.SplitScreen.splitMap('splitOne'); $("#toolBar").show(); break; case 1://二屏 //動態設定二屏高度 var mainmapheight = $("#map").css("height"); $("#map-two").css("height", mainmapheight); $("#centerPanel").addClass("map_two"); DCI.SplitScreen.splitMap('splitTwo'); $("#toolBar").hide(); break; default: } });
二、談談實現地圖分屏對比模組的思路：
該功能模組實現的核心就是如何讓兩個地圖同步，裡面關鍵是呼叫地圖範圍變化監聽事件extent-change，通過對兩個地圖extent-change事件的監聽，不論你操作任意一個地圖，主要地圖範圍發生變化（地圖縮放、地圖拖動平移等等），另一個地圖都會監聽到，然後獲取到主地圖當前時刻的地圖範圍，然後更新同步過來；
1.地圖監聽事件：
/*新增事件*/
_addclickEvent: function () {
if (DCI.SplitScreen.objMap.mapOne && !DCI.SplitScreen.clickOne) {
DCI.SplitScreen.mapOne_handle = DCI.SplitScreen.objMap.mapOne.on('extent-change', DCI.SplitScreen._extentchangeEvent);
DCI.SplitScreen.mapOne_movehandle = DCI.SplitScreen.objMap.mapOne.on('mouse-move', DCI.SplitScreen._moveEvent);
DCI.SplitScreen.clickOne = true;
}
if (DCI.SplitScreen.objMap.mapTwo && !DCI.SplitScreen.clickTwo) {
DCI.SplitScreen.mapTwo_handle = DCI.SplitScreen.objMap.mapTwo.on('extent-change', DCI.SplitScreen._extentchangeEvent);
DCI.SplitScreen.mapTwo_movehandle = DCI.SplitScreen.objMap.mapTwo.on('mouse-move', DCI.SplitScreen._moveEvent);
DCI.SplitScreen.clickTwo = true;
}
},2.地圖監聽事件結果同步地圖：
_extentchangeEvent: function (evt) {
var map = this;
var extent = evt.extent;
var mapZoom = map.getZoom();
DCI.SplitScreen.mapSerView({ extent: extent, zoom: mapZoom, map: map });
}, // 設定map的bounds
mapSerView: function (options) {
for (obj in DCI.SplitScreen.objMap) {
if (DCI.SplitScreen.objMap[obj] && DCI.SplitScreen.objMap[obj]) {
if (DCI.SplitScreen.objMap[obj] == options.map) {
continue;
}
if (Math.abs(options.extent.xmin - DCI.SplitScreen.objMap[obj].extent.xmin) > 0.0001 ||
Math.abs(options.extent.ymin - DCI.SplitScreen.objMap[obj].extent.ymin) > 0.0001) {
DCI.SplitScreen.objMap[obj].centerAndZoom(options.extent.getCenter(), options.zoom);
}
}
}
DCI.SplitScreen.clearExtentchange();
clearTimeout(this.eventTimer);
//建立新resize Timer，讓它延遲0.4秒觸發
DCI.SplitScreen.eventTimer = setTimeout(function () {
DCI.SplitScreen.addEvent();
}, 400);
},GIS之家新部落格系列釋出更新在GIS之家網站，歡迎關注收藏：GIS之家網站
GIS之家作品：GIS之家
GIS之家交流諮詢：諮詢模式