一個螢幕座標和地圖座標轉換的js代碼

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());