[Turn] Baidu Map API detailed map coordinate system

Blog Original address: http://www.jiazhengblog.com/blog/2011/07/02/289/

We all know that the earth is round, the computer monitor is flat, in order to let the shape of the spherical surface display on the plane of the display will necessarily need a conversion process, this process is called projection (Projection). On the earth we use latitude and longitude to describe a location, and after the projection of the map has its own coordinate system, this article will be in detail in the Baidu Map API involved in the various coordinate systems.

In the Baidu Map API, you need to know the following coordinate system:

• Latitude: A location on the earth that is described by longitude (longitude) and latitude (latitude).

• Planar coordinates: the coordinates after the projection (described by x and y), used to identify a position on a plane.

• Pixel coordinates: Describes the location of a point on a map at different levels.

• Tile coordinates: The map tile number (described by x and y).

• Visual area coordinates: The coordinate system of the map's viewable area (described by x and y).

• Covering coordinates: the coordinates of the covering relative to the container (described by x and y).

Do not be frightened by so many coordinate systems, after reading the following explanations believe you will gradually understand them.

Warp latitude

This is not much to say, unfamiliar can be turned over the geographical book. However, it is important to note that even latitude and longitude coordinates may belong to different coordinate systems. The latitude and longitude obtained by general GPS equipment belong to the WGS84 coordinate system, which is a general coordinate. For some reasons domestic cannot directly use WGS84 coordinates, so the latitude and longitude of Baidu Map API is encrypted offset.

Planar coordinates

As mentioned earlier, a shape on a sphere needs to be projected to be transformed into a shape on a plane, and a planar coordinate system is required to describe a location on the map. The Baidu Map API uses the Mercator projection (Mercator Projection) by default, and it is also important to note that due to the different projection parameters, the Mercator projection will vary.

The origin of the planar coordinate system coincides with the origin of the latitude and longitude, that is, where the equator intersects the 0-degree meridian:

In the Baidu Map API, the plane coordinates are based on the maximum level 18 level. This means that at level 18, a unit of planar coordinates represents 1 pixels on the screen. The plane coordinates are not related to the level shown by the map, that is to say, at level 1 and 18, the plane coordinates of the Tiananmen Square are consistent. So how do you know the plane coordinates of a location? This can be done through the Bmap.mercatorprojection class, which provides a way to convert between latitude and longitude and plane coordinates. For example, the latitude and longitude of Tiananmen Square is about 116.404, 39.915, the plane coordinates can be obtained by conversion:

var projection =new  bmap.mercatorprojection (); var point = Projection.lnglattopoint (new bmap.point (116.40439.915+ "  "+ point.y);

The results are as follows:

This is the plane coordinate. You can understand what it means: At the 18th level, the location difference between Tiananmen Square and the origin of coordinates is: 12958175, 4825923.77, in pixels.

Pixel coordinates

At the 18th level, we get the pixel coordinates by rounding the plane coordinates down directly, and at other levels we can convert it by the following formula (rounding down is rounded down):

2 Zoom-|

For example, after calculation, the pixel coordinates at the 4th-level Cheonan location are: 790, 294

At different levels, the pixel coordinates of the same geographic location are not the same, and it is related to the level of the current map.

Tile coordinates

Baidu Map API in the display map is the entire map image is cut into a number of tiles to display, local map initialization or map level, the location of the center point changes, the map API will be based on the current pixel coordinates to calculate the desired tile coordinates (also called block number), so that the corresponding tile to display the map.

Baidu Map block coordinates the original point and the plane coordinates, from the origin point to the right of the beginning numbered 0, 0:

How do I know the tile coordinates of a location? It is calculated by the following formula (rounded down):

|

256 is actually the width and height of each tile, and we divide the pixel coordinates by this number to know the coordinates of the tile. Also take Tiananmen as an example, at the 4th level, Tiananmen Square is located in the tile number: 3, 1, and at the 18th level, the tile number is: 50617, 18851

Visual area coordinates

The map is displayed in a rectangular box of a certain size, which is usually a container element that the developer has passed in to initialize the map. The rectangle also has its own coordinate system, which is called the visual area coordinate system in the Baidu Map API, and its origin is in the upper-left corner of the rectangle.

The Pointtopixel and Pixeltopoint methods of map class can transform the coordinates of latitude and longitude and visual area.

Covering coordinates

The overlay is implemented as a number of DOM elements that are placed in a number of overlay containers (refer to the Map API Development Guide for details), so the coordinates of the overlay are actually the coordinates relative to these covering containers. After the map is initialized, the upper-left corner of the overlay container is the same as the upper-left corner of the visible area of the map, and once the map has been moved and scaled, the overlay container position changes. The API provides latitude and longitude information when customizing the overlay, and the developer needs to convert the latitude and longitude to the pixel coordinates of the overlay so that the overlay can be displayed in the correct position. This conversion process can be achieved via the map's Pointtooverlaypixel and Overlaypixeltopoint two methods.  

So much is going to get dizzy, we end up with a complete code example to review the concept of the coordinate system mentioned above:

<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"/><title>Map Coordinate concepts</title><Scriptsrc= "http://api.map.baidu.com/api?v=1.2"></Script></Head><Body><DivID= "Map_container"style= "width:500px;height:320px;"></Div><Script>varMap=NewBmap.map ('Map_container', {defaultcursor:'default'}); Map.centerandzoom (NewBmap.point (116.404, 39.915),  One);vartile_size= the; Map.addeventlistener ('Click', function(e) {varInfo=NewBmap.infowindow ("', {width:260});varprojection= This. Getmaptype (). getprojection ();varLnglat=E.point;varLnglatstr="latitude and Longitude:"+LNGLAT.LNG+", "+Lnglat.lat;varworldcoordinate=Projection.lnglattopoint (Lnglat);varWorldcoordstr="<br/> Plane coordinates:"+worldcoordinate.x+", "+worldcoordinate.y;varpixelcoordinate=NewBmap.pixel (Math.floor (worldcoordinate.x*Math.pow (2,  This. Getzoom ()- -)), Math.floor (Worldcoordinate.y*Math.pow (2,  This. Getzoom ()- -)));varPixelcoordstr="<br/> Pixel coordinates:"+pixelcoordinate.x+", "+pixelcoordinate.y;vartilecoordinate=NewBmap.pixel (Math.floor (pixelcoordinate.x/),Math.floor (Pixelcoordinate.y/));varTilecoordstr="<br/> Tile Coordinates:"+tilecoordinate.x+", "+tilecoordinate.y;varviewportcoordinate=Map.pointtopixel (Lnglat);varViewportcoordstr="<br/> Visual area coordinates:"+viewportcoordinate.x+", "+viewportcoordinate.y;varoverlaycoordinate=Map.pointtooverlaypixel (Lnglat);varOverlaycoordstr="<br/> Cover Coordinates:"+overlaycoordinate.x+", "+overlaycoordinate.y;info.setcontent (Lnglatstr+Worldcoordstr+Pixelcoordstr+Tilecoordstr+Viewportcoordstr+overlaycoordstr); Map.openinfowindow (info, Lnglat);});</Script></Body></HTML>

Effect

Citation Link: Baidu Map API detailed map coordinate system

[Turn] Baidu Map API detailed map coordinate system