react-leaflet动态添加图层

Question

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

谢谢你。

Answer 1

最好的方法是为react-leaflet创建GeoJSON Layer包装器。在React-leaflet的plugins section中可以使用集群实现GeoJSON层的类似实现。
然后，应将此图层添加到 map 组件中，并在需要时更改其数据。因此，无需动态添加该层，而是可以动态更改其数据。
查看传单的GeoJSON示例以获取http://leafletjs.com/examples/geojson/的想法。

如果您的数据层有一层，则该方法将起作用。但是，如果您有不同的数据集，则需要为每个数据集添加一个GeoJSON图层。

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