QuickWMS-Extension/WMSnavigation.js: Unterschied zwischen den Versionen

GISWiki - Das freie Portal für Geoinformatik (GIS)
Wechseln zu: Navigation, Suche
 
 
Zeile 1: Zeile 1:
 
<pre>
 
<pre>
 +
 +
 
/*
 
/*
 
* Project quickWMS: Generic JavaScript WMS Client  
 
* Project quickWMS: Generic JavaScript WMS Client  
Zeile 20: Zeile 22:
  
  
 
+
 
function navigationWMS(x1, y1, x2, y2) {
 
function navigationWMS(x1, y1, x2, y2) {
  this.inheritFrom =mapWMS;
+
this.inheritFrom =mapWMS;
  this.inheritFrom(x1,y1,x2,y2);
+
this.inheritFrom(x1,y1,x2,y2);
  this.hlBox=new Array(0,0,0,0);
+
this.hlBox=new Array(0,0,0,0);
 
+
  // write the html for the selection
+
// write the html for the selection
  this.writeHTML[this.writeHTML.length]= function (objRef){
+
this.writeHTML[this.writeHTML.length]= function (objRef){
    {  
+
{
      openLayer(objRef.name+"Highlight","","visibility:inherit",0, 0, objRef.width, objRef.height, true);
+
openLayer(objRef.name+"Highlight","","visibility:inherit",0, 0, objRef.width, objRef.height, true);
      //HighlightTop
+
//HighlightTop
      openLayer(objRef.name+"hlTop","","visibility:inherit",0, 0, objRef.width, objRef.height, true);
+
openLayer(objRef.name+"hlTop","","visibility:inherit",0, 0, objRef.width, objRef.height, true);
      var content="<table bgcolor='silver' border=0 style='filter:alpha(opacity=" + highLightThreshold + "); -moz-opacity:"+ (highLightThreshold/100)+";position:absolute;top:0;left:0' width=100% height=100%><tr><td></td></tr></table>"
+
var content="<table bgcolor='silver' border=0 style='filter:alpha(opacity=" + highLightThreshold + "); -moz-opacity:"+ (highLightThreshold/100)+";position:absolute;top:0;left:0' width=100% height=100%><tr><td></td></tr></table>"
      document.write(content);closeLayer();//HighlightTop
+
document.write(content);closeLayer();//HighlightTop
      //HighlightBottom
+
//HighlightBottom
      openLayer(objRef.name+"hlBottom","","visibility:inherit",0, 0, objRef.width, objRef.height, true);
+
openLayer(objRef.name+"hlBottom","","visibility:inherit",0, 0, objRef.width, objRef.height, true);
      document.write(content);closeLayer();//HighlightBottom
+
document.write(content);closeLayer();//HighlightBottom
      //HighlightRigth
+
//HighlightRigth
      openLayer(objRef.name+"hlRight","","visibility:inherit",0, 0, objRef.width, objRef.height, true);
+
openLayer(objRef.name+"hlRight","","visibility:inherit",0, 0, objRef.width, objRef.height, true);
      document.write(content);
+
document.write(content);
      closeLayer();//HighlightRight
+
closeLayer();//HighlightRight
      //HighlightLeft
+
//HighlightLeft
      openLayer(objRef.name+"hlLeft","","visibility:inherit",0, 0, objRef.width, objRef.height, true);
+
openLayer(objRef.name+"hlLeft","","visibility:inherit",0, 0, objRef.width, objRef.height, true);
      document.write(content);closeLayer();//HighlightLeft
+
document.write(content);closeLayer();//HighlightLeft
      //borderHighlight
+
//borderHighlight
      openLayer(objRef.name+"hlBorder","","border-style:solid;border-width:1;border-color:black;visibility:inherit",0, 0, objRef.width, objRef.height, true);
+
openLayer(objRef.name+"hlBorder","","border-style:solid;border-width:1;border-color:black;visibility:inherit",0, 0, objRef.width, objRef.height, true);
      var content="<table border=0 style='position:absolute;top:0;left:0' width=100% height=100%><tr><td></td></tr></table>"
+
var content="<table border=0 style='position:absolute;top:0;left:0' width=100% height=100%><tr><td></td></tr></table>"
      document.write(content);closeLayer();//borderHighlight
+
document.write(content);closeLayer();//borderHighlight
      closeLayer();//Highlight  
+
closeLayer();//Highlight
      }
+
}
    }
+
}
   
+
  this.notify= function(mapRef,eventType){
+
this.notify= function(mapRef,eventType){
    // this class only has one type of events ...
+
// this class only has one type of events ...
    // so no parsing is done on the eventType
+
// so no parsing is done on the eventType
    // future descendents can define other events
+
// future descendents can define other events
    if (mapRef.BBox) this.setHighLightXY(mapRef.BBox[0],mapRef.BBox[1],mapRef.BBox[2],mapRef.BBox[3]);
+
if (mapRef.BBox) this.setHighLightXY(mapRef.BBox[0],mapRef.BBox[1],mapRef.BBox[2],mapRef.BBox[3]);
    }
+
}
  
 
+
  // the values in geographical coords and can be null  
+
// the values in geographical coords and can be null  
  this.setHighLightXY = function (x1, y1, x2, y2){
+
this.setHighLightXY = function (x1, y1, x2, y2){
    if (areEqual(Array(x1, y1, x2, y2),this.BBox)){
+
if (areEqual(Array(x1, y1, x2, y2),this.BBox)){
      hideLayer(this.name+"Highlight");
+
hideLayer(this.name+"Highlight");
      return false
+
return false
      }
+
}
    else{
+
else{
      showLayer(this.name+"Highlight");
+
showLayer(this.name+"Highlight");
      if (x1||x1==0) {var pX1=geo2MouseX(this,x1);this.hlBox[0]=x1}  
+
if (x1||x1==0) {var pX1=geo2MouseX(this,x1);this.hlBox[0]=x1}  
      else var pX1=geo2MouseX(this,this.hlBox[0]);
+
else var pX1=geo2MouseX(this,this.hlBox[0]);
 
+
      if (y2||y2==0) {var pY1=geo2MouseY(this,y2);this.hlBox[3]=y2}
+
if (y2||y2==0) {var pY1=geo2MouseY(this,y2);this.hlBox[3]=y2}
      else var pY1=geo2MouseY(this,this.hlBox[3]);
+
else var pY1=geo2MouseY(this,this.hlBox[3]);
   
+
      if (x2||x2==0) {var pX2=geo2MouseX(this,x2);this.hlBox[2]=x2}
+
if (x2||x2==0) {var pX2=geo2MouseX(this,x2);this.hlBox[2]=x2}
      else var pX2=geo2MouseX(this,this.hlBox[2]);
+
else var pX2=geo2MouseX(this,this.hlBox[2]);
 
+
      if (y1||y1==0) {var pY2=geo2MouseY(this,y1);this.hlBox[1]=y1}
+
if (y1||y1==0) {var pY2=geo2MouseY(this,y1);this.hlBox[1]=y1}
      else {var pY2=geo2MouseY(this,this.hlBox[1]); }
+
else {var pY2=geo2MouseY(this,this.hlBox[1]); }
     
+
    // if (y1==0) alert (pY2);
+
// if (y1==0) alert (pY2);
      var ratioX=(pX2-pX1)/this.width;
+
var ratioX=(pX2-pX1)/this.width;
      var ratioY=(pY2-pY1)/this.height;
+
var ratioY=(pY2-pY1)/this.height;
      if (ratioX>ratioY) var ratio=ratioX
+
if (ratioX>ratioY) var ratio=ratioX
      else var ratio=ratioY;
+
else var ratio=ratioY;
      if (ratio>0.6 || ratio<0.1){
+
if (ratio>0.6 || ratio<0.1){
       
+
        var newX1=x1-(x2-x1)/1;//change this number if you want to change the size of the hightlighted box
+
var newX1=x1-(x2-x1)/1;//change this number if you want to change the size of the hightlighted box
        var newX2=x2+(x2-x1)/1;//a bigger number (like 2 or 3) will make it bigger
+
var newX2=x2+(x2-x1)/1;//a bigger number (like 2 or 3) will make it bigger
        var newY1=y1-(y2-y1)/1;// attention not to use   0.5
+
var newY1=y1-(y2-y1)/1;// attention not to use 0.5
        var newY2=y2+(y2-y1)/1;
+
var newY2=y2+(y2-y1)/1;
        // TODO check if the BBox is still valid  
+
// TODO check if the BBox is still valid  
  
        this.updateBBox(newX1, newY1, newX2, newY2);                  
+
this.updateBBox(newX1, newY1, newX2, newY2);
        if (areEqual(this.initBBox,this.BBox)){
+
if (areEqual(this.initBBox,this.BBox)){
            pX1=geo2MouseX(this,x1);
+
pX1=geo2MouseX(this,x1);
            pY1=geo2MouseY(this,y2);
+
pY1=geo2MouseY(this,y2);
            pX2=geo2MouseX(this,x2);
+
pX2=geo2MouseX(this,x2);
            pY2=geo2MouseY(this,y1);
+
pY2=geo2MouseY(this,y1);
            //alert("new bbox " + newX1 + ", " + newY1 + ", " + newX2  + ", "  + newY2);
+
//alert("new bbox " + newX1 + ", " + newY1 + ", " + newX2  + ", "  + newY2);
            if (areEqual(Array(x1, y1, x2, y2),this.BBox)){
+
if (areEqual(Array(x1, y1, x2, y2),this.BBox)){
              hideLayer(this.name+"Highlight");
+
hideLayer(this.name+"Highlight");
              return false
+
return false
              }
+
}
            else {refreshHighLight(this,pX1,pY1,pX2,pY2)};
+
else {refreshHighLight(this,pX1,pY1,pX2,pY2)};
            }
+
}
        else{
+
else{
            if (areEqual(this.hlBox,this.BBox)){hideLayer(this.name+"Highlight");return false}
+
if (areEqual(this.hlBox,this.BBox)){hideLayer(this.name+"Highlight");return false}
              else {this.setHighLightXY(x1, y1, x2, y2);}
+
else {this.setHighLightXY(x1, y1, x2, y2);}
            }
+
}
         
+
        }
+
}
      else{refreshHighLight(this,pX1,pY1,pX2,pY2);}
+
else{refreshHighLight(this,pX1,pY1,pX2,pY2);}
      }
+
}
     
+
  // the values in screen coords and can be null  
+
// the values in screen coords and can be null  
  this.setHighLight=function (x1, y1, x2, y2){
+
this.setHighLight=function (x1, y1, x2, y2){
    // Note: mouse coordinate Y2 is equivalent hlBox[1]  
+
// Note: mouse coordinate Y2 is equivalent hlBox[1]  
    // (because screen coordinates have an inverse Y-axis
+
// (because screen coordinates have an inverse Y-axis
  
    // first check if the coordinates are correct
+
// first check if the coordinates are correct
    var tmp;
+
var tmp;
    if (x1>x2){tmp=x1;x1=x2;x2=tmp}
+
if (x1>x2){tmp=x1;x1=x2;x2=tmp}
    if (y1>y2){tmp=y1;y1=y2;y2=tmp}
+
if (y1>y2){tmp=y1;y1=y2;y2=tmp}
  
    if (x1) {var pX1=x1;this.hlBox[0]=mouse2GeoX(this,x1)}  
+
if (x1) {var pX1=x1;this.hlBox[0]=mouse2GeoX(this,x1)}  
    else var pX1=geo2MouseX(this,this.hlBox[0]);
+
else var pX1=geo2MouseX(this,this.hlBox[0]);
 
+
    if (y1) {var pY1=y1;this.hlBox[3]=mouse2GeoY(this,y1)}
+
if (y1) {var pY1=y1;this.hlBox[3]=mouse2GeoY(this,y1)}
    else var pY1=geo2MouseY(this,this.hlBox[3]);
+
else var pY1=geo2MouseY(this,this.hlBox[3]);
 
+
    if (x2) {var pX2=x2;this.hlBox[2]=mouse2GeoX(this,x2)}
+
if (x2) {var pX2=x2;this.hlBox[2]=mouse2GeoX(this,x2)}
    else var pX2=geo2MouseX(this,this.hlBox[2]);
+
else var pX2=geo2MouseX(this,this.hlBox[2]);
 
+
    if (y2) {var pY2=y2;this.hlBox[1]=mouse2GeoY(this,y2)}
+
if (y2) {var pY2=y2;this.hlBox[1]=mouse2GeoY(this,y2)}
    else var pY2=geo2MouseY(this,this.hlBox[1]);
+
else var pY2=geo2MouseY(this,this.hlBox[1]);
 
+
    // refreshHighLight excepts the values in pixels (screen coordiantes)
+
// refreshHighLight excepts the values in pixels (screen coordiantes)
    refreshHighLight(this,pX1,pY1,pX2,pY2)
+
refreshHighLight(this,pX1,pY1,pX2,pY2)
    }
+
}
             
+
     
+
  }
+
}
  
 
}
 
}
Zeile 150: Zeile 152:
 
function refreshHighLight(mapRef,x1,y1,x2,y2)
 
function refreshHighLight(mapRef,x1,y1,x2,y2)
 
{
 
{
  if (x2<(x1+5)) x2=x1+10;
+
if (x2<(x1+5)) x2=x1+10;
  if (y2<(y1+5)) y2=y1+10;
+
if (y2<(y1+5)) y2=y1+10;
  setLayerPos(mapRef.name+"hlTop",x1,0,x2-x1,y1);
+
setLayerPos(mapRef.name+"hlTop",x1,0,x2-x1,y1);
  setLayerPos(mapRef.name+"hlBottom",x1,y2,x2-x1,mapRef.height-y2);
+
setLayerPos(mapRef.name+"hlBottom",x1,y2,x2-x1,mapRef.height-y2);
  setLayerPos(mapRef.name+"hlLeft",0,0,x1,mapRef.height);  
+
setLayerPos(mapRef.name+"hlLeft",0,0,x1,mapRef.height);
  setLayerPos(mapRef.name+"hlRight",x2,0,mapRef.width-x2,mapRef.height);  
+
setLayerPos(mapRef.name+"hlRight",x2,0,mapRef.width-x2,mapRef.height);
  //if (browser.isNS7)setLayerPos(mapRef.name+"hlBorder",x1,y1,x2-x1-2,y2-y1-2)
+
//if (browser.isNS7)setLayerPos(mapRef.name+"hlBorder",x1,y1,x2-x1-2,y2-y1-2)
  //else  
+
//else  
  setLayerPos(mapRef.name+"hlBorder",x1,y1,x2-x1-2,y2-y1-2)
+
setLayerPos(mapRef.name+"hlBorder",x1,y1,x2-x1-2,y2-y1-2)
 
}
 
}
 +
 
</pre>
 
</pre>

Aktuelle Version vom 19. August 2005, 21:13 Uhr



/*
* Project quickWMS: Generic JavaScript WMS Client 
* File : WMSnavigation.js
* Author : Pedro Pereira Gonçalves
* email : pedro.goncalves@esa.int or pedro@inovagis.org
* Version : 0.2
* Description: Defines a descendent of mapWMS that draws a highlight box over 
*                    a defined geographical region. It can be linked to another mapWMS 
*                    so that automatically updates the highlighted box for the visible region
*                    Please read coderules.txt before making any change
* Last Change : 2003-11-18
* Dependencies : WMSlayer.js, WMSmap.js, WMSbrowsers.js
* Future Developments : 
* License : OpenSource  (check license.txt in the same directory)
* History :
    2003-11-18 : Code documentation added
    2003-03-20 : File Created
*/


	
function navigationWMS(x1, y1, x2, y2) {
	this.inheritFrom =mapWMS;
	this.inheritFrom(x1,y1,x2,y2);	
	this.hlBox=new Array(0,0,0,0);
	
	// write the html for the selection
	this.writeHTML[this.writeHTML.length]= function (objRef){
		{		
			openLayer(objRef.name+"Highlight","","visibility:inherit",0, 0, objRef.width, objRef.height, true);
			//HighlightTop
			openLayer(objRef.name+"hlTop","","visibility:inherit",0, 0, objRef.width, objRef.height, true);
			var content="<table bgcolor='silver' border=0 style='filter:alpha(opacity=" + highLightThreshold + "); -moz-opacity:"+ (highLightThreshold/100)+";position:absolute;top:0;left:0' width=100% height=100%><tr><td></td></tr></table>"
			document.write(content);closeLayer();//HighlightTop
			//HighlightBottom
			openLayer(objRef.name+"hlBottom","","visibility:inherit",0, 0, objRef.width, objRef.height, true);	
			document.write(content);closeLayer();//HighlightBottom
			//HighlightRigth
			openLayer(objRef.name+"hlRight","","visibility:inherit",0, 0, objRef.width, objRef.height, true);	
			document.write(content);
			closeLayer();//HighlightRight
			//HighlightLeft
			openLayer(objRef.name+"hlLeft","","visibility:inherit",0, 0, objRef.width, objRef.height, true);
			document.write(content);closeLayer();//HighlightLeft
			//borderHighlight
			openLayer(objRef.name+"hlBorder","","border-style:solid;border-width:1;border-color:black;visibility:inherit",0, 0, objRef.width, objRef.height, true);
			var content="<table border=0 style='position:absolute;top:0;left:0' width=100% height=100%><tr><td></td></tr></table>"
			document.write(content);closeLayer();//borderHighlight
			closeLayer();//Highlight		
			}
		}
		
	this.notify= function(mapRef,eventType){
		// this class only has one type of events ...
		// so no parsing is done on the eventType
		// future descendents can define other events
		if (mapRef.BBox) this.setHighLightXY(mapRef.BBox[0],mapRef.BBox[1],mapRef.BBox[2],mapRef.BBox[3]);
		}

	
	// the values in geographical coords and can be null 
	this.setHighLightXY = function (x1, y1, x2, y2){
		if (areEqual(Array(x1, y1, x2, y2),this.BBox)){	
			hideLayer(this.name+"Highlight");
			return false
			}
		else{	
			showLayer(this.name+"Highlight");
			if (x1||x1==0)	{var pX1=geo2MouseX(this,x1);this.hlBox[0]=x1} 
			else var pX1=geo2MouseX(this,this.hlBox[0]);
	
			if (y2||y2==0)	{var pY1=geo2MouseY(this,y2);this.hlBox[3]=y2}
			else var pY1=geo2MouseY(this,this.hlBox[3]);
		
			if (x2||x2==0)	{var pX2=geo2MouseX(this,x2);this.hlBox[2]=x2}
			else var pX2=geo2MouseX(this,this.hlBox[2]);
	
			if (y1||y1==0)	{var pY2=geo2MouseY(this,y1);this.hlBox[1]=y1}
			else {var pY2=geo2MouseY(this,this.hlBox[1]);	}
			
		//	if (y1==0) alert (pY2);
			var ratioX=(pX2-pX1)/this.width;
			var ratioY=(pY2-pY1)/this.height;
			if (ratioX>ratioY) var ratio=ratioX
			else	var ratio=ratioY;
			if (ratio>0.6 || ratio<0.1){
				
				var newX1=x1-(x2-x1)/1;//change this number if you want to change the size of the hightlighted box
				var newX2=x2+(x2-x1)/1;//a bigger number (like 2 or 3) will make it bigger
				var newY1=y1-(y2-y1)/1;// attention not to use 	0.5
				var newY2=y2+(y2-y1)/1;
				// TODO check if the BBox is still valid 

				this.updateBBox(newX1, newY1, newX2, newY2);										
				if (areEqual(this.initBBox,this.BBox)){
						pX1=geo2MouseX(this,x1);
						pY1=geo2MouseY(this,y2);
						pX2=geo2MouseX(this,x2);
						pY2=geo2MouseY(this,y1);
						//alert("new bbox " + newX1 + ", " + newY1 + ", " + newX2  + ", "  + newY2);
						if (areEqual(Array(x1, y1, x2, y2),this.BBox)){	
							hideLayer(this.name+"Highlight");
							return false
							}
						else {refreshHighLight(this,pX1,pY1,pX2,pY2)};
						}
				else{
						if (areEqual(this.hlBox,this.BBox)){hideLayer(this.name+"Highlight");return false}
							else {this.setHighLightXY(x1, y1, x2, y2);}
						}
					
				}
			else{refreshHighLight(this,pX1,pY1,pX2,pY2);}
			}
			
	// the values in screen coords and can be null 
	this.setHighLight=function (x1, y1, x2, y2){	
		// Note: mouse coordinate Y2 is equivalent hlBox[1] 
		// (because screen coordinates have an inverse Y-axis

		// first check if the coordinates are correct
		var tmp;
		if (x1>x2){tmp=x1;x1=x2;x2=tmp}
		if (y1>y2){tmp=y1;y1=y2;y2=tmp}

		if (x1)	{var pX1=x1;this.hlBox[0]=mouse2GeoX(this,x1)} 
		else var pX1=geo2MouseX(this,this.hlBox[0]);
	
		if (y1)	{var pY1=y1;this.hlBox[3]=mouse2GeoY(this,y1)}
		else var pY1=geo2MouseY(this,this.hlBox[3]);
	
		if (x2)	{var pX2=x2;this.hlBox[2]=mouse2GeoX(this,x2)}
		else var pX2=geo2MouseX(this,this.hlBox[2]);
	
		if (y2)	{var pY2=y2;this.hlBox[1]=mouse2GeoY(this,y2)}
		else var pY2=geo2MouseY(this,this.hlBox[1]);
	
		// refreshHighLight excepts the values in pixels (screen coordiantes)
		refreshHighLight(this,pX1,pY1,pX2,pY2)	
		}
							
			
	}

}

// general private function
// in screen coordinates 
function refreshHighLight(mapRef,x1,y1,x2,y2)
{
	if (x2<(x1+5)) x2=x1+10;
	if (y2<(y1+5)) y2=y1+10;	
	setLayerPos(mapRef.name+"hlTop",x1,0,x2-x1,y1);
	setLayerPos(mapRef.name+"hlBottom",x1,y2,x2-x1,mapRef.height-y2);	
	setLayerPos(mapRef.name+"hlLeft",0,0,x1,mapRef.height);		
	setLayerPos(mapRef.name+"hlRight",x2,0,mapRef.width-x2,mapRef.height);		
	//if (browser.isNS7)setLayerPos(mapRef.name+"hlBorder",x1,y1,x2-x1-2,y2-y1-2)
	//else 
	setLayerPos(mapRef.name+"hlBorder",x1,y1,x2-x1-2,y2-y1-2)
}