arcgis api for js入門開發系列六地圖分屏
對效果圖的簡單介紹一下，在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>n
3.在地圖工具欄map.map2dPanel.js文件，新增地圖分屏對比的菜單：
"<li class=mapcompare id=mapCompare>" +n "<a href=javascript:void(0) class=mapcomparebg id=mapcompareType><span class=mapcomparelabel></span>地圖對比</a><span class=raang_more id=toolCur></span>" +n "<ul stylex=display: none; id=mapcompareDiv>" +n "<li id=one-screen><a href=javascript:void(0)><span class=mapcomparelabel></span>單屏</a></li>" +n "<li id=two-screen><a href=javascript:void(0)><span class=mapcomparelabel></span>二屏</a></li>" +n "</ul>" +n "</li>"+n
4.map.map2dPanel.js響應地圖分屏對比的菜單事件：
//地圖對比n $("#mapCompare").bind("mouseenter", function () {n if (!DCI.map2dTool.is_initialize) {//地圖對比分屏,初始化載入一次n DCI.SplitScreen.initialize(map);n DCI.map2dTool.is_initialize = true;n }n $("#mapcompareDiv").show();n });n $("#mapCompare").bind("mouseleave", function () { $("#mapcompareDiv").hide(); });n //地圖對比n $("#mapcompareDiv li").click(function () {n switch ($(this).index()) {n case 0://單屏n $("#centerPanel").removeClass("map_two");n DCI.SplitScreen.splitMap(splitOne);n $("#toolBar").show();n break;n case 1://二屏 n //動態設置二屏高度n var mainmapheight = $("#map").css("height");n $("#map-two").css("height", mainmapheight);n $("#centerPanel").addClass("map_two");n DCI.SplitScreen.splitMap(splitTwo);n $("#toolBar").hide();n break;n default:n }n });n
二、談談實現地圖分屏對比模塊的思路：
該功能模塊實現的核心就是如何讓兩個地圖同步，裡面關鍵是調用地圖範圍變化監聽事件extent-change，通過對兩個地圖extent-change事件的監聽，不論你操作任意一個地圖，主要地圖範圍發生變化（地圖縮放、地圖拖動平移等等），另一個地圖都會監聽到，然後獲取到主地圖當前時刻的地圖範圍，然後更新同步過來；
1.地圖監聽事件：
/*添加事件*/n _addclickEvent: function () {n if (DCI.SplitScreen.objMap.mapOne && !DCI.SplitScreen.clickOne) {n DCI.SplitScreen.mapOne_handle = DCI.SplitScreen.objMap.mapOne.on(extent-change, DCI.SplitScreen._extentchangeEvent);n DCI.SplitScreen.mapOne_movehandle = DCI.SplitScreen.objMap.mapOne.on(mouse-move, DCI.SplitScreen._moveEvent);n DCI.SplitScreen.clickOne = true;n }n if (DCI.SplitScreen.objMap.mapTwo && !DCI.SplitScreen.clickTwo) {n DCI.SplitScreen.mapTwo_handle = DCI.SplitScreen.objMap.mapTwo.on(extent-change, DCI.SplitScreen._extentchangeEvent);n DCI.SplitScreen.mapTwo_movehandle = DCI.SplitScreen.objMap.mapTwo.on(mouse-move, DCI.SplitScreen._moveEvent);n DCI.SplitScreen.clickTwo = true;n }n },n
2.地圖監聽事件結果同步地圖：
_extentchangeEvent: function (evt) {n var map = this;n var extent = evt.extent;n var mapZoom = map.getZoom();n DCI.SplitScreen.mapSerView({ extent: extent, zoom: mapZoom, map: map });n },n
// 設置map的boundsn mapSerView: function (options) {n for (obj in DCI.SplitScreen.objMap) {n if (DCI.SplitScreen.objMap[obj] && DCI.SplitScreen.objMap[obj]) {n if (DCI.SplitScreen.objMap[obj] == options.map) {n continue;n }n if (Math.abs(options.extent.xmin - DCI.SplitScreen.objMap[obj].extent.xmin) > 0.0001 ||n Math.abs(options.extent.ymin - DCI.SplitScreen.objMap[obj].extent.ymin) > 0.0001) {n DCI.SplitScreen.objMap[obj].centerAndZoom(options.extent.getCenter(), options.zoom);n }n }n }n DCI.SplitScreen.clearExtentchange();n clearTimeout(this.eventTimer);n //創建新resize Timer，讓它延遲0.4秒觸發n DCI.SplitScreen.eventTimer = setTimeout(function () {n DCI.SplitScreen.addEvent();n }, 400);n },n
具體實現的詳細過程，下載源代碼：http://pan.baidu.com/s/1dFsUN8d
GIS之家論壇（推薦）：GIS之家論壇
GIS之家GitHub:gishome/arcgis-for-js
GIS之家作品：首頁-GIS之家-淘寶網
GIS之家興趣部落：gis之家部落-興趣部落
GIS項目交流群：238339408
GIS之家交流群一：432512093
推薦閱讀：