arcgis js 实现透镜或放大镜功能

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.mapPoint.y;
refreshDivSize(offsetX,offsetY,mapx,mapy); 
}); 
}
}); 
return rt;
}  

this.disableMagnify=function (){
clearMagnify();
}

function clearMagnify(){
if(_map_drag!=undefined){
_map_drag.remove();
map.enablePan(); 
}
if(mmap!=undefined){
mmap.removeAllLayers();
mmap.destroy();
}
$("#"+divID).remove();
}

function getSecondLayerID(){
var layerlist = map.layerIds;
var len =0;
if(layerlist!=undefined&&layerlist.length>0){
len = layerlist.length;
}else{
return null;

var layerID=null;
var index = 0;
for(var i=len-1;i>=0;i--){
var item = map.getLayer(layerlist[i]);
if(item.visible){
if(index==1){
layerID = item.id;
break;
}
index++;
}
}
return layerID;
}

function refreshDivSize(offsetX,offsetY,mapX,mapY){ 
var t = offsetY-radius;
var l = offsetX-radius;
$("#mmap").css("top",-(offsetY-radius)+"px");
$("#mmap").css("left",-(offsetX-radius)+"px");
$("#"+divID).css("top",t+"px");
$("#"+divID).css("left",l+"px"); 

}

联系 qq:541247221

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一醉千秋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值