I have written a Leaflet Internet map deviation correction plug-in before, which can solve the offset problem of domestic Internet map tiles without writing a line of code after quoting the plug-in.
I recently wanted to write a plugin for MapBoxGL.
The reason is that the accuracy of the OSM vector tile map released by myself is not high enough. When you need to enlarge the map to view detailed information, you can take the grid tiles of Baidu and Autonavi to make a supplement. The first step to using them is to correct deviations.
I looked at the underlying code of MapBoxGL and found that I couldn’t read much of it. So I went to make up for webGL knowledge, and then looked at mapBoxGL source code, ha ha, everything is the same, GIS knowledge is the same, but the way of computer graphics has changed.
After the research, the target is locked on the transform.js file, which is mainly used to deal with various coordinate conversion problems, including latitude and longitude coordinates, Mercator coordinates, screen coordinates, WebGL coordinates, etc., and is also responsible for generating tile numbers.
The coveringTiles method in the file is used to calculate the x, Y, and Z tile numbers, returning the current scale and all tile numbers in the visual range.
After requesting the Internet map tiles according to the x, Y and Z tile numbers, the screen position displayed by the tiles will be calculated in calculatePosMatrix method.
Mapboxgl is a 3D coordinate system, and webGL is used for drawing. After adding a dimension, there are many more things to deal with. When loading tiles in 2d coordinate system, only the X and Y positions of tiles need to be considered, and 3d coordinate system needs to consider tilt and perspective on this basis.
Coordinates of WebGL are represented by position transformation matrix, which is quite different from Leaflet.
The calculatePosMatrix method above is to calculate the position transformation matrix of tiles displayed in WebGL according to their X, Y and Z numbers. Here, the tile translation matrix, scaling matrix and view + projection matrix are multiplied respectively to obtain the final position transformation matrix.
When I looked at this method, I was a little confused about how it calculated the position transformation matrix according to the x, Y and Z numbers of tiles. After studying the XYZ protocol, I realized that xyz coordinates and latitude and longitude coordinates have a set of mutual transformation formula. When the tile number was transferred to latitude and longitude, the coordinate returned was the latitude and longitude of the upper left corner of the tile. See: wiki.openstreetmap.org/wiki/Slippy…
Knowledge about webgl transform matrix can refer to this article www.cnblogs.com/charlee44/p… Or the WebGL Programming Guide, which I prefer because it’s more systematic and easy to understand.
It has to be said that the calculation of webGL position transformation matrix is still a little complicated, so I want to see if there is a built-in method for the interconversion between latitude and longitude coordinates and WebGL coordinates. After checking, I find that there is only the interconversion method of latitude and longitude coordinates, Mercator coordinates and screen coordinates, but there is no webGL method.
Then curve to save the country, first convert the longitude and latitude to screen coordinates, and then write a method to screen coordinates to WebGL coordinates.
Implementation idea:
- Calculate the latitude and longitude of the upper left corner of the tile according to the reciprocal formula of tile number and latitude
- The latitude and longitude of the upper left corner of the tile is corrected to get the latitude and longitude of wGS84 coordinates
- The longitude and latitude before and after correction are converted to screen coordinates respectively, and then the screen coordinates after conversion are subtracted to get the offset of tile screen coordinates
- Convert the offset of tile screen coordinates to the offset of WebGL coordinates
- By adding the webGL coordinate offset calculated just now to the tile translation matrix, the tile deviation can be corrected theoretically
In the process of implementation, after steps 1, 2 and 3 were completed, the screen coordinate offset of step 3 was directly added to the translation matrix of step 5 because we had not decided how to achieve step 4. The result was very surprising.
Implementation code:
Effect:
Take tian ‘anmen national flag as reference, correct deviation before
After rectifying
Haha, is that it?
Are the values in the translation matrix calculated by screen pixels?
So far, at least.
Just when I’m happy don’t don’t, huh? Why is there a blank on the edge and the tile has not requested to come? As I zoomed in on the map, the white edges grew larger and larger
This is easy to fix because mapBoxGL only shows tiles in the current range, and when tiles at the edge of the screen are corrected to the middle of the screen, there is a gap at the edge.
Just expand the current display a little bit.
While I was happily studying how to expand the display out, I accidentally tilted the map and, oh my God! What the hell is this
When I saw this, I was instantly in a bad mood.
Let me clean up my mind
Ok, personal guess, the reason may be that when the map is rotated, the tile calculates the Angle of rotation and the distance of movement according to the center point of WebGL coordinate, now the position of tile is offset after correction, but when the rotation coordinate is calculated, it still depends on the center point of WebGL, so there is a problem during rotation.
I haven’t figured it out. I feel that after correcting the tiles, I need to correct some central point. If there is a tech savvy reading this article can also leave a comment for guidance.
Conclusion:
- Correction of tile in vertical view is now done
- The blank area at the edge of the screen after correction needs to be solved.
- Tiles will misplace when the map is tilted and rotated, need to be studied.
Finally, the mapBoxGL correction plugin is not completely done, so I will not put the code, and I will share it with you when there are new entries in the exhibition. After it is completely done, I will share the plugin with you as before.
The original address: gisarmory. Xyz/blog/index…
Check out GIS Armory for more quality GIS articles for the first time.
This article is licensed under the Creative Commons Attribution – Noncommercial Use – Share alike 4.0 International License. You are welcome to reprint, use and republish the article under the name “GIS Armory” (including link: gisarmory. Xyz /blog/). It must not be used for commercial purposes, and all works based on this article must be published under the same license.