How to solve the migration problem of Baidu and Gaode map in leaflet

Time:2020-10-3

If you don’t say much, let’s go to the renderings first

How to solve the migration problem of Baidu and Gaode map in leaflet

In the past, when I was doing projects, I often heard customers say, “where did you come from? It’s so ugly. Can you change it to Baidu map…” It’s OK with Gode

In our daily life, we are basically used to using Baidu map and Gaode map, and when doing projects, using these two maps as the base map has basically become the standard configuration. However, when we use these two maps in the development, we will encounter a problem of obstacle and coordinate offset.

The most commonly used coordinates in the world are WGS84 coordinates, which are usually obtained by professional GPS equipment and mobile phone GPS positioning. In order to keep secret, our country requires that the Internet map published in China must be encrypted and offset on this basis. The encrypted coordinates are called National Bureau of Surveying and mapping coordinates, commonly known as Mars coordinates. Gaode map, Tencent map and Google map in China are all the coordinates. Baidu map is based on the Mars coordinates again encryption, formed Baidu coordinates.

Leaflet has a plug-in for loading Internet maps leaflet.ChineseTmsProviders , can easily load the online map tiles such as Gaode, Baidu, Tiantu, Google, but does not solve their offset problem. However, Gaode and Baidu maps provide an online interface to convert WGS84 coordinates into their own coordinates, but only support one-way transfer in, and do not support reverse and then turn back, which will lead to the inability to obtain WGS84 coordinates for functions such as map picking coordinates.

There is a conversion algorithm between WGS84 coordinates, Mars coordinates and Baidu coordinates on the Internet. After being used in many projects, it is found that it is basically accurate, with occasional errors, but it is very small, which is within a few meters, and can not be felt in ordinary use.

How to integrate into leaflet

There are two ways of thinking

First, encapsulate the correction algorithm into an interface, similar to the coordinate conversion interface of Baidu and Gaode maps mentioned above. Before loading data to the map, this interface is called to complete the coordinate conversion and then added to the map. It’s like shifting your data to the Internet map coordinates. This is the most common.

Secondly, the maps of Baidu and Gaode are tile maps. Each tile will calculate its longitude and latitude position when it is loaded. We can add correction algorithm to correct the coordinate position of tiles when calculating the position of longitude and latitude. When all the tiles are in the right position, there is no offset in the whole map. It is equivalent to correcting the tiles of Mars coordinates or Baidu coordinates back to WGS84 coordinates.

Comparing the two schemes, the first one is obviously rhythmic by the coordinate conversion interface of Baidu and Gaode. Leaflet is open source. We can correct the tiles by studying the source code, so as to truly correct the map, instead of calling the coordinate conversion interface every time to make the data wrong.

The second scheme can be further extended to encapsulate the tile rectification into plug-ins, and the ultimate goal is to implement automatic correction of map after introducing this plug-in.

Tile position

To correct tile deviation, we must find the code of loading tile and calculating tile position first.

As mentioned above, the plug-in for loading Internet maps leaflet.ChineseTmsProviders It is essentially a layer, which inherits tilelayer

How to solve the migration problem of Baidu and Gaode map in leaflet

Tilelayer inherits gridlayer

How to solve the migration problem of Baidu and Gaode map in leaflet

The code for loading tiles is mainly written in gridlayer.

The code for calculating tile position is in the_ Gettiledpixelbounds method and_ Setzoomtransform method.

How to solve the migration problem of Baidu and Gaode map in leaflet

How to solve the migration problem of Baidu and Gaode map in leaflet

Tile rectification

There are three steps to correct tile deviation

Step 1: prepare the algorithm of coordinate transformation

How to solve the migration problem of Baidu and Gaode map in leaflet

Step 2: get the coordinate type according to the name of Internet map

How to solve the migration problem of Baidu and Gaode map in leaflet

Step 3: in the method of obtaining tiles and map scaling, call the rectification algorithm

How to solve the migration problem of Baidu and Gaode map in leaflet

Package as plug-in

There is a problem. Since you want to package it as a plug-in, you need to achieve coupling. You can’t directly modify the source code of leaflet. Here, you can refer to the source code of leaflet, and use the include method to rewrite the method to modify the source code.

Include mode

Through examples to understand: such as leaflet source code Polygon.toGeoJSON () method is not in Polygon.js In the file, but in the form of include GeoJSON.js File. There is no togeojson () method for the polygon class, so this method is added. If the togeojson() method already exists in the polygon class, this will be written according to the order of execution, and the later one will override the one loaded first.

How to solve the migration problem of Baidu and Gaode map in leaflet

Finally, we encapsulate the above code into a JS plug-in. If you refer to this plug-in, you can correct the map without writing a line of JS code. This is the real elegance in my mind.

Final effect

The following figure shows the comparison before and after using the correction plug-in:

How to solve the migration problem of Baidu and Gaode map in leaflet

Note: after the map is initialized, the coordinates of the first layer loaded will be used as the coordinates of the whole map. Therefore, after the map is initialized, the first Internet map should be added as the base map.

summary

  1. Leaflet has a plug-in for loading domestic Internet map, but it has the problem of coordinate offset.
  2. The common offset coordinates are National Bureau of Surveying and mapping coordinates and Baidu coordinates. There is a WGS84 coordinate on the Internet, and the coordinate transformation algorithm between the National Bureau of Surveying and Baidu coordinates needs to be integrated into the leaflet
  3. There are two ways to integrate the rectification algorithm into the leaflet. One is to offset its own data to the Internet map, and the other is to correct the tile of the Internet map back to its own data.
  4. The second way of thinking is to encapsulate the correction algorithm into plug-ins, which is the most elegant way to copy the source code in the plug-in.

Online examples

Online examples

Correction plug-in

If you are not familiar with GitHub’s children’s shoes, you can search “GIS arsenal” or scan the QR code below via wechat, reply to “map rectification” to get the download link of correction plug-in.

How to solve the migration problem of Baidu and Gaode map in leaflet


This article will be updated frequently[ http://gisarmory.xyz/blog/ind… To avoid being misled by old and wrong knowledge.

WeChat searches for the GIS Arsenal or scanning the two-dimensional code above, focusing on the official account of GIS weapon database, and can get the update of GIS articles for the first time.

This article adopts the “knowledge sharing signature – non-commercial use – same way sharing 4.0 international license agreement”. Welcome to reprint, use and redistribute, but be sure to keep the signature of the article “GIS armory” (including link: http://gisarmory.xyz/blog/ ), must not be used for commercial purposes, and the work modified based on this article must be released under the same license.

Recommended Today

C # regular implementation of UBB parsing class code

The parsed code can pass XHTML   one   Strict verification;It includes title, link, font, alignment, picture, reference, list and other functions  Ubb.ReadMe.htm UBB code description title [H1] title I [/ H1] Title I [H2] Title II [/ H2] Title II [H1] Title III [/ H1] Title III [H4] Title IV [/ H4] Title IV […]