react-leaflet - react-leaflet 动态添加图层

Question

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

谢谢你。

Answer 1

最好的方法是为 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>

Answer 2

我有类似的问题。我想动态清除和创建标记层。我认为您可以通过参考实际的地图视图反应参考来做到这一点，例如

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

稍后您可以使用this.map普通的传单功能。其他选项可能是您在 JSX 中创建层，就像我创建标记一样：

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