mapboxgl 互联网地图纠偏插件（三）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

先说结论，结论当然是：大功告成，喜大普奔。看效果图：

好了，接下来说一下过程

先回顾一下这个系列的第一篇和第二篇

第一篇是直接改的 mapboxgl 源码，在源码里面对瓦片的位置进行纠偏，遇到的问题是，地图旋转时会有错位，还有瓦片纠偏后屏幕边缘会有空白。

第二篇是写了一个 mapboxgl 自定义图层，遇到的问题是，地图在大比例尺时，瓦片会疯狂抖动。

这两篇文章发出后，有两位大牛针对上面的问题，给出了建设性的意见。

一位是思否上的网友“undefined”（这个不是bug，是他的名称），他在看了第一篇文章后，找出了地图旋转时瓦片错位的原因，并给出了解决方法。

按照上面的思路，我重新写了一个不包含旋转参数的 pixelMatrix 矩阵后，错位问题解决。

解决了错位后，接下来解决屏幕边缘出现空白的问题。

我的思路是，在计算瓦片的显示范围时，对显示范围进行偏移，让程序按偏移的范围去请求瓦片，这样后续瓦片纠偏后，就不会出现空白区域了。

在二维地图中，瓦片显示的范围是根据屏幕 4 个角的坐标直接计算的。但 mapboxgl 是三维地图，三维地图的显示范围是根据相机的参数来计算的，需要判断相机视椎体和瓦片的相交关系，这里还没有整明白。

所以，这个方案就又卡这儿了。

另一位网友是 mapboxgl 技术交流群里的“可乐瓶里泡枸杞”，他指出了第2篇文章中，大比例尺时地图抖动问题的原因，并给出了解决思路。

上图的博客链接中详细说明了地图抖动的原因，大概意思是：webgl 只支持 float32 精度，而 JS 默认是采用 float64 精度，JS 中的高精度数字向webgl 传输时会造成精度损失，这种损失带来的影响就是地图抖动，比例尺越大抖动的越厉害。

如何能避免精度的损失？博客中介绍了 deck.gl 的做法：

将经纬度坐标转墨卡托坐标这一步，放到 webgl 中来实现，目的是为了使用 GPU 计算
在比例尺大于12级时，不再直接使用墨卡托坐标，而是计算墨卡托坐标和屏幕中心点的相对位置。使用 float32 的精度保存相对位置是完全没有问题的，这样就规避了精度损失的问题
重写 view 和 Projection 矩阵

按这个思路，我将上次写的 mapboxgl 自定义图层纠偏插件进行了改造，最终大比例尺时地图不再抖动了。

但又很快遇到了新问题：拖动地图时，瓦片和鼠标的移动距离不一致。