与旧版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

这只是一个基本示例。该应用程序本身还具有以下特点：

• 动态样式路线（交通、空气质量、高度）
• 覆盖地图的丰富UI
• 其他图层（例如自行车道、POI、空气质量）

由于所有这些功能，Mapbox GL JS几乎无法使用。与旧的Mapbox.js平滑不同。

欢迎提供有关优化性能的任何建议！

- Petr Nagy

---

我的经验是，关于“性能”投诉，一个人认为明显的“性能不佳”，实际上很主观。这就是为什么我要求您更具体（并客观）地说明您需要帮助解决的问题。 - Steve Bennett

@SteveBennett 所有问题本质上都是主观的，因为它们基于我们对周围世界的当前理解和感知。2+2等于多少？回答时要小心，因为在黑洞中心可能会是无限大。你不是在争取更好的问题，而是在争论没有人应该提问问题，因为这样做总是会导致主观答案。 - Krythic

@SteveBennett 我并没有以任何方式攻击你，尽管你的讽刺和无益的评论。 - Petr Nagy

我在原帖提供的演示链接中观察到的差异如下：

1. .js 让我可以看到单个瓷砖在缩放或移动时出现（替换空白/白色）。
2. GL 看起来像一张大图；我永远看不到缺失的瓷砖被填充。
3. .js 的性能似乎更加响应/立即。
4. GL 的性能感觉像具有惯性或迟滞的平稳滚动。

总体而言：我更喜欢 .js 的快速响应和 GL 无瓷砖的外观。但我讨厌 GL 中的迟滞。 - Kenigmatic

这是我刚刚从OP捕获的automove演示视频，展示了我所说的内容。它使用automove而不是鼠标控制，所以也许滞后是automove实现的一部分，而不是一个“真正”的问题？https://monosnap.com/file/FKcK4NqfmkaVdd8jyhKjZVUfDAvRGr - Kenigmatic

Answer 1

需要翻译的内容如下：

请注意，旧版Mapbox.js库提供了栅格图块，这些图块在服务器端呈现，而更现代化的Mapbox GL JS则是基于矢量图块，并在客户端进行渲染。由于栅格与矢量的性质不同，因此严格按照FPS查看时可能会出现性能“下降”，因为您的机器可能难以承受。

与其他传统的JavaScript地图库一样，Mapbox.js使用basemap-overlay映射约定。基础地图（或底图）是一个栅格图块层，它已经从服务器渲染并叠加在通常位于底图之上的矢量数据上。

Mapbox GL JS没有区分基础图层和叠加图层，主要使用矢量图块。这意味着可以通过JavaScript修改地图细节，例如标签、图标和街道和建筑物等元素，就像早期地图库中的叠加层一样。每个图层都提供有关呈现程序如何在浏览器中绘制特定数据的规则，并且呈现程序使用这些图层在屏幕上绘制地图。

您可以在此处了解更多信息：https://docs.mapbox.com/help/how-mapbox-works/web-apps/

还有一些关于提高Mapbox GL JS地图性能的指南和处理Mapbox GL JS中大量GeoJSON数据的指南。

- aroth