How to gracefully solve the offset problem of Baidu and Gaode maps in leaflet

Don't talk much , First on the renderings

I used to work on projects , I often hear customers say , Where did you get this map , Too ugly , Can you change it to Baidu map …… Gorde will do ……

In everyone's life , Basically, they are used to using Baidu map and Gaode map , While working on the project , Use these two maps as the base map , It has basically become a standard configuration . But use these two maps in development , Will encounter a roadblock , Coordinate offset problem .

The most commonly used coordinates in the world , yes wgs84 coordinate , major GPS Devices and mobile phones GPS Coordinates obtained by positioning , It's usually this coordinate . Our country needs to keep secrets , Internet map required to be released in China , The encryption offset must be performed on this basis . The encrypted coordinates are called the coordinates of the State Survey Bureau , Commonly known as Mars coordinates . Gould map 、 Tencent map 、 This coordinate is used by Google maps in China . Baidu map is encrypted again on the basis of Mars coordinates , Baidu coordinates are formed .

leaflet There is a plug-in that loads Internet maps leaflet.ChineseTmsProviders, It is easy to load Godspeed 、 Baidu 、 Sky map 、 Google and other online map tiles , But we did not solve the problem of their offset . Gaode and Baidu map provide wgs84 Online interface for converting coordinates to own coordinates , But only one-way transfer in is supported , Reverse rotation is not supported , This will cause functions such as map picking coordinates to be unavailable wgs84 coordinate .

A copy of wgs84 coordinate 、 Mars coordinates and Baidu coordinates between the conversion algorithm . Found after being used in multiple projects , Basically very accurate , There are occasional errors , But very small , Within a few meters , I can hardly feel it when I use it .

How to integrate into leaflet

Two ways of thinking ：

The first one is , The correction algorithm is encapsulated into an interface , Similar to Baidu mentioned above 、 Coordinate conversion interface of Gaud map , Before loading data into the map , First call this interface to complete the coordinate conversion, and then add it to the map . It is equivalent to shifting your own data to the coordinates of the Internet map . This is the most common .

The second kind , Baidu 、 Gaud's maps are all tile maps , Each tile will calculate its longitude and latitude position when it is loaded , We can add a correction algorithm when calculating the longitude and latitude position , Correct the coordinate position of the tile . When all the tiles are in the right position , There is no offset in the whole map . It is equivalent to correcting the tile of Mars coordinate or Baidu coordinate back to wgs84 coordinate .

The two schemes are compared , The first is obviously by Baidu 、 Gaud's coordinate conversion interface is rhythmic .leaflet It's open source. , We can correct the deviation of tiles by studying the source code , So as to truly correct the deviation of the map , Instead of calling the coordinate conversion interface every time , Let the data go wrong .

The second scheme can be further extended , Package the correction of tiles into plug-ins , The ultimate goal is to automatically correct the deviation of the map after the plug-in is introduced .

Tile position

Correct the deviation of tiles , First find the loading tile 、 Where is the code to calculate the tile position .

As mentioned above , Load the plug-in of Internet map leaflet.ChineseTmsProviders It is essentially a layer , It inherited TileLayer

TileLayer Inherited GridLayer

The code to load tiles is mainly in GridLayer Written in .

The code to calculate the tile position is in _getTiledPixelBounds Methods and _setZoomTransform In the method .

Tile rectification

Tile rectification is divided into three steps ：

First step ： Prepare the algorithm for coordinate conversion

The second step ： Get the coordinate type according to the Internet map name

The third step ： In the method of obtaining tiles and zooming the map , Call the correction algorithm

Packaged as plug-ins

There is a problem , Since you want to package it as a plug-in , It is necessary to achieve coupling , Cannot be modified directly leaflet Source code . Here you can refer to leaflet Source code , Use include Method to rewrite the method to modify the source code .

include The way

Let's learn about ： such as leaflet Source code Polygon.toGeoJSON() The method is not in Polygon.js It's written in the document , It's about using include The way is written in GeoJSON.js In file .Polygon Class doesn't have toGeoJSON() Methodical , This adds to the method . If Polygon Class already has toGeoJSON() Method , This will be written according to the order of execution , The later one will rewrite the first one .

Last , We encapsulate the above code into a js plug-in unit , This plug-in is cited , We can correct the deviation of the map , There's no need to write a line js Code , This is the real elegance in my mind .

Final effect

The following figure shows the comparison before and after referencing the correction plug-in ：

Be careful ：leaflet Will map After initialization , Coordinates of the first layer loaded , As a whole map Coordinates of , So after the map is initialized , To be the first to add an Internet map as an underlay .

summary

1. leaflet There is a plug-in to load the domestic Internet map , But there is a problem of coordinate offset .
2. Common offset coordinates include the coordinates of the State Survey Bureau and Baidu coordinates . There is one on the Internet wgs84 Coordinate national survey bureau coordinates and Baidu coordinates conversion algorithm , You need to integrate yourself into leaflet in
3. The correction algorithm is integrated into leaflet There are two ways of thinking , One is to shift your data to the Internet map , The other is to correct the tiles of the Internet map back to their own data .
4. Adopt the second idea , The correction algorithm is encapsulated into a plug-in , Correct the tile deviation of Internet map , The most elegant way to copy the source code in a plug-in .

Online example

Online example

Correction plug-in

Not familiar with github Children's shoes , You can search by wechat 《GIS Zeughaus 》 Or scan the QR code below , reply “ Map correction ” Get the download link of the correction plug-in .

---

This article will be updated frequently , Please read the original ：http://gisarmory.xyz/blog/index.html?blog=leafletMapCorrection, To avoid being obsolete 、 Wrong knowledge misleads .

WeChat search 《GIS Zeughaus 》 Or scan the QR code above , Focus on GIS Armory official account , You can get GIS Article update .

This article adopts Creative Commons signature - Noncommercial use - Share in the same way 4.0 International licensing agreement Licensing . Welcome to reprint 、 Use 、 Re release , But be sure to keep the signature of the article 《GIS Zeughaus 》（ Include links ： http://gisarmory.xyz/blog/）, Not for commercial purposes , Based on this revised work must be released with the same license .