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

Question

我从重写路线规划Web应用程序的过程中Mapbox.js，以Mapbox GL JS库。

几乎实现了所有功能，由于滞后、不流畅的动画和地图层的普遍迟缓，它几乎无法使用。

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

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

请注意，旧的Mapbox.js（左）比新的Mapbox GL JS（右）平滑得多。

您可以在这里更清楚地看到两个地图都在移动和缩放的区别：

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

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

• 动态风格的路线（交通、空气质量、海拔）
• 覆盖地图的丰富用户界面
• 附加层（例如自行车道、POI、空气质量）

有了所有这些功能，Mapbox GL JS 几乎无法使用。不像旧的 Mapbox.js，它很流畅。

任何优化性能的建议表示赞赏！

Answer 1

重要的是要注意，较旧的 Mapbox.js 库提供栅格图块，这些图块在服务器端呈现，而更现代的 Mapbox GL JS 是基于矢量并呈现客户端的。由于光栅与矢量的性质，如果您严格查看 FPS，您可能会看到性能“下降”，因为您的机器可能正在挣扎。

Mapbox.js 与其他传统的 JavaScript 地图库一样，使用底图-叠加映射约定。底图（或 baselayer）是已经从服务器渲染的栅格切片图层，并且叠加层通常是位于底图顶部的矢量数据。

Mapbox GL JS 没有 baselayers 和 overlay 层之间的区别，并且主要使用矢量切片。这意味着可以使用 JavaScript 修改标签和图标等地图细节以及街道和建筑物等元素，例如早期地图库中的叠加层。每个图层都提供有关渲染器如何在浏览器中绘制某些数据的规则，渲染器使用这些图层在屏幕上绘制地图。

您可以在此处阅读有关差异的更多信息：https : //docs.mapbox.com/help/how-mapbox-works/web-apps/

还有一些关于提高 Mapbox GL JS 地图性能和在 Mapbox GL JS 中使用大型 GeoJSON 源的很棒的指南