A screen coordinates and map coordinates transformation of the JS code

js| Conversion

A screen coordinates and map coordinates transformation of the JS code

In the development of Webgis in the client often to deal with the screen coordinates and map coordinates of the conversion relationship, especially now web2.0 era, the requirements of IE interactive and show more rich, the transformation of the coordinate requirements more. Therefore, a generic translation JavaScript code is written in the project. In the actual project has been a good application
The specific code is as follows (requires prototype.js support)

/*
* A total of three categories
*whpoint Point
*whrect Rectangle
*whcoordchange Coordinate Conversion class
*/

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

}

};

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

Examples of applications in actual pages


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

Establish a corresponding relationship between screen coordinates and map coordinates note that the Eagle's eye range corresponds to the range of the map
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);

According to the screen coordinate point corresponding to the Eagle eye Redbox width and height to obtain the corresponding map extent,
var maprect=mycoordchange.getmapextent (scmapoint1,195,145);

Alert (Maprect.getminx () + ";" + maprect.getminy () + ";" +maprect.getmaxx () + ";" + Maprect.getmaxy ());