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();
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