zoom.js

arcmis是webgis网站的掩码

/**
 * @class 仿造google缩放功能的集合
 * 本版本只是一个演示版本，存在错误
 */
function ZoomListBox(){
	/**
	 * 相关图像的路径
 	 * @type string 
 	*/
	this.imgPath = '';
	/**
	 * 主控件层名称
 	 * @type string 
 	*/
	this.GDivName = "ZoomBoxList";
	this.GFetchName = "ZoomBox";
	/**
	 * 展开/关闭层名称
 	 * @type string 
 	*/
	this.GDivClose = "CliClose";
	/**
	 * 主控件层高度
 	 * @type int
 	*/
	this.BoxTop = 169;
	/**
	 * 主控件层左距离
 	 * @type int
 	*/
	this.BoxLeft = 20;
	/**
	 * 主控件层的css样式
 	 * @type string
 	*/
	this.zoomListStyle='.g1mnoprint{ border-style: ridge; border-width: 34px }';
	/**
	 * 功能底层图象
 	 * @type string
 	*/
	this.zoomListImgBackground='';
	/**
	 * 按钮底层图象
 	 * @type string
 	*/
	this.zoomListImgBott='';
	/**
	 * 滑块底层图象
 	 * @type string
 	*/
	this.zoomListImgSlide='';
	/**
	 * 展开窗口
 	 * @type string
 	*/
	this.zoomListImgHide='overcontract.gif';
	/**
	 * 关闭窗口
 	 * @type string
 	*/
	this.zoomListImgClose='close.gif';
	/**
	 * 标签底层图象
 	 * @type string
 	*/
	this.zoomListImgTip='labeloff.gif';
	/**
	 * 外框的设置 宽度
 	 * @type string
 	*/
	this.zooListWidth = '';
	/**
	 * 外框的设置 高度
 	 * @type string
 	*/
	this.zooListHeight = '';
	/**
	 * 外框的设置 内容宽度,带px的数值
 	 * @type string
 	*/
	this.zooListPaneWidth = "79px";
	/**
	 * 外框的设置 内容高度,带px的数值
 	 * @type string
 	*/
	this.zooListPaneHeight = "276px";
	/**
	 * 设置是否滑动
 	 * @type bool
 	*/
	this.bzoombox = false;
	/**
	 * 预设缩放比例 第一个和最后一个不参与内容
 	 * @type Array
 	*/
	this.m_ExtentScale = new Array();
	/**
	 * 滑块对应缩放因子
 	 * @type int
 	*/
	this.m_zoomScale = 1;
	/**
	 * 滑块步数
 	 * @type int
 	*/
	this.m_zoomStep = 0;
	/**
	 * 滑块活动范围高度
 	 * @type int
 	*/
	this.zoomBoxHeight = 150;
	/**
	 * 滑块差高度 用于屏幕坐标减法
 	 * @type int
 	*/
	this.zoomSlideHeight = 102;
	/**
	 * 滑块活动范围的最小标志
 	 * @type int
 	*/
	this.SlideMin = 10;
	/**
	 * 滑块活动最大标志
 	 * @type int
 	*/
	this.SlideMax = 144;
	/**
	 * 关闭按钮的左边界
 	 * @type int
 	*/
	this.CloseLeft = 0;
	/**
	 * 关闭按钮的宽度
 	 * @type int
 	*/
	this.ImgCloseWidth = 18;
	/**
	 * 事件转换值
 	 * @type int
 	*/
	this.MapToolType = -1;
	/**
	 * 鼠标是否进入层
	 * @type boolean
	 */
	this.bZoom = false;
	/**
	 * 是否显示
	 * @type boolean
	 */
	this.bShow = true;	
	/**
 	* 设置显示
 	*/
this.setShow = function(){
		this.bShow = true;
		return this.bShow;
	}
	/**
 	* 设置隐藏
 	*/
this.setHidden = function(){
		this.bShow = false;
		this.bZoom = false;
		return this.bShow;
}
	
	/**
 	* 设置所用图像路径
 	* @param {string} 路径
 	*/	
this.setImgPath = function(Path){
	this.ImgPath = Path;
	return this.ImgPath;
}
	/**
 	* 返回所用图像路径
 	* @return string 所用图像路径
 	*/
this.getImgPath = function(){
	return this.ImgPath;
}
	/**
 	* 判断坐标是否在层内
 	* @param {int} x坐标
 	* @param {int} y坐标
 	* @return boolean
 	*/
this.getZoomLayer = function(x,y){
	var bool = false;
	if (this.bShow){
		if ((x>this.BoxLeft)&&(x<=parseInt(this.BoxLeft+parseInt(this.zooListPaneWidth)))&&(y>this.BoxTop)&&(y<=parseInt(this.BoxTop+parseInt(this.zooListPaneHeight)))){
			bool = true
		}else{
			bool = false;
		}
	}else{
		//是否在关闭图像内
		if ((x>this.BoxLeft+parseInt(this.CloseLeft))&&(x<=this.BoxLeft+parseInt(this.CloseLeft+parseInt(this.ImgCloseWidth)))&&(y>this.BoxTop)&&(y<=parseInt(this.BoxTop+parseInt(this.ImgCloseWidth)))){
			bool = true;
		}else{
			bool = false;
		}
	}
	this.bZoom = bool;
return bool;
}
/**
 * 提交到其它处理模式
 * @param {int} chilktype 待处理事件类型
 */
this.ClicktoOther = function(chilktype){
	switch(chilktype){
		case 1:
			panButton(2);
			break;
		case 2:
			panButton(1);
			break;
		case 3:
			panButton(3);
			break;
		case 4:
			panButton(4);
			break;
		case 5:
			_onmouse();
			break;
		case 6:
			_onmouse();
			break;
		case 7:
			fullExtent();
			break;
		case 8:
			window.status = '缩放比:'+this.m_zoomScale;
			break;
		default:
			alert('为注册的其它处理集!');
			break;
	}
}


/**
 * 返回名称对应的图层或null
 * @param {string} name 图层名
 * @return {Object} 图层或null
*/
this.getLayer = function(name) {
	var theObj = document.getElementById(name);
	if (theObj!=null) {
		return theObj;
	 }  else {
	    return(null);
	 }
}

/**
 * 设置对应层鼠标样式
 * @param {string} filename 鼠标文件(cur)名
 * @param {string} divname 图层名
*/
this.setMouseImg = function(filename,divname){
	var layer = this.getLayer(divname);
	if (layer!=null){
		layer.style.cursor = filename;
	}
}

/**
 * 根据输入的步数返回滑块的位置
 * @param {int} step 步数
 * @return {int} 滑块位置
*/
this.stepScaleBox = function(step){
	if (step>this.m_ExtentScale.length-1){
		step=this.m_ExtentScale.length-1;
	}else if(step<=0){
		step=0;
	}
	
	this.m_zoomStep = step;
	var h = Math.round(this.zoomBoxHeight/this.m_ExtentScale.length);
	var _top = step*h;
	if (_top<this.SlideMin){
		_top = this.SlideMin;
	}
	document.all[this.GFetchName].style.top = _top;
	return _top;
}	

/**
 * 鼠标事件
 * @param {int} type 转向的事件类型
 */
this.theMouseClick = function(type){
	this.ClicktoOther(type);
}
/**
 * 步数加1
*/
this.addStepScaleBox = function(){
	this.m_zoomStep++;
	if (this.m_zoomStep>=this.m_ExtentScale.length-1){
		this.m_zoomStep = this.m_ExtentScale.length-1;
	}
	if (this.MapToolType==1){
		this.stepScaleBox(this.m_zoomStep);
	}else if (this.MapToolType==5){
		this.stepScaleBox(this.m_zoomStep);
	}
	this.m_zoomScale = this.m_ExtentScale[this.m_zoomStep];
	this.ClicktoOther(6)
}

/**
 * 步数减1
*/
this.subStepScaleBox = function(){
	this.m_zoomStep--;
	if (this.m_zoomStep<0){
		this.m_zoomStep=0;
	}
	if (this.MapToolType==1){
		this.stepScaleBox(this.m_zoomStep);
	}else if (this.MapToolType==5){
		this.stepScaleBox(this.m_zoomStep);
	}
	this.m_zoomScale = this.m_ExtentScale[this.m_zoomStep];
	this.ClicktoOther(5)
}

/**
 * 根据输入的比例因子返回步数
 * @param {int} Scale 比例因子
 * @return {int} 步数
*/
this.moveScaleBox = function(Scale){
var H = -1;
	for (var i=0;i<this.m_ExtentScale.length-1;i++){
		if ((this.m_ExtentScale[i]>Scale)&&(Scale>this.m_ExtentScale[i+1])){
			H = i;
			this.stepScaleBox(H);
			break;
		}
		
	}
return H;
}

/**
 * 根据数组返回缩放缩放标签
 * @param {int} tipleft 标示位置
 * @param {int} tiptop 返回标签 
 * @return {string}  标签层的所有标签
*/
this.CreateZoomTip = function(tipleft,tiptop){
	var h = Math.round(this.zoomBoxHeight/this.m_ExtentScale.length);
	var zoomTip='';
	var ih = tiptop;
	var newH = 0;
	for (var i=0;i<=this.m_ExtentScale.length-2;i++){
		newH = ih+i*h; 	
		zoomTip += '<div style="Z-INDEX: 1;left: '+tipleft+'px; overflow: hidden;cursor: pointer;width: 20px; position: absolute; top: '+newH +'px; height: 20px"><img src="'+this.zoomListImgTip+'" alt="缩放倍数：'+this.m_ExtentScale[i+1]+'"></div>';	
	}
return zoomTip; //ZoomBoxList.innerHTML +=zoomTip;
}

/**
 * 根据位置返回比例因子
 * @param {int} SH 滑块位置
 * @return {string} 比例因子
*/
this.zoomScale = function(SH){
	var h = this.zoomBoxHeight/(this.m_ExtentScale.length-1);
	h = Math.round(SH/h);