📄 zoom.js
字号:
this.m_zoomScale = this.m_ExtentScale[h];
//装载到处理集
this.m_zoomStep = h;
this.ClicktoOther(8);
return this.m_zoomScale;
}
/**
* 设置比例因子
* @param {string} 缩放序列
* @return {string} 比例因子
*/
this.setExtentScale = function(ScaleList){
//ScaleList = '1,' + ScaleList + ',1';
this.m_ExtentScale = ScaleList.split(',');
return this.m_ExtentScale;
}
/**
* 显示/隐藏层
*/
this.OptionDiv = function(){
var lay = this.getLayer(this.GDivName);
var layov = this.getLayer(this.GDivClose);
if (lay!=null){
if (lay.style.visibility=='hidden'){
if (layov!=null){
layov.style.left = this.CloseLeft + "px";
layov.innerHTML = '<img src="'+this.zoomListImgClose+'">';
}
this.setShow();
lay.style.visibility='visible'
}else{
if (layov!=null){
layov.style.left = "0px";
layov.innerHTML = '<img src="'+this.zoomListImgHide+'">';
}
this.setHidden();
lay.style.visibility='hidden'
}
}
}
/**
* 设置滑动
* @param {bool} b 设置是否滑动
* return 是否滑动
*/
this.BZoomBox= function(b){
this.bzoombox = b;
return this.bzoombox;
}
/**
* 移动滑块
* @param {int} Y 鼠标的Y位置
* @return {string} 滑块的位置
*/
this.ZoomBoxMove = function(Y){
if (this.bzoombox){
var movestep = Y-this.zoomSlideHeight-this.BoxTop + 5;
var _Top = "";
if (movestep<=this.SlideMin){
_Top = this.SlideMin + 2;
_Top += "px";
this.BZoomBox(false);
}else if (movestep>=this.SlideMax){
_Top = this.SlideMax - 3;
_Top += "px";
this.BZoomBox(false);
}else {
_Top = movestep+"px";
this.zoomScale(movestep);
}
document.all[this.GFetchName].style.top = _Top;
return _Top;
}
}
/**
* 显示方式
* @param {int} type 显示类型
* rerurn 返回类型
*/
this.setMapToolType = function(type){
this.MapToolType = type;
return this.MapToolType;
}
/**
* 显示方式
*/
this.getMapToolType = function(){
return this.MapToolType;
}
/**
* 显示方式
* @param {int} type 处理类型
* @param {string} classname 客户端类名字
* return 返回HTML构成语句
*/
this.getDraw = function(type,classname){
this.zoomListImgClose = this.getImgPath() + 'close.gif';
this.zoomListImgHide = this.getImgPath() + 'overcontract.gif';
this.setMapToolType(type);
switch (this.MapToolType){
case 1:
this.zoomListImgBackground=this.getImgPath()+'lmc.png';//全部控件打开
this.zoomListImgBott=this.getImgPath()+'lmc-bottom.png';
this.zoomListImgSlide=this.getImgPath()+'slider.png';
this.zooListHeight = "226";
this.zooListWidth = "59";
this.zooListPaneWidth = "79";
this.zooListPaneHeight = "276";
//滑块位置
this.SlideMin = 10;
this.SlideMax = 144;
this.zoomSlideHeight = 102;
this.zoomBoxHeight = 150;
return this.getDrawTypeI(classname);
break;
case 2:
this.zoomListImgBackground = this.getImgPath()+'smc.png';//没有滑块,没有全图
this.zoomListImgBott='';
this.zoomListImgSlide='';
this.zooListHeight = "116";
this.zooListWidth = "59";
this.zooListPaneWidth = "70";
this.zooListPaneHeight = "116";
return this.getDrawTypeII(classname);
break;
case 3:
this.zoomListImgBackground = this.getImgPath()+'orientation1.png';//只有方向舵
this.zoomListImgBott='';
this.zoomListImgSlide='';
this.zooListHeight = "65";
this.zooListWidth = "59";
this.zooListPaneWidth = 79;
this.zooListPaneHeight = 76;
return this.getDrawTypeIII(classname);
break;
case 4:
this.zoomListImgBackground = this.getImgPath()+'mapas1.png';//只有放大缩小
this.zoomListImgBott='';
this.zoomListImgSlide='';
this.zooListHeight = "30";
this.zooListWidth = "59";
this.zooListPaneWidth = 61;
this.zooListPaneHeight = 48;
return this.getDrawTypeIV(classname);
break;
case 5:
this.zoomListImgBackground = this.getImgPath()+'sliderlist.png';//只有滑块
this.zoomListImgBott=this.getImgPath()+'lmc-bottom1.png';
this.zoomListImgSlide=this.getImgPath()+'slider.png';
this.zooListHeight = "204";
this.zooListWidth = "39";
this.zooListPaneWidth = 42;
this.zooListPaneHeight = 226;
//滑块位置
this.SlideMin = 10;
this.SlideMax = 201;
this.zoomSlideHeight = 20;
this.zoomBoxHeight = 201;
return this.getDrawTypeV(classname);
break;
}
}
/**
* 第1种显示方式
* @param {string} classname 客户端类名字
* return 返回HTML构成语句
*/
this.getDrawTypeI = function(classname){
//var iClosePic = this.zooListPaneWidth-this.ImgCloseWidth;//关闭按钮的左距离
var iClosePic = this.CloseLeft;
var tmzoombox = '<div class="gmnoprint" id="'+this.GDivName+'" style="Z-INDEX: 1; left: '+this.BoxLeft+'px; width: '+this.zooListPaneWidth+'px; position: absolute; top: '+this.BoxTop+'px; height: '+this.zooListPaneHeight+'px" unselectable="on" >';
tmzoombox += '<div id="'+this.GDivClose+'" style="left: '+iClosePic+'px; overflow: hidden;cursor: pointer;visibility: visible;width: 20px; position: absolute; top: 0px; height: 20px " onmouseup="'+classname+'.OptionDiv()">';
tmzoombox += ' <img src="'+this.zoomListImgClose+'">';
tmzoombox += '</div>';
tmzoombox += '<div style="left: 10px; overflow: hidden; width: '+this.zooListWidth+'px; position: absolute; top: 10px; height: '+this.zooListHeight+'px">';
tmzoombox += ' <div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=\''+this.zoomListImgBackground+'\'); left: 0px; width: 59px; position: absolute; top: 0px; height: '+this.zooListHeight+'px; border: 0px none; margin: 0px; padding: 0px" unselectable="on" galleryImg="no" src="'+this.zoomListImgBackground+'">';
tmzoombox += ' <img style="visibility: hidden" src="'+this.zoomListImgBackground+'">';
tmzoombox += ' </div>';
tmzoombox += ' <div title="Go up" onmousedown="'+classname+'.theMouseClick(1)" style="filter: alpha(opacity=1); left: 20px; width: 18px; cursor: pointer; position: absolute; top: 0px; height: 18px; background-color: white"></div>';
tmzoombox += ' <div title="Go Left" onmousedown="'+classname+'.theMouseClick(2)" style="filter: alpha(opacity=1); left: 0px; width: 18px; cursor: pointer; position: absolute; top: 20px; height: 18px; background-color: white"></div>';
tmzoombox += ' <div title="Go right" onmousedown="'+classname+'.theMouseClick(3)" style="filter: alpha(opacity=1); left: 40px; width: 18px; cursor: pointer; position: absolute; top: 20px; height: 18px; background-color: white"></div>';
tmzoombox += ' <div title="Go down" onmousedown="'+classname+'.theMouseClick(4)" style="filter: alpha(opacity=1); left: 20px; width: 18px; cursor: pointer; position: absolute; top: 40px; height: 18px; background-color: white"></div>';
tmzoombox += ' <div title="Return to the last result" onmousedown="'+classname+'.theMouseClick(7)" style="filter: alpha(opacity=1); left: 20px; width: 18px; cursor: pointer; position: absolute; top: 20px; height: 18px; background-color: white"></div>';
tmzoombox += ' <div title="Zoom In" onmousedown ="'+classname+'.subStepScaleBox();" style="filter: alpha(opacity=1); left: 20px; width: 18px; cursor: pointer; position: absolute; top: 65px; height: 18px; background-color: white"></div>';
tmzoombox += '</div>';
tmzoombox += '<div style="left: 10px; width: 59px; position: absolute; top: 236px; height: 30px">';
tmzoombox += ' <div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='+this.zoomListImgBott+'); width: 59px; height: 30px; border: 0px none; margin: 0px; padding: 0px" unselectable="on" galleryImg="no" src="'+this.zoomListImgBott+'">';
tmzoombox += ' <img style="visibility: hidden" src="'+this.zoomListImgBott+'">';
tmzoombox += ' </div>';
tmzoombox += ' <div title="Zoom Out" onmousedown ="'+classname+'.addStepScaleBox();" style="filter: alpha(opacity=1); left: 20px; width: 18px; cursor: pointer; position: absolute; top: 11px; height: 18px; background-color: white"></div>';
tmzoombox += '</div>';
tmzoombox += '<div style="left: 29px; width: 22px; cursor: pointer; position: absolute; top: 86px; height: 150px" onmouseup="'+classname+'.BZoomBox(true);'+classname+'.ZoomBoxMove(event.y);'+classname+'.BZoomBox(false);_onmouse()">';
//tmzoombox += ' <div id="'+this.GFetchName+'" onmouseup="'+classname+'.BZoomBox(false);ZoomScale();" onmousedown="'+classname+'.BZoomBox(true);"style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='+this.zoomListImgSlide+'); left: 0px; width: 22px; position: absolute; top: 16px; height: 14px; border: 0px none; margin: 0px; padding: 0px" unselectable="on" galleryImg="no" src="'+this.zoomListImgSlide+'">';
tmzoombox += ' <div id="'+this.GFetchName+'" onmouseup="'+classname+'.BZoomBox(false);'+classname+'.ZoomBoxMove(event.y);" onmousedown="'+classname+'.BZoomBox(true);"style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='+this.zoomListImgSlide+'); left: 0px; width: 22px; position: absolute; top: 16px; height: 14px; border: 0px none; margin: 0px; padding: 0px" unselectable="on" galleryImg="no" src="'+this.zoomListImgSlide+'">';
tmzoombox += ' <img style="visibility: hidden" src="'+this.zoomListImgSlide+'">';
tmzoombox += ' </div>';
tmzoombox += ' </div>';
return tmzoombox;
}
/**
* 第2种显示方式
* @param {string} classname 客户端类名字
* return 返回HTML构成语句
*/
this.getDrawTypeII = function(classname){
//var iClosePic = this.zooListPaneWidth-this.ImgCloseWidth;//关闭按钮的左距离
//this.CloseLeft = iClosePic;
var iClosePic = this.CloseLeft;
var tmzoombox = '<div class="gmnoprint" id="'+this.GDivName+'" style="Z-INDEX: 1;left: '+this.BoxLeft+'px; width: '+this.zooListPaneWidth+'px; position: absolute; top: '+this.BoxTop+'px; height: '+this.zooListPaneHeight+'px" unselectable="on" >';
tmzoombox += '<div id="'+this.GDivClose+'" style="left: '+iClosePic+'px; overflow: hidden;cursor: pointer;visibility: visible;width: 20px; position: absolute; top: 0px; height: 20px " onmouseup="'+classname+'.OptionDiv()">';
tmzoombox += ' <img src="'+this.zoomListImgClose+'">';
tmzoombox += '</div>';
tmzoombox += '<div style="left: 10px; overflow: hidden; width: '+this.zooListWidth+'px; position: absolute; top: 10px; height: '+this.zooListHeight+'px">';
tmzoombox += ' <div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=\''+this.zoomListImgBackground+'\'); left: 0px; width: 59px; position: absolute; top: 0px; height: '+this.zooListHeight+'px; border: 0px none; margin: 0px; padding: 0px" unselectable="on" galleryImg="no" src="'+this.zoomListImgBackground+'">';
tmzoombox += ' <img style="visibility: hidden" src="'+this.zoomListImgBackground+'">';
tmzoombox += ' </div>';
tmzoombox += ' <div title="Go up" onmousedown="'+classname+'.theMouseClick(1)" style="FILTER: alpha(opacity=1); LEFT: 9px; WIDTH: 18px; CURSOR: pointer; POSITION: absolute; TOP: 0px; HEIGHT: 18px; BACKGROUND-COLOR: white"></div>';
tmzoombox += ' <div title="Go Left" onmousedown="'+classname+'.theMouseClick(2)" style="FILTER: alpha(opacity=1); LEFT: 0px; WIDTH: 18px; CURSOR: pointer; POSITION: absolute; TOP: 18px; HEIGHT: 18px; BACKGROUND-COLOR: white"></div>';
tmzoombox += ' <div title="Go right" onmousedown="'+classname+'.theMouseClick(3)" style="FILTER: alpha(opacity=1); LEFT: 18px; WIDTH: 18px; CURSOR: pointer; POSITION: absolute; TOP: 18px; HEIGHT: 18px; BACKGROUND-COLOR: white"></div>';
tmzoombox += ' <div title="Go down" onmousedown="'+classname+'.theMouseClick(4)" style="FILTER: alpha(opacity=1); LEFT: 9px; WIDTH: 18px; CURSOR: pointer; POSITION: absolute; TOP: 36px; HEIGHT: 18px; BACKGROUND-COLOR: white"></div>';
tmzoombox += ' <div title="Zoom In" onmousedown ="'+classname+'.addStepScaleBox();" style="FILTER: alpha(opacity=1); LEFT: 9px; WIDTH: 18px; CURSOR: pointer; POSITION: absolute; TOP: 57px; HEIGHT: 18px; BACKGROUND-COLOR: white"></div>';
tmzoombox += ' <div title="Zoom Out" onmousedown ="'+classname+'.subStepScaleBox();" style="FILTER: alpha(opacity=1); LEFT: 9px; WIDTH: 18px; CURSOR: pointer; POSITION: absolute; TOP: 75px; HEIGHT: 18px; BACKGROUND-COLOR: white"></div>';
tmzoombox += '</div>';
return tmzoombox;
}
/**
* 第3种显示方式
* @param {string} classname 客户端类名字
* return 返回HTML构成语句
*/
this.getDrawTypeIII = function(classname){
//var iClosePic = this.zooListPaneWidth-this.ImgCloseWidth;//关闭按钮的左距离
//this.CloseLeft = iClosePic;
var iClosePic = this.CloseLeft;
var tmzoombox = '<div class="gmnoprint" id="'+this.GDivName+'" style="Z-INDEX: 1;left: '+this.BoxLeft+'px; width: '+this.zooListPaneWidth+'px; position: absolute; top: '+this.BoxTop+'px; height: '+this.zooListPaneHeight+'px" unselectable="on" >';
tmzoombox += '<div id="'+this.GDivClose+'" style="left: '+iClosePic+'px; overflow: hidden;cursor: pointer;visibility: visible;width: 20px; position: absolute; top: 0px; height: 20px " onmouseup="'+classname+'.OptionDiv()">';
tmzoombox += ' <img src="'+this.zoomListImgClose+'">';
tmzoombox += '</div>';
tmzoombox += '<div style="left: 10px; overflow: hidden; width: '+this.zooListWidth+'px; position: absolute; top: 10px; height: '+this.zooListHeight+'px">';
tmzoombox += ' <div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=\''+this.zoomListImgBackground+'\'); left: 0px; width: 59px; position: absolute; top: 0px; height: '+this.zooListHeight+'px; border: 0px none; margin: 0px; padding: 0px" unselectable="on" galleryImg="no" src="'+this.zoomListImgBackground+'">';
tmzoombox += ' <img style="visibility: hidden" src="'+this.zoomListImgBackground+'">';
tmzoombox += ' </div>';
tmzoombox += ' <div title="Go up" onmousedown="'+classname+'.theMouseClick(1)" style="filter: alpha(opacity=1); left: 20px; width: 18px; cursor: pointer; position: absolute; top: 0px; height: 18px; background-color: white"></div>';
tmzoombox += ' <div title="Go Left" onmousedown="'+classname+'.theMouseClick(2)" style="filter: alpha(opacity=1); left: 0px; width: 18px; cursor: pointer; position: absolute; top: 20px; height: 18px; background-color: white"></div>';
tmzoombox += ' <div title="Go right" onmousedown="'+classname+'.theMouseClick(3)" style="filter: alpha(opacity=1); left: 40px; width: 18px; cursor: pointer; position: absolute; top: 20px; height: 18px; background-color: white"></div>';
tmzoombox += ' <div title="Go down" onmousedown="'+classname+'.theMouseClick(4)" style="filter: alpha(opacity=1); left: 20px; width: 18px; cursor: pointer; position: absolute; top: 40px; height: 18px; background-color: white"></div>';
tmzoombox += '</div>';
return tmzoombox;
}
/**
* 第4种显示方式
* @param {string} classname 客户端类名字
* return 返回HTML构成语句
*/
this.getDrawTypeIV = function(classname){
//var iClosePic = this.zooListPaneWidth-this.ImgCloseWidth;//关闭按钮的左距离
//this.CloseLeft = iClosePic;
var iClosePic = this.CloseLeft;
var tmzoombox = '<div class="gmnoprint" id="'+this.GDivName+'" style="Z-INDEX: 1;left: '+this.BoxLeft+'px; width: '+this.zooListPaneWidth+'px; position: absolute; top: '+this.BoxTop+'px; height: '+this.zooListPaneHeight+'px" unselectable="on" >';
tmzoombox += '<div id="'+this.GDivClose+'" style="left: '+iClosePic+'px; overflow: hidden;cursor: pointer;visibility: visible;width: 20px; position: absolute; top: 0px; height: 20px " onmouseup="'+classname+'.OptionDiv()">';
tmzoombox += ' <img src="'+this.zoomListImgClose+'">';
tmzoombox += '</div>';
tmzoombox += '<div style="left: 10px; overflow: hidden; width: '+this.zooListWidth+'px; position: absolute; top: 10px; height: '+this.zooListHeight+'px">';
tmzoombox += ' <div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=\''+this.zoomListImgBackground+'\'); left: 0px; width: 59px; position: absolute; top: 0px; height: '+this.zooListHeight+'px; border: 0px none; margin: 0px; padding: 0px" unselectable="on" galleryImg="no" src="'+this.zoomListImgBackground+'">';
tmzoombox += ' <img style="visibility: hidden" src="'+this.zoomListImgBackground+'">';
tmzoombox += ' </div>';
tmzoombox += ' <div title="Zoom In" onmousedown ="'+classname+'.addStepScaleBox();" style="FILTER: alpha(opacity=1); LEFT: 1px; WIDTH: 18px; CURSOR: pointer; POSITION: absolute; TOP: 1px; HEIGHT: 18px; BACKGROUND-COLOR: white"></div>';
tmzoombox += ' <div title="Zoom Out" onmousedown ="'+classname+'.subStepScaleBox();" style="FILTER: alpha(opacity=1); LEFT: 19px; WIDTH: 18px; CURSOR: pointer; POSITION: absolute; TOP: 1px; HEIGHT: 18px; BACKGROUND-COLOR: white"></div>';
tmzoombox += '</div>';
return tmzoombox;
}
/**
* 第5种显示方式
* @param {string} classname 客户端类名字
* return 返回HTML构成语句
*/
this.getDrawTypeV = function(classname){
//var iClosePic = this.zooListPaneWidth-this.ImgCloseWidth;//关闭按钮的左距离
//this.CloseLeft = iClosePic;
var iClosePic = this.CloseLeft;
var tmzoombox = '<div class="gmnoprint" id="'+this.GDivName+'" style="Z-INDEX: 1;left: '+this.BoxLeft+'px; width: '+this.zooListPaneWidth+'px; position: absolute; top: '+this.BoxTop+'px; height: '+this.zooListPaneHeight+'px" unselectable="on" >';
tmzoombox += '<div id="'+this.GDivClose+'" style="left: '+iClosePic+'px; overflow: hidden;cursor: pointer;visibility: visible;width: 20px; position: absolute; top: 0px; height: 20px " onmouseup="'+classname+'.OptionDiv()">';
tmzoombox += ' <img src="'+this.zoomListImgClose+'">';
tmzoombox += '</div>';
tmzoombox += '<div style="left: 4px; overflow: hidden; width: '+this.zooListWidth+'px; position: absolute; top: 10px; height: '+this.zooListHeight+'px">';
tmzoombox += ' <div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=\''+this.zoomListImgBackground+'\'); left: 0px; width: 59px; position: absolute; top: 0px; height: '+this.zooListHeight+'px; border: 0px none; margin: 0px; padding: 0px" unselectable="on" galleryImg="no" src="'+this.zoomListImgBackground+'">';
tmzoombox += ' <img style="visibility: hidden" src="'+this.zoomListImgBackground+'">';
tmzoombox += ' </div>';
tmzoombox += '</div>';
tmzoombox += '<div style="left: 4px; width: 59px; position: absolute; top: 210px; height: 30px">';
tmzoombox += ' <div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='+this.zoomListImgBott+'); width: 59px; height: 30px; border: 0px none; margin: 0px; padding: 0px" unselectable="on" galleryImg="no" src="'+this.zoomListImgBott+'">';
tmzoombox += ' <img style="visibility: hidden" src="'+this.zoomListImgBott+'">';
tmzoombox += ' </div>';
tmzoombox += '</div>';
tmzoombox += '<div style="left: 10px; width: 22px; cursor: pointer; position: absolute; top: 6px; height: '+this.zooListHeight+'px" onmouseup="'+classname+'.BZoomBox(true);'+classname+'.ZoomBoxMove(event.y);'+classname+'.BZoomBox(false);_onmouse()">';
tmzoombox += ' <div id="'+this.GFetchName+'" onmouseup="'+classname+'.BZoomBox(false);'+classname+'.ZoomBoxMove(event.y);" onmousedown="'+classname+'.BZoomBox(true)"style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='+this.zoomListImgSlide+'); left: 0px; width: 22px; position: absolute; top: 10px; height: 14px; border: 0px none; margin: 0px; padding: 0px" unselectable="on" galleryImg="no" src="'+this.zoomListImgSlide+'">';
tmzoombox += ' <img style="visibility: hidden" src="'+this.zoomListImgSlide+'">';
tmzoombox += ' </div>';
tmzoombox += ' </div>';
return tmzoombox;
}
}//class zoomListBox end
var sZoomListBox = new ZoomListBox();
//放大按钮必要,算出步数
function _onmouse(){
//alert(sZoomListBox.m_zoomScale);
zoomToScale(sZoomListBox.m_zoomScale);
}
/**
* 缩放到比例尺
*/
function zoomToScale(scaleFactor){
var msize;
if(iHeight < iWidth){
msize = iHeight;
//alert("iHeight:" + msize);
}else {
msize = iWidth
//alert("iwidtht:" + msize);
}
var midX = eRight - (xDistance / 2);
var midY = eTop - (yDistance / 2);
var mscale = scaleFactor*((msize/96)*12) * .5;
//alert(mscale);
eLeft = ((midX) - (mscale));
eRight = ((midX) + (mscale));
eBottom = ((midY) - (mscale));
eTop = ((midY) + (mscale));
sendMapXML();
}//end function
function getDebug(s){
var obj = document.getElementById("mZoomBoxDebug");
if (obj!=null){
obj.innerHTML = s;
}
}
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -