react-leaflet 动态添加层

Question

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

谢谢你。

Answer 1

最好的方法是为react-leaflet创建GeoJSON层包装器。 React-leaflet 的插件部分中提供了类似的具有集群功能的 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

与普通的 Leaflet 功能一起使用。其他选项可能是您在 JSX 中创建图层，就像我创建标记一样：

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