react-leaflet 动态添加图层

Question

我开始使用 react-leaflet，我遇到了一个问题：在我的应用程序中，用户填写了一个表单，然后请求一个 returns GeoJSON 的休息服务，然后将其添加为我地图上的一个新图层。我的问题：如何在 react-leaflet 中实现动态添加层？

谢谢。

Answer 1

我有类似的问题。我想动态地清除和创建标记层。我认为你可以通过获取对实际地图视图的引用来做到这一点 react refs 例如

<Map ref={Map => this.map = Map}>

稍后您可以将 this.map 与正常的 Leaflet 功能一起使用。其他选项可能是您在 JSX 中创建图层的方式与我创建标记的方式相同：

{this.props.markers.map((i,index) => { return ( <Marker key={i} position={i}> <Popup> <span>Great marker!</span> </Popup> </Marker>); })}

Answer 2

最好的方法是为 react-leaflet 创建 GeoJSON 层包装器。在 react-leaflet 的 plugins section 中有一个类似的带有聚类的 GeoJSON 层实现。然后你应该将这个图层添加到你的地图组件中，并在需要时更改它的数据。所以不需要动态添加图层而是动态更改数据。查看传单的 GeoJSON 示例以了解想法 http://leafletjs.com/examples/geojson/.

如果您有一层数据不断变化，则该方法会奏效。但是，如果您有不同的数据集，则需要为每个数据集添加一个 GeoJSON 层。

<Map ...>
{this.props.datasets.map((ds, ix) => {
  return (<GeoJSONOverlay data={ds} key={ix} />);
})}
</Map>

react-leaflet 动态添加图层

react-leaflet add layers dynamically

react-leaflet