与旧Mapbox.js相比，Mapbox.js性能较差

Question

我正在重写从Mapbox.js到Mapbox GL JS库的路由规划web应用程序。

随着所有的功能几乎实现，它的边缘无法使用，因为滞后，非光滑的动画和普遍迟缓的地图层。

现在，我完全有可能错误地使用了API。我做了一个快速的比较，并发表在这里：

https://petrnagy.github.io/index.html#automove=no

注意，旧的Mapbox.js (左)比新的Mapbox GL JS (右)平滑得多。

在这两个地图都在移动和缩放的地方，您可以更清楚地看到两者之间的差别：

https://petrnagy.github.io/index.html#automove=yes

这只是一个基本的例子。该应用程序本身还具有以下功能：

• 动态设计路线(交通、空气质量、海拔)
• 在地图上覆盖的富UI
• 额外层(如。自行车道、警察、空气质量)

有了所有这些特性，Mapbox几乎无法使用。不像旧的Mapbox.js，它是光滑的。

任何关于优化性能的建议都值得赞赏！

Answer 1

需要注意的是，较早的Mapbox.js库提供的是栅格块，而光栅块则是服务器端，而更现代的Mapbox.js则是基于矢量和呈现客户端的。由于光栅与矢量的本质是为什么你可能会看到这种“下降”的性能，如果你是看严格的FPS，因为你的机器可能正在挣扎。

Mapbox.js和其他传统的JavaScript地图库一样，使用了基本地图覆盖映射约定。basemap (或baselayer)是一个栅格平铺层，已经从服务器上呈现，并且覆盖通常是位于基地图之上的矢量数据。

Mapbox没有区分基片层和覆盖层，主要使用向量块。这意味着地图细节(如标签和图标)和元素(如街道和建筑物)可以使用JavaScript进行修改，就像早期映射库中的覆盖一样。每个层提供了渲染器应该如何在浏览器中绘制某些数据的规则，渲染器使用这些层在屏幕上绘制地图。

您可以在这里阅读更多关于这种差异的内容：https://docs.mapbox.com/help/how-mapbox-works/web-apps/

还有一些关于改进Mapbox GL JS地图性能的研究和在Mapbox中使用大型GeoJSON源的很好的指南