arcgis js 實現捲簾功能
阿新 • • 發佈:2019-01-23
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
}
}
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
}
}
}
有問題聯絡 qq 541247221