gpt4 book ai didi

mapbox - 与旧的 Mapbox.js 相比,Mapbox GL JS 性能较差

转载 作者:行者123 更新时间:2023-12-04 00:58:47 35 4
gpt4 key购买 nike

我正在重写来自 Mapbox.js 的路线规划 Web 应用程序至 Mapbox GL JS图书馆。

几乎所有功能都已实现,但由于 的滞后、不流畅的动画和普遍的缓慢,它几乎无法使用。 map 层 .

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

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

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

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

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

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

  • 动态风格的路线(交通、空气质量、海拔)
  • 覆盖 map 的丰富UI
  • 附加层(例如自行车道、POI、空气质量)

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

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

    最佳答案

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

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

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

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

    improving performance of Mapbox GL JS maps 上也有一些很棒的指南和 working with large GeoJSON sources in Mapbox GL JS

    关于mapbox - 与旧的 Mapbox.js 相比,Mapbox GL JS 性能较差,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60379207/

    35 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com