arcgis js api 地图透镜或放大镜 卷帘效果

function InitExtentTools(){ var cssName = "map-nav-checked"; var swipeObj = new SwipeMap(); var magnifyObj = new MagnifyMap(); this.initUI = function(){ var showDivObj = $("#extools-bar",$('#extools-panel')); showDivObj.parent().perfectScrollbar(); var navToolbar; require(["dojo/on","esri/toolbars/navigation"],function (on,Navigation) { navToolbar = new Navigation(map); function clearClick(){ var lst = $("#extools-bar").find(".toolbar-item"); for(var i=0;i<lst.length;i++){ var item = $(lst[i]); var icon = item.find("i").eq(0); //var txt = item.find("span").eq(0); var id=""; if(icon.length>0){ id = icon[0].id; } if(id=="btn-roller-map"){ swipeObj.disableSwipe(); }else if(id=="btn-glass-map"){ magnifyObj.disableMagnify(); } icon.removeClass(cssName); } } $("#btn-roller-map",showDivObj).on("click",function(){ var t = $(this); var sp = t.parent().find("i").eq(0); if(t.hasClass(cssName)){ swipeObj.disableSwipe(); t.removeClass(cssName); sp.removeClass(cssName); }else{ clearClick(); var rt = swipeObj.InitSwipe(); if(rt){ t.addClass(cssName); sp.addClass(cssName); } } }); $("#btn-glass-map",showDivObj).on("click",function(){ var t = $(this); var sp = t.parent().find("i").eq(0); if(t.hasClass(cssName)){ magnifyObj.disableMagnify(); t.removeClass(cssName); sp.removeClass(cssName); }else{ clearClick(); var rt = magnifyObj.InitMagnify(); if(rt){ t.addClass(cssName); sp.addClass(cssName); } } }); $("#btn-zoomin-map",showDivObj).on("click",function(){ var t = $(this); var sp = t.parent().find("i").eq(0); if(t.hasClass(cssName)){ navToolbar.deactivate(); t.removeClass(cssName); sp.removeClass(cssName); }else{ clearClick(); navToolbar.activate(Navigation.ZOOM_IN); t.addClass(cssName); sp.addClass(cssName); } }); $("#btn-zoomout-map",showDivObj).on("click",function(){ var t = $(this); var sp = t.parent().find("i").eq(0); if(t.hasClass(cssName)){ navToolbar.deactivate(); t.removeClass(cssName); sp.removeClass(cssName); }else{ clearClick(); navToolbar.activate(Navigation.ZOOM_OUT); t.addClass(cssName); sp.addClass(cssName); } }); $("#btn-zoomprev-map",showDivObj).on("click",function(){ clearClick(); navToolbar.zoomToPrevExtent(); navToolbar.deactivate(); }); $("#btn-zoomnext-map",showDivObj).on("click",function(){ clearClick(); navToolbar.zoomToNextExtent(); navToolbar.deactivate(); }); $("#btn-zoomfullext-map",showDivObj).on("click",function(){ clearClick(); navToolbar.zoomToFullExtent(); navToolbar.deactivate(); }); $("#btn-clear-map",showDivObj).on("click",function(){ clearClick(); navToolbar.deactivate(); }); }); } } function SwipeMap(){ this.maptoplayer; this._map_drag; this.InitSwipe = function(){ var rt = true; require(["dojo/on"],function(on){ var divID = getTopLayerDivID(); var div = $("#"+divID); if(div.length>0){ this.maptoplayer = div[0]; }else{ showError("当前图层不支持卷帘操作",true); rt = false; } if(rt){ map.disablePan(); this._map_drag = on(map, "mouse-drag",function(e) { e.stopPropagation(); map.disablePan(); var offsetX=e.screenPoint.x; var offsetY=e.screenPoint.y; refreshDivSize(offsetX,offsetY,maptoplayer); }); } }); return rt; } this.disableSwipe=function (){ clearSwipe(); } function clearSwipe(){ if(this._map_drag!=undefined){ this._map_drag.remove(); map.enablePan(); if(this.maptoplayer!=undefined){ var offsetX=map.width; var offsetY=map.height; //refreshDivSize(offsetX,offsetY,this.maptoplayer); this.maptoplayer.style.clip="auto"; } } } function getTopLayerDivID(){ var layerlist = map.layerIds; var len =0; if(layerlist!=undefined&&layerlist.length>0){ len = layerlist.length; }else{ return null; } var divID=null; for(var i=len-1;i>0;i--){ var item = map.getLayer(layerlist[i]); if(item.visible){ divID = "map_"+item.id; break; } } return divID; } function refreshDivSize(offsetX,offsetY,mapdiv){ var origin=getLayerTransform(mapdiv); var cliptop=-origin.y+"px"; var clipleft=-origin.x+"px";//clip的左上起点 var clipbottom,cliplright; clipbottom=(offsetY-origin.y)+'px'; clipright=(offsetX-origin.x)+"px"; mapdiv.style.clip='rect('+cliptop+','+clipright+','+clipbottom+','+clipleft+')'; } function getLayerTransform(layer) { var xorigin, yorigin, layerstyle = layer.style; if (layerstyle['-webkit-transform']) {//chrome var s = layerstyle['-webkit-transform'];//格式为"translate(0px, 0px)" var xyarray = s.replace(/translate\(|px|\s|\)/, '').split(','); xorigin = parseInt(xyarray[0]); yorigin = parseInt(xyarray[1]); }else if (layerstyle['transform']) {//firefox var layertransforstring=layerstyle['transform']; var xyz = layertransforstring.replace(/px|\s|translate3d\(|px|\)/g, '').split(','); xorigin = parseInt(xyz[0]); yorigin = parseInt(xyz[1]); }else {//ie 8+ xorigin = parseInt(layer.style.left.replace('px', '')); yorigin = parseInt(layer.style.top.replace('px', '')); } return { x: xorigin, y: yorigin } } } function MagnifyMap(){ var _map_drag; var divID ="MagnifyMap"; var mmap; var radius=80; var levelMax = 0; function searchLayerInfo(layerID){ var _layer; if(mapLayerObj!=undefined){ _layer = mapLayerObj.searchLayerByLayerID(layerID); } return _layer; } this.InitMagnify = function(){ var rt =true; require(["dojo/on","esri/map","esri/geometry/Extent"],function(on,Map,Extent){ var sdivID = getSecondLayerID(); var div = $("#map_"+sdivID); var mlayer; if(div.length>0){ mlayer = searchLayerInfo(sdivID); }else{ rt = false; } if(mlayer==undefined||!rt){ showError("当前图层不支持透镜操作",true); rt = false; } if(rt){ $("#map").append('<div id="'+divID+'" class="magnifying-glass"><div id="mmap"></div></div>'); mmap = new Map("mmap",{ slider: false, logo:false }); $("#mmap").css("width",map.width); $("#mmap").css("height",map.height); mmap.setLevel(map.getLevel()+levelMax); mmap.centerAt(map.extent.getCenter()); $("#"+divID).css("width",radius*2); $("#"+divID).css("height",radius*2); $("#"+divID).css("border-radius","50%"); $("#"+divID).hide(); mmap.addLayer(mlayer); mmap.disablePan(); mmap.disableDoubleClickZoom(); mmap.disableScrollWheelZoom(); mmap.disableSnapping(); mmap.disableKeyboardNavigation(); map.disablePan(); _map_drag = on(map, "mouse-drag",function(e) { e.stopPropagation(); map.disablePan(); mmap.disablePan(); mmap.disableDoubleClickZoom(); mmap.disableScrollWheelZoom(); mmap.disableSnapping(); mmap.disableKeyboardNavigation(); $("#"+divID).show(); var offsetX=e.screenPoint.x; var offsetY=e.screenPoint.y; var mapx = e.mapPoint.x; var mapy = e.ma