First, the conclusion, of course, is: success, xi Big pu Ben. Look at the renderings:

All right, let’s talk about the process

Let’s review the first and second articles in this series

The first article is a direct modification of mapBoxGL source code, in the source code in the face of tile position correction, encountered the problem is that the map rotation will have a dislocation, and tile correction after the screen edge will have a blank.

The second post is about a mapBoxgl custom layer. The problem is that the tiles shake crazily when the map is at large scale.

After these two articles were published, two big bulls gave constructive suggestions on the above issues.

A user named “undefined” on Sifu (it’s not a bug, it’s his name) found out the reason why the tiles were misaligned when the map rotated after reading the first article and offered a solution.

According to the above ideas, I rewrote a pixelMatrix matrix without rotation parameters, the dislocation problem is solved.

Once you’ve solved the mismatch, you can then solve the problem of blank edges of the screen.

My idea is to offset the display range of the tiles when calculating the display range, so that the program requests the tiles by the offset range, so that there is no blank area after the subsequent tile correction.

In a two-dimensional map, the range displayed by the tiles is calculated directly from the coordinates of the four corners of the screen. However, MapBoxGL is a THREE-DIMENSIONAL map, and the display range of the three-dimensional map is calculated according to the parameters of the camera. It is necessary to determine the intersection relationship between the camera’s visual vertebra and the tile, which has not been clarified here.

So, the plan is stuck again.

Another user, “Goji berries in a Bottle of Cola” in the MapBoxGL technical Exchange group, pointed out the reason for the jiggling problem in the second article, and gave a solution.

The blog link above details the reason for the wobble, which roughly translates to: Webgl only supports float32 precision, while JS uses float64 precision by default. When the high-precision digits in JS are transmitted to WebGL, the accuracy will be lost. The impact of this loss is map jitter, and the larger the scale, the more severe the jitter will be.

How can we avoid the loss of accuracy? Here’s how deck.gl does it:

  1. The step of converting latitude and longitude coordinates to Mercator coordinates is realized in WebGL for GPU calculation
  2. Instead of using Mercator coordinates directly when the scale is greater than 12, the Mercator coordinates are computed relative to the center point of the screen. Using float32’s precision to store relative positions is perfectly fine and avoids the loss of precision
  3. Rewrite the View and Projection matrix

With this in mind, I modified the mapBoxgl custom layer correction plugin I wrote last time, and finally the map doesn’t shake at large scales.

But I soon ran into a new problem: when I dragged the map, the tiles and the mouse did not move the same distance.

Go back to the online example of that blog post and you have the same problem

In that case, let’s solve the problem, because if I look at the code, I don’t like the following two lines,

Try not to divide by 2, ha ha, one hit, problem solved.

So far, mapBoxGL has successfully solved the problem of correcting the amap tiles. I have packaged it into a plug-in for everyone to use. GIS armory has a new weapon in hand.

This plugin currently supports not only amap tiles, but all tiles with GCJ02 coordinates.

Of course, as a plug-in, it is not perfect, so there are several areas that can be improved:

  1. Compared to the tiles that come with MapBoxGL, the tiles are a little bit fuzzy when scaled
  2. Tiles have no transition effect when the map is zoomed
  3. When the layer is removed, it sometimes pops up for no apparent reason
  4. There is a problem with the display on the mobile phone

These problems will be gradually improved in the future. Join us for Issues and Pull requests

address

Example: online gisarmory. Xyz/blog/index…

Address: plugin gisarmory. Xyz/blog/index…

conclusion

  1. There are two solutions to solve the problem of Autonavi tile offset in MapBoxGL. The first solution is to change the source code. The second solution is to write custom layers
  2. The first solution has a breakthrough, which solves the problem of tile dislocation when the map rotates, but the problem of blank screen edge after the offset is not solved
  3. In scheme two, the problem of tile jitter on large scale map is solved successfully, and finally the tile deviation is corrected
  4. Package the code of plan 2 into a plug-in for everyone to use

The original address: gisarmory. Xyz/blog/index…

Pay attention to GIS Armory, which only gives you GIS knowledge and skills that you can’t find online.

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. \