javascript - React Mapbox GL - 如何使用图层和特征而不是标记在 map 上绘制图像

Question

我正在使用React Mapbox GL在我的项目中，当我使用 Marker 处理大约 10000 个数据点时，性能并不是那么好。我已阅读文档，它说

Note: When rendering many objects, avoid using Markers as it will negatively affect performance. Use Layers and Features instead.

如何使用图层和特征来显示标记？

Answer 1

要渲染具有图层和功能的内容，请放置一个或多个 Feature components Layer component 里面。您可以使用 copies 属性为每个要素指定一个位置。

现在，剩下的就是设置这些功能的样式。如何执行此操作取决于标记之前包含的内容，但例如，如果您想为每个位置绘制圆形，则可以将图层的type设置为circle 并在 paint 属性下，提供 circle-color 和 circle-radius 的值(这些值在 mapbox-gl API docs 中进行了描述。

要为每个坐标绘制图像，您可以使用 icon-image图层上的 layout 属性(您必须使用预先存在的图标或将图标上传到 Mapbox Studio )。

您可以在演示中看到一些示例代码，例如 all-shapes demo用圆圈设置数据样式。