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

标签 javascript reactjs mapbox

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

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

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

最佳答案

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

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

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

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

关于javascript - React Mapbox GL - 如何使用图层和特征而不是标记在 map 上绘制图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59659673/

相关文章:

javascript - 下拉列表未出现在可编辑表格单元格中

javascript - 隐藏div中的表单并仅在重定向后显示它

javascript - 是什么导致网页重新加载?

javascript - 如何在 ReactJS 中快速过滤大型 json 数据集

javascript - Mapbox.js 在 Ruby on Rails 中呈现空白

javascript - 如何使用 datejs parseExact 解析任意日期

javascript - 使用路由器 "No overload matches this call"包装组件时出现 React-Router + Typescript 错误

javascript - 需要将对象添加到处于状态的数组中

swift - 如何在不使用 Mapbox 的情况下使用 OpenStreetMap?

Mapbox GL JS : Set base layer to white?