转:一个屏幕坐标和地图坐标转换的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());