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

Question

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

注意：渲染许多对象时，请避免使用标记，因为它会对性能产生负面影响。请改用图层和功能。

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

标签： javascriptreactjsmapbox

Answer 1

要渲染具有图层和特征的东西，请将一个或多个Fe​​ature 组件放入Layer 组件中。您可以使用coordinates道具为每个功能指定一个位置。

现在，剩下的就是对这些功能进行样式设置。你如何做到这一点取决于你的标记之前包含的内容，但是例如，如果你想为每个位置绘制圆圈，你可以将图层设置type为circle并在道具下方，为andpaint提供值（这些在mapbox -gl API 文档。circle-colorcircle-radius

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

您可以在演示中看到一些示例代码，例如带有圆圈的全形状演示样式数据。