Baidu map API details-map coordinate system

We all know that the Earth is circular and the computer monitor is flat. A conversion process is required to display the shape of the sphere on a flat display. This process is calledProjection(Projection ). On the earth, we use latitude and longitude to describe a location. After projection, the map also has its own coordinate system, this article will introduce in detail the various coordinate systems involved in Baidu map API.

In Baidu map API, you need to understand the following coordinate system:

• Longitude and latitude: a location on the earth described by longitude and latitude.

• Plane coordinate: coordinates after projection (described by X and Y), used to identify a position on the plane.

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

• Coordinate of a block: the number of a map block (described by X and Y ).

• Visible region coordinate: Coordinate System of the visible area of the map (described by X and Y ).

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

Don't be scared by so many coordinate systems. After reading the subsequent explanations, I believe you will gradually understand them.

 

Longitude and latitude

This is not much to say. unfamiliar ones can turn over the geography book. However, it should be noted that even the longitude and latitude coordinates may belong to different coordinate systems. Generally, the longitude and latitude obtained by GPS devices belong to the WGS84 coordinate system, which is a common coordinate system. For some reason, WGS84 coordinates cannot be directly used in China. Therefore, the longitude and latitude of Baidu map API are encrypted and offset.

 

Plane coordinate

As mentioned above, the shape on the sphere needs to be projected to be transformed into the shape on the plane. After the transformation, a plane coordinate system is required to describe a location on the map. Baidu map API uses Mercator projection by default. It is also important to note that the projection parameters are different.

The origin of the plane coordinate system is the same as that of the longitude and latitude, that is, the position where the Equator and the zero-degree longitude Line Intersect:

In Baidu map API, plane coordinates are based on a maximum of 18 levels. That is to say, at 18 levels, a unit of plane coordinates represents one pixel on the screen. The plane coordinate has nothing to do with the level displayed by the map. That is to say, the plane coordinates at Tiananmen are consistent at level 1 and 18. So how do we know the plane coordinates at a certain position? You can use the bmap. mercatorprojection class to convert the longitude and latitude coordinates and the plane coordinates. For example, the longitude and latitude of Tiananmen are about 116.404 and 39.915. After conversion, the plane coordinates are obtained:

VaR projection = new bmap. mercatorprojection ();
VaR point = projection. lnglattopoint (New bmap. Point (116.404, 39.915 ));
Alert (point. x + "," + point. y );

The result is as follows:

This is the plane coordinate. In this way, you can understand the meaning of this: In the second level, the difference between Tiananmen Square and the coordinate origin is 18th 5923.77, in pixels.

 

Pixel coordinates

At the level of 18th, we get the pixel coordinates by directly rounding down the plane coordinates. At other levels, we can use the following formula for conversion (Here we take the integer as the downward integer ):

Pixel coordinate = | plane coordinate X 2 zoom-18 |

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

At different levels, the pixel coordinates of the same geographic location are different, which are related to the current map level.

 

Block coordinates

When displaying a map, Baidu map API cut the entire map image into several blocks for display. When the map is initialized or the map level and central point position change, the map API calculates the required block coordinates (also called the block number) in the field of view based on the current pixel coordinates, and loads the corresponding block to display the map.

The coordinate origin of the graph block of Baidu map is the same as that of the plane. It ranges from the origin to the top right and ranges from 0 to 0:

How do I know the coordinates of a graph block at a certain position? You can use the following formula (here is the rounded down ):

Plot coordinate = | pixel coordinate limit 256 |

256 is actually the width and height of each graph block. We will know the coordinate of the graph block by dividing the pixel coordinate by this number. Taking Tiananmen Square as an example, the block numbers of Tiananmen Square are 3 and 1 at the lower level of 4th. in the lower level of 18th, the block number is 50617,188 51.

 

Visible Region coordinates

A map is displayed in a rectangle with a fixed size. This rectangle is usually a container element imported by the developer during map initialization. This rectangle also has its own coordinate system, which is called the visible regional Coordinate System in Baidu map API. Its origin is located in the upper left corner of the rectangle.

The pointtopixel and pixeltopoint methods of the map class can convert the coordinates of longitude and latitude and visible regions.

 

Covering coordinates

A covering is implemented by several DOM elements, which are placed in several covering containers (for details, see the map API Development Guide ), then, the coordinates of the covering are actually the coordinates relative to these covering containers. After the map Initialization is complete, the upper left corner of the covering container is the same as the upper left corner of the visible area of the map. Once the map is moved or scaled, the position of the covering container changes. The API provides latitude and longitude information when customizing the covering. developers need to convert the latitude and longitude to the pixel coordinates of the covering to display the covering at the correct position. This conversion process can be achieved through map pointtooverlaypixel and overlaypixeltopoint methods. 

So much will be lost. Finally, we will review the above mentioned concept of coordinate system through a complete code example:

 

<! Doctype HTML>
<HTML>
<Head>
<Meta charset = "UTF-8"/>
<Title> concept of map coordinates </title>
<SCRIPT src = "http://api.map.baidu.com/api? V = 1.2 "> </SCRIPT>
</Head>
<Body>
<Div id = "map_container" style = "width: 500px; Height: 320px;"> </div>
<SCRIPT>
VaR map = new bmap. Map ('map _ iner ', {defacurcursor: 'default '});
Map. centerandzoom (New bmap. Point (116.404, 39.915), 11 );

VaR tile_size = 256;

Map. addeventlistener ('click', function (e ){
VaR info = new bmap. infowindow ('', {width: 260 });
VaR projection = This. getmaptype (). getprojection ();

VaR lnglat = E. Point;
VaR lnglatstr = "latitude and longitude:" + lnglat. lng + "," + lnglat. Lat;

VaR worldcoordinate = projection. lnglattopoint (lnglat );
VaR worldcoordstr = "<br/> plane coordinate:" + worldcoordinate. x + "," + worldcoordinate. Y;

VaR pixelcoordinate = new bmap. pixel (math. Floor (worldcoordinate. x * Math. Pow (2, this. getzoom ()-18 )),
Math. Floor (worldcoordinate. y * Math. Pow (2, this. getzoom ()-18 )));
VaR pixelcoordstr = "<br/> pixel coordinates:" + pixelcoordinate. x + "," + pixelcoordinate. Y;

VaR tilecoordinate = new bmap. pixel (math. Floor (pixelcoordinate. X/256 ),
Math. Floor (pixelcoordinate. Y/256 ));
VaR tilecoordstr = "<br/> coordinate of the image block:" + tilecoordinate. x + "," + tilecoordinate. Y;

VaR viewportcoordinate = map. pointtopixel (lnglat );
VaR viewportcoordstr = "<br/> visible region coordinates:" + viewportcoordinate. x + "," + viewportcoordinate. Y;

VaR overlaycoordinate = map. pointtooverlaypixel (lnglat );
VaR overlaycoordstr = "<br/> covering coordinates:" + overlaycoordinate. x + "," + overlaycoordinate. Y;

Info. setcontent (lnglatstr + worldcoordstr + pixelcoordstr + tilecoordstr +
Viewportcoordstr + overlaycoordstr );
Map. openinfowindow (Info, lnglat );
});
</SCRIPT>
</Body>
</Html>

Effect

 

We all know that the Earth is circular and the computer monitor is flat. A conversion process is required to display the shape of the sphere on a flat display. This process is calledProjection(Projection ). On the earth, we use latitude and longitude to describe a location. After projection, the map also has its own coordinate system, this article will introduce in detail the various coordinate systems involved in Baidu map API.

In Baidu map API, you need to understand the following coordinate system:

• Longitude and latitude: a location on the earth described by longitude and latitude.

• Plane coordinate: coordinates after projection (described by X and Y), used to identify a position on the plane.

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

• Coordinate of a block: the number of a map block (described by X and Y ).

• Visible region coordinate: Coordinate System of the visible area of the map (described by X and Y ).

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

Don't be scared by so many coordinate systems. After reading the subsequent explanations, I believe you will gradually understand them.

 

Longitude and latitude

This is not much to say. unfamiliar ones can turn over the geography book. However, it should be noted that even the longitude and latitude coordinates may belong to different coordinate systems. Generally, the longitude and latitude obtained by GPS devices belong to the WGS84 coordinate system, which is a common coordinate system. For some reason, WGS84 coordinates cannot be directly used in China. Therefore, the longitude and latitude of Baidu map API are encrypted and offset.

 

Plane coordinate

As mentioned above, the shape on the sphere needs to be projected to be transformed into the shape on the plane. After the transformation, a plane coordinate system is required to describe a location on the map. Baidu map API uses Mercator projection by default. It is also important to note that the projection parameters are different.

The origin of the plane coordinate system is the same as that of the longitude and latitude, that is, the position where the Equator and the zero-degree longitude Line Intersect:

In Baidu map API, plane coordinates are based on a maximum of 18 levels. That is to say, at 18 levels, a unit of plane coordinates represents one pixel on the screen. The plane coordinate has nothing to do with the level displayed by the map. That is to say, the plane coordinates at Tiananmen are consistent at level 1 and 18. So how do we know the plane coordinates at a certain position? You can use the bmap. mercatorprojection class to convert the longitude and latitude coordinates and the plane coordinates. For example, the longitude and latitude of Tiananmen are about 116.404 and 39.915. After conversion, the plane coordinates are obtained:

VaR projection = new bmap. mercatorprojection ();
VaR point = projection. lnglattopoint (New bmap. Point (116.404, 39.915 ));
Alert (point. x + "," + point. y );

The result is as follows:

This is the plane coordinate. In this way, you can understand the meaning of this: In the second level, the difference between Tiananmen Square and the coordinate origin is 18th 5923.77, in pixels.

 

Pixel coordinates

At the level of 18th, we get the pixel coordinates by directly rounding down the plane coordinates. At other levels, we can use the following formula for conversion (Here we take the integer as the downward integer ):

Pixel coordinate = | plane coordinate X 2 zoom-18 |

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

At different levels, the pixel coordinates of the same geographic location are different, which are related to the current map level.

 

Block coordinates

When displaying a map, Baidu map API cut the entire map image into several blocks for display. When the map is initialized or the map level and central point position change, the map API calculates the required block coordinates (also called the block number) in the field of view based on the current pixel coordinates, and loads the corresponding block to display the map.

The coordinate origin of the graph block of Baidu map is the same as that of the plane. It ranges from the origin to the top right and ranges from 0 to 0:

How do I know the coordinates of a graph block at a certain position? You can use the following formula (here is the rounded down ):

Plot coordinate = | pixel coordinate limit 256 |

256 is actually the width and height of each graph block. We will know the coordinate of the graph block by dividing the pixel coordinate by this number. Taking Tiananmen Square as an example, the block numbers of Tiananmen Square are 3 and 1 at the lower level of 4th. in the lower level of 18th, the block number is 50617,188 51.

 

Visible Region coordinates

A map is displayed in a rectangle with a fixed size. This rectangle is usually a container element imported by the developer during map initialization. This rectangle also has its own coordinate system, which is called the visible regional Coordinate System in Baidu map API. Its origin is located in the upper left corner of the rectangle.

The pointtopixel and pixeltopoint methods of the map class can convert the coordinates of longitude and latitude and visible regions.

 

Covering coordinates

A covering is implemented by several DOM elements, which are placed in several covering containers (for details, see the map API Development Guide ), then, the coordinates of the covering are actually the coordinates relative to these covering containers. After the map Initialization is complete, the upper left corner of the covering container is the same as the upper left corner of the visible area of the map. Once the map is moved or scaled, the position of the covering container changes. The API provides latitude and longitude information when customizing the covering. developers need to convert the latitude and longitude to the pixel coordinates of the covering to display the covering at the correct position. This conversion process can be achieved through map pointtooverlaypixel and overlaypixeltopoint methods. 

So much will be lost. Finally, we will review the above mentioned concept of coordinate system through a complete code example:

 

<! Doctype HTML>
<HTML>
<Head>
<Meta charset = "UTF-8"/>
<Title> concept of map coordinates </title>
<SCRIPT src = "http://api.map.baidu.com/api? V = 1.2 "> </SCRIPT>
</Head>
<Body>
<Div id = "map_container" style = "width: 500px; Height: 320px;"> </div>
<SCRIPT>
VaR map = new bmap. Map ('map _ iner ', {defacurcursor: 'default '});
Map. centerandzoom (New bmap. Point (116.404, 39.915), 11 );

VaR tile_size = 256;

Map. addeventlistener ('click', function (e ){
VaR info = new bmap. infowindow ('', {width: 260 });
VaR projection = This. getmaptype (). getprojection ();

VaR lnglat = E. Point;
VaR lnglatstr = "latitude and longitude:" + lnglat. lng + "," + lnglat. Lat;

VaR worldcoordinate = projection. lnglattopoint (lnglat );
VaR worldcoordstr = "<br/> plane coordinate:" + worldcoordinate. x + "," + worldcoordinate. Y;

VaR pixelcoordinate = new bmap. pixel (math. Floor (worldcoordinate. x * Math. Pow (2, this. getzoom ()-18 )),
Math. Floor (worldcoordinate. y * Math. Pow (2, this. getzoom ()-18 )));
VaR pixelcoordstr = "<br/> pixel coordinates:" + pixelcoordinate. x + "," + pixelcoordinate. Y;

VaR tilecoordinate = new bmap. pixel (math. Floor (pixelcoordinate. X/256 ),
Math. Floor (pixelcoordinate. Y/256 ));
VaR tilecoordstr = "<br/> coordinate of the image block:" + tilecoordinate. x + "," + tilecoordinate. Y;

VaR viewportcoordinate = map. pointtopixel (lnglat );
VaR viewportcoordstr = "<br/> visible region coordinates:" + viewportcoordinate. x + "," + viewportcoordinate. Y;

VaR overlaycoordinate = map. pointtooverlaypixel (lnglat );
VaR overlaycoordstr = "<br/> covering coordinates:" + overlaycoordinate. x + "," + overlaycoordinate. Y;

Info. setcontent (lnglatstr + worldcoordstr + pixelcoordstr + tilecoordstr +
Viewportcoordstr + overlaycoordstr );
Map. openinfowindow (Info, lnglat );
});
</SCRIPT>
</Body>
</Html>

Effect