smisoverviewcontrol.js

使用ASP.NET 2.0 (c#) 实现的gis 的地图系统

//////		    Last Update @ 2006-05-29			    //////
//////		    Version: 5.2.0.27731	    		    //////
//////////////////////////////////////////////////////////////
//////   SuperMap IS OverviewControl Client JavaScript  //////
//////   For IE/Firefox/Netscape/Opera Browsers         //////
//////////////////////////////////////////////////////////////

// (注意:务必在中文注释后面加一个半角空格' '或者斜线'/') / 

function SMISGetEvent(event)
{
    if(!event){return window.event;}
    return event;
}

function SMISGetOverviewControl(overviewID)
{
	return document.getElementById(overviewID);
}

function SMISGetOverviewImage(overviewID)
{
	return document.getElementById(overviewID +"_Image");
}

function SMISGetOverviewLayer(overviewID)
{
	return document.getElementById(overviewID +"_Layer");
}

function SMISGetOverviewIndexBox(overviewID)
{
	return document.getElementById(overviewID +"_IndexBox");
}

function SMISGetOverviewIndexWidth(overviewID)
{
	return SMISGetNumFromPixel(document.getElementById(overviewID +"_IndexWidth").value);
}

function SMISGetOverviewIndexHeight(overviewID)
{
	return SMISGetNumFromPixel(document.getElementById(overviewID +"_IndexHeight").value);
}

function SMISGetOverviewIndexLeft(overviewID)
{
	return SMISGetNumFromPixel(document.getElementById(overviewID +"_IndexLeft").value);
}

function SMISGetOverviewIndexTop(overviewID)
{
	return SMISGetNumFromPixel(document.getElementById(overviewID +"_IndexTop").value);
}

function SMISGetOverviewIndexCenter(overviewID)
{
	var x = SMISGetOverviewIndexLeft(overviewID) + SMISGetOverviewIndexWidth(overviewID) / 2;
	var y = SMISGetOverviewIndexTop(overviewID) + SMISGetOverviewIndexHeight(overviewID) / 2;
	return new SMISPoint(x,y);
}

function SMISGetOverviewActionField(overviewID)
{
	return document.getElementById(overviewID +"_Action");
}

function SMISGetOverviewOffsetXField(overviewID)
{
	return document.getElementById(overviewID +"_OffsetX");
}

function SMISGetOverviewOffsetYField(overviewID)
{
	return document.getElementById(overviewID +"_OffsetY");
}

function SMISOverviewTrackStart(overviewID,action)
{
	// 获取控件的绝对坐标 --- (注意:务必在中文注释后面加一个半角空格' '或者斜线'/') 
	var overviewControl = SMISGetOverviewControl(overviewID);
	if(!overviewControl){return;}
	
	overviewControl.OffsetPosition = SMISGetOffsetPosition(overviewControl);
	if(overviewControl.style.position != "absolute"){
	    overviewControl.style.position = "relative";
	    overviewControl.OffsetPosition = new SMISPoint(0,0);
	}
	overviewControl.AbsolutePosition = SMISGetAbsolutePosition(overviewControl);

	var overviewLayer = SMISGetOverviewLayer(overviewID);
	if(!overviewLayer){return;}
	SMISOverviewLayerTrackStop(overviewLayer);

	overviewLayer.style.position = "relative";
	overviewLayer.style.left = "0px";
	overviewLayer.style.top = "0px";

	overviewLayer.OverviewID = overviewID;
	overviewLayer.IndexBox = SMISGetOverviewIndexBox(overviewID);
	overviewLayer.IndexCenter = SMISGetOverviewIndexCenter(overviewID);
	overviewLayer.IndexWidth = SMISGetOverviewIndexWidth(overviewID);
	overviewLayer.IndexHeight = SMISGetOverviewIndexHeight(overviewID);
	overviewLayer.Image = SMISGetOverviewImage(overviewID);
	overviewLayer.OffsetXField = SMISGetOverviewOffsetXField(overviewID);
	overviewLayer.OffsetYField = SMISGetOverviewOffsetYField(overviewID);
	overviewLayer.ActionField = SMISGetOverviewActionField(overviewID);
	overviewLayer.Action = action;
	overviewLayer.bMouseDown = false;
	overviewLayer.onmouseover = SMISOverviewOnMouseOver;
	overviewLayer.onmousemove = SMISOverviewOnMouseMove;
	overviewLayer.onmousedown = SMISOverviewOnMouseDown;
	overviewLayer.onmouseup = SMISOverviewOnMouseUp;
	var overviewIndexBox = overviewLayer.IndexBox;
	overviewIndexBox.OverviewControl = overviewControl;
	
	//Set IndexBox
	var imageWidth,imageHeight,left,top,width,height;
	imageWidth = SMISGetNumFromPixel(overviewLayer.Image.width);
	imageHeight = SMISGetNumFromPixel(overviewLayer.Image.height);
	if(!overviewIndexBox.origin){
		left = SMISGetOverviewIndexLeft(overviewID);
		top = SMISGetOverviewIndexTop(overviewID);
		overviewIndexBox.origin = new SMISPoint(left,top);
	}
	else{
		left = overviewIndexBox.origin.x;
		top  = overviewIndexBox.origin.y;
	}
    width = overviewLayer.IndexWidth;
    height = overviewLayer.IndexHeight;
	SMISOverviewDrawingIndexBox(imageWidth, imageHeight, left, top, width, height, overviewIndexBox);
}

function SMISOverviewLayerTrackStop(overviewLayer)
{
	if(!overviewLayer){return;}
	overviewLayer.onmousemove = null;
	overviewLayer.onmousedown = null;
	overviewLayer.onmouseup = null;
	overviewLayer.onmouseover = null;
}

function GetMouseOverviewRelativePosition(event,overviewLayer)
{
    var position = new SMISPoint(0,0);
    if(event.offsetX != null && overviewLayer.id==event.srcElement.id){
        position.x = event.offsetX;
        position.y = event.offsetY;
    }
    else if(event.layerX != null && overviewLayer.id==event.target.id){
        position.x = event.layerX;
        position.y = event.layerY;
    }
    else{
        var overviewControl = SMISGetOverviewControl(overviewLayer.OverviewID);
        var absPosition = overviewControl.AbsolutePosition;
        overviewControl = null;
        position.x=event.clientX-absPosition.x;
        position.y=event.clientY-absPosition.y;
        absPosition = null;
        var scrollLeft = 0, scrollTop = 0;
        if(document.documentElement){
            scrollLeft = parseInt(document.documentElement.scrollLeft);
            scrollTop = parseInt(document.documentElement.scrollTop);
        }    
        else if(document.body){
            scrollLeft = parseInt(document.body.scrollLeft);
            scrollTop = parseInt(document.body.scrollTop);
        }
        position.x += scrollLeft;
        position.y += scrollTop;
    }
    return position;
}

function SMISOverviewOnMouseOver(event)
{
//	SetOverviewOffsetPosition(event.srcElement.OverviewID);
}

function SMISOverviewOnMouseDown(event)
{ 
    event=SMISGetEvent(event);
	var imageWidth,imageHeight,left,top,width,height;
	imageWidth = SMISGetNumFromPixel(this.Image.width);
	imageHeight = SMISGetNumFromPixel(this.Image.height);
	width = this.IndexWidth;
	height = this.IndexHeight;
	var overviewMousePos = GetMouseOverviewRelativePosition(event,this);
	left = overviewMousePos.x - width/2;
	top = overviewMousePos.y - height/2;
	SMISOverviewDrawingIndexBox(imageWidth, imageHeight, left, top, width, height, this.IndexBox);
	this.bMouseDown = true;
	return false;
}

function SMISOverviewOnMouseMove(event)
{
    event=SMISGetEvent(event);
    if(!this.bMouseDown){return false;}
    var imageWidth,imageHeight,left,top,width,height;
    imageWidth = SMISGetNumFromPixel(this.Image.width);
    imageHeight = SMISGetNumFromPixel(this.Image.height);
    width = this.IndexWidth;
    height = this.IndexHeight;
    var overviewMousePos = GetMouseOverviewRelativePosition(event,this);
    left = overviewMousePos.x - width/2;
    top = overviewMousePos.y - height/2;
    SMISOverviewDrawingIndexBox(imageWidth, imageHeight, left, top, width, height, this.IndexBox);
    return false;
}

function SMISOverviewOnMouseUp(event)
{
    event=SMISGetEvent(event);
	var overviewMousePos = GetMouseOverviewRelativePosition(event,this);
	this.OffsetXField.value = overviewMousePos.x - this.IndexCenter.x;
	this.OffsetYField.value = overviewMousePos.y - this.IndexCenter.y;
	this.ActionField.value = this.Action;
	this.bMouseDown = false;
	this.DoPostBack();
	return false;
}


function SMISOverviewDrawingIndexBox(overviewImageWidth, overviewImageHeight, left, top, width, height, overviewIndexBox)
{
	var __DEBUG = false;
	if(__DEBUG){
		window.status = (overviewImageWidth +","+ overviewImageHeight +";"+ left +"," + top +","+ width +","+ height );
	}
	try{
		// 索引框的右下角超出了鹰眼的上边界或左边界 //
		if(((left + width) < 0) || ((top + height) < 0)){
			overviewIndexBox.style.left = "0px";
			overviewIndexBox.style.top = "0px";
			overviewIndexBox.style.width = "0px";
			overviewIndexBox.style.height = "0px";
			return;
		}
		// 索引框的左上角超出了鹰眼的右边界或下边界 //
		if((left > overviewImageWidth) || (top > overviewImageHeight)){
			overviewIndexBox.style.left = overviewImageWidth+"px";
			overviewIndexBox.style.top = overviewImageHeight+"px";
			overviewIndexBox.style.width = "0px";
			overviewIndexBox.style.height = "0px";
			return;
		}
		// x方向 //
		if(left < 0){
			overviewIndexBox.style.left = "0px";
			if((width + left) > overviewImageWidth){			
				overviewIndexBox.style.width = overviewImageWidth+"px";
			}
			else{
				overviewIndexBox.style.width = (width + left)+"px";
			}
		}
		else{
			overviewIndexBox.style.left = left+"px";
			if((width + left) > overviewImageWidth)
				overviewIndexBox.style.width = (overviewImageWidth - left)+"px";
			else
				overviewIndexBox.style.width = width+"px";		
		}
		// y方向 //
		if(top < 0){
			overviewIndexBox.style.top = "0px";
			if((height + top) > overviewImageHeight)
				overviewIndexBox.style.height = overviewImageHeight+"px";
			else
				overviewIndexBox.style.height = (height + top)+"px";
		}
		else{
			overviewIndexBox.style.top = top+"px";
			if((height + top) > overviewImageHeight)
				overviewIndexBox.style.height = (overviewImageHeight - top)+"px";
			else
				overviewIndexBox.style.height = height+"px";		
		}
		
		// 设置偏移量 //
		overviewIndexBox.style.left = (SMISGetNumFromPixel(overviewIndexBox.style.left) + eval(overviewIndexBox.OverviewControl.OffsetPosition.x))+"px";
		overviewIndexBox.style.top =  (SMISGetNumFromPixel(overviewIndexBox.style.top) + eval(overviewIndexBox.OverviewControl.OffsetPosition.y))+"px";

        if(__DEBUG){window.status += "; overviewIndexBox:" + overviewIndexBox.style.left + "," + overviewIndexBox.style.top;}
		overviewIndexBox.style.visibility = 'visible';
	}
	catch(e){ 
		alert(e); 
	}
}

/** 
 *  当页面采用相对定位时，浏览器窗口的缩放会导致 OverviewControl 的绝对位置发生变化从而导致索引框位置错误。
 *  为解决这个问题，建议 body.onresize 事件被触发时调用该函数。 例如：
 *  修改页面的 <body> 元素，往其中加入 <body onresize="SMISOverviewSetPosition('OverviewControl1')">
 *  对 MapControl 也要做类似的处理：
 *  <body onresize="SMISMapSetPosition('MapControl1'); SMISOverviewSetPosition('OverviewControl1')">
**/
function SMISOverviewSetPosition(overviewID)
{
	var overviewControl = SMISGetOverviewControl(overviewID);
	if(!overviewControl){return;}
	
	overviewControl.OffsetPosition = SMISGetOffsetPosition(overviewControl);
	if(overviewControl.style.position != "absolute"){
	    overviewControl.style.position = "relative";
	    overviewControl.OffsetPosition = new SMISPoint(0,0);
	}
	var overviewLayer = SMISGetOverviewLayer(overviewID);
	if(!overviewLayer){return;}

	var overviewIndexBox = overviewLayer.IndexBox;
	overviewIndexBox.OverviewControl = overviewControl;
	//Set IndexBox
	var imageWidth,imageHeight,left,top,width,height;
	imageWidth = SMISGetNumFromPixel(overviewLayer.Image.width);
	imageHeight = SMISGetNumFromPixel(overviewLayer.Image.height);
	if(!overviewIndexBox.origin){
		left = SMISGetNumFromPixel(overviewIndexBox.style.left);
		top = SMISGetNumFromPixel(overviewIndexBox.style.top);
		overviewIndexBox.origin = new SMISPoint(left,top);
	}
	else{
		left = overviewIndexBox.origin.x;
		top  = overviewIndexBox.origin.y;
	}
    width = overviewLayer.IndexWidth;
    height = overviewLayer.IndexHeight;
	SMISOverviewDrawingIndexBox(imageWidth, imageHeight, left, top, width, height, overviewIndexBox);
}