转:一个屏幕坐标和地图坐标转换的js代码

一个屏幕坐标和地图坐标转换的js代码

    在开发webgis的时候 在客户端 经常要处理 屏幕坐标和地图坐标的转换关系，特别是现在 web2.0时代，要求ie 交互和展现更加丰富，对坐标转换要求就更多了。因此在项目中写了个 通用的 转换 javascript代码。在实际项目 得到了较好的应用
具体代码如下 （需要prototype.js的支持）

/**/ /*
*共有三个类 
*whpoint 点
*whrect 矩形
*whcoordchange坐标转换类
*/

whpoint = Class.create();

whpoint.prototype = {
initialize:function(x,y){
this.x=x;
this.y=y;
}
} ;


whrect = Class.create();
whrect.prototype = {
initialize:function(pointmin,pointmax){
this.point1=pointmin;
this.point2=pointmax;
this.width=this.point2.x-this.point1.x;
this.height=this.point2.y-this.point1.y;

},

getwidth:function(){
return this.point2.x-this.point1.x;
},

setwidth:function(newwidth){

this.width=newwidth;
},

getheight:function(){
return this.point2.y-this.point1.y;
},

setheight:function(newheight){
this.height=newheight;
},

setpointmax:function(pointmax){
this.point2=pointmax;
},

setpointmin:function(pointmin){
this.point1=pointmin;
},

getminx:function(){

return this.point1.x;
},
getminy:function(){
return this.point1.y;
},
getmaxx:function(){

return this.point2.x
},

getmaxy:function(){

return this.point2.y;
}




} ;


whcoordchange = Class.create();

whcoordchange.prototype = {
initialize:function(screenrect,maprect){
this.screenrect=screenrect;
this.maprect=maprect;

},
getmapextent:function(screenpoint,twidth,theight){
var screenbl_x=screenpoint.x-twidth/2;
var screenbl_y=screenpoint.y+theight/2;
var tempscreenblp=new whpoint(screenbl_x,screenbl_y);
var resmapblp=this.screentomap(tempscreenblp);

var screenur_x=screenpoint.x+twidth/2;
var screenur_y=screenpoint.y-theight/2;
var tempscreenurp=new whpoint(screenur_x,screenur_y);
var resmapurp=this.screentomap(tempscreenurp);

return new whrect(resmapblp,resmapurp);
 
},

screentomap:function(screenpoint){

var resmapx=this.maprect.getminx()+ 

this.maprect.getwidth()*(screenpoint.x-this.screenrect.getminx())/this.screenrect.getwidth();
var resmapy=this.maprect.getmaxy()- 

this.maprect.getheight()*(screenpoint.y-this.screenrect.getminy())/this.screenrect.getheight();

return new whpoint(resmapx,resmapy);
},

maptoscreen:function(mappoint){
var resscreenx=this.screenrect.getminx()+ 

this.screenrect.getwidth()*(mappoint.x-this.maprect.getminx())/this.maprect.getwidth();
var resscreeny=this.screenrect.getminy()+ 

this.screenrect.getheight()*(this.maprect.getmaxy()-mappoint.y)/this.maprect.getheight();
return new whpoint(Math.ceil(resscreenx),Math.ceil(resscreeny));

}

} ;

 

//////////////////////////////////////
/////////////////////////////////

实际页面中的应用实例
  
 
   

var  scminp = new  whpoint( 10 , 10 );
     var  scmaxp = new  whpoint( 400 , 300 );
     var  screct = new  whrect(scminp,scmaxp);
    
      var  mminp = new  whpoint( 120.235 , 30.235 );
     var   mmaxp = new  whpoint( 120.265 , 30.265 );    
    
     var  mrect = new  whrect(mminp,mmaxp);
    
     // 建立 屏幕坐标和 地图坐标的对应关系 注意应该是 鹰眼的范围 对应 地图的范围
     var  mycoordchange = new  whcoordchange(screct,mrect);
    
     var  scpoint1 = new  whpoint( 10 , 300 );
     var  mapscpoint1 = mycoordchange.screentomap(scpoint1);
    
    alert(mapscpoint1.x + " ; " + mapscpoint1.y);
    
      var  mapoint1 = new  whpoint( 120.250 , 30.250 );
     var  scmapoint1 = mycoordchange.maptoscreen(mapoint1);
    
    alert(scmapoint1.x + " ; " + scmapoint1.y);
    
     // 根据屏幕坐标点 相应鹰眼redbox的 width 和 height 获取相应的 地图extent,
     var  maprect = mycoordchange.getmapextent(scmapoint1, 195 , 145 );
    
    alert (maprect.getminx() + " ; "   +  maprect.getminy() + " ; " + maprect.getmaxx() + " ; " +  maprect.getmaxy());