如何将 React 组件作为图层放置在 Mapbox gl js 中？

Question

如何将 React 组件作为图层添加到 mapbox gl js 地图容器中？我有一个名为

<Symbol data={data} size={25}/>

的反应组件，它返回

<svg>

。这是因为它根据作为 props 提供的数据动态改变颜色。我已经使用了react-map-gl，但它只能将地图中的组件渲染为标记，而不能渲染为图层。我想把它做成一个层来提高性能。

我尝试使用

map.current.addImage()

，但它只允许作为图像

HTMLImageElement | ImageData | ImageBitmap | ArrayBufferView.

Answer 1

您应该首先添加您的 svg 图像作为新的地图符号，您可以查看示例here。添加 svg 符号后，您需要使用符号类型创建图层。确保您为地图提供了将存储图层使用的数据的源。