arcgis js 实现地图联动对比功能

var MapCompareCom = function(firstIndex,secondIndex){
var firstlayersinfo = [["basemap","标准矢量","basemap@2x.png","ArcGISTiledMapServiceLayer","http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"],
["warmmap","暖色矢量","warmmap@2x.png","ArcGISTiledMapServiceLayer","http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer"],
["coldmap","冷色矢量","coldmap@2x.png","ArcGISTiledMapServiceLayer","http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetCold/MapServer"],
["imagemap","影像地图","imagemap@2x.png","ArcGISTiledMapServiceLayer","http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"],
["automap","高德矢量","automap@2x.png","MapABCTiledLayer","http://webrd0${subDomain}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=${col}&y=${row}&z=${level}"],
["bdvectormap","百度矢量","baidumap@2x.png","BaiduTiledLayer",""]];

var secondlayersinfo = [["basemap2","标准矢量2","basemap@2x.png","ArcGISTiledMapServiceLayer","http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"],
["warmmap2","暖色矢量2","warmmap@2x.png","ArcGISTiledMapServiceLayer","http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer"],
["coldmap2","冷色矢量2","coldmap@2x.png","ArcGISTiledMapServiceLayer","http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetCold/MapServer"],
["imagemap2","影像地图2","imagemap@2x.png","ArcGISTiledMapServiceLayer","http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"],
["automap2","高德矢量2","automap@2x.png","MapABCTiledLayer","http://webrd0${subDomain}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=${col}&y=${row}&z=${level}"],
["bdvectormap2","百度矢量2","baidumap@2x.png","BaiduTiledLayer",""]];

var mlt = $('#map-list',$("#compare-panel"));

var map0,map1;
var initMapInstance = function(type){
var maptmp; 
require(["esri/map"],function(Map, bundle) {
if(type==0){ 
maptmp = new Map("mapc0", {
     slider: true, 
     sliderPosition: "top-right",
     logo:false,
     center: [114.263,30.55],//[116.383,39.95]
     zoom: 14
   }); 
   map0 = maptmp;
}else{
maptmp = new Map("mapc1", {
     slider: true, 
     sliderPosition: "top-right",
     logo:false,
     center: [114.263,30.55],//[116.383,39.95]
     zoom: 14
   }); 
   map1 = maptmp;
}
});
return maptmp;
}

var mapaction0,mapaction1;
var initMapAction = function(){
$("#mapc0").mouseover(function(n){
if(map0==undefined||map1==undefined){
return;
}
if(mapaction0!=undefined){
mapaction0.remove();
}
mapaction0 = map0.on("extent-change",function(){  
                map1.setExtent(map0.extent);  
            }); 
});
$("#mapc0").mouseout(function(n){
if(mapaction0!=undefined){
mapaction0.remove();
} 
});

$("#mapc1").mouseover(function(n){
if(map0==undefined||map1==undefined){
return;
}
if(mapaction1!=undefined){
mapaction1.remove();
} 
mapaction1 = map1.on("extent-change",function(){  
                map0.setExtent(map1.extent);  
            }); 
});
$("#mapc1").mouseout(function(n){
if(mapaction1!=undefined){
mapaction1.remove();
}  
}); 
}

var closePanelListener = function(){ 
var panel = $('#compare-panel');
panel.find(".panel-header").find('i').on("click",
function(n){  
// $("#map").show();
$("#mapc0").css("left",(68)+"px");
$("#mapc0").css("width","calc(50% - 34px)");
$("#mapc1").css("width","calc(50% - 34px)");
});

}

var initLayerMenu = function(layerinfo,type){ 
var maptmp = initMapInstance(type);
for(var i=0;i<layerinfo.length;i++){
var item = '<li class="map-item"><div id="'+layerinfo[i][0]+'" class="thumb" style="background-image:url(mapicon/'+layerinfo[i][2]+')">';  
item += '<i class="fa fa-check-circle"></i></div>';
item +='<p>'+layerinfo[i][1]+'</p></li>';  
mlt.append(item); 
$('#'+layerinfo[i][0],mlt).off("click");
$('#'+layerinfo[i][0],mlt).on("click",{
layerinfo:layerinfo,
layerType:layerinfo[i][3],
layerUrl:layerinfo[i][4],
layerID:layerinfo[i][0],
map:maptmp},
function(n){
n.preventDefault(); 
var t =$(this); 
if(!t.hasClass("active")){
clearBaseSelected(n.data.layerinfo,n.data.map);
t.addClass("active");
changeLayer(n.data.layerType,n.data.layerUrl,n.data.layerID,n.data.map);
} 
});
}
}

var clearBaseSelected = function(layerInfo,mapInstance){ 
for(var i=0;i<layerInfo.length;i++){
var t = $('#'+layerInfo[i][0],mlt);
if(t.hasClass("active")){ 
t.removeClass("active");
break;
}
}
mapInstance.removeAllLayers();
}

var changeLayer = function(layerType,layerUrl,layerID,mapInstance){
mapInstance.removeAllLayers();
var ly = initLayer(layerType,layerUrl,layerID);
mapInstance.addLayer(ly);
}

var initLayer= function(layerType,layerUrl,layerID){
var mylayer = null;
switch(layerType){
case "ArcGISTiledMapServiceLayer":
mylayer = new esri.layers.ArcGISTiledMapServiceLayer(layerUrl,{}); 
break;
case "BaiduTiledLayer"://var imgMap = new bdimgLayer(),anoMap = new bdanoLayer(),vectMap = new bdvectorLayer();
mylayer = new bdvectorLayer(); 
break;
case "MapABCTiledLayer":
mylayer = new esri.layers.WebTiledLayer(layerUrl, {           
     "subDomains": ["1", "2", "3","4"]
   }); 
break;
case "MapABCTrafficTiledLayer":
mylayer = new autotrafficLayer();
break;
case "ArcGISDynamicMapServiceLayer":
var imageParameters = new esri.layers.ImageParameters();
    imageParameters.format = "png";
  mylayer = new esri.layers.ArcGISDynamicMapServiceLayer(layerUrl,{
  "opacity" : 0.5,
      "imageParameters":imageParameters
  });
break;
case "CustomClusterLayer":
mylayer= new setClusterData();
break; 
case "GeoEventClusterLayer":
mylayer = new setGeoEventClusterData();
break;
}
   
  if(mylayer!=null){
  mylayer.id=layerID; 
  } 
  return mylayer;
}  

var initUI = function(){
mlt.append('<div class="panel-header2">左边图层</div>');
initLayerMenu(firstlayersinfo,0);

mlt.append('<div class="panel-header3">右边图层</div>');
initLayerMenu(secondlayersinfo,1); 

mlt.parent().perfectScrollbar();

$('#'+firstlayersinfo[firstIndex][0],mlt).click();
$('#'+secondlayersinfo[secondIndex][0],mlt).click(); 
closePanelListener(); 
initMapAction();
} 
this.setCompareMapShow = function(){
$("#mapc0").show();
$("#mapc0").css("left",(68+280)+"px");
$("#mapc1").show(); 
$("#map").hide();
}

initUI();

} 

有问题联系qq：541247221