Question

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

谢谢。

Answer 1

最好的方法是为react-leaflet创建GeoJSON Layer包装器。有一个类似的GeoJSON层实现，在react-leaflet的plugins section中可以使用聚类。然后，您应该将此图层添加到地图组件中，并在需要时更改其数据。因此，无需动态添加图层，而是动态更改图层。查看传单的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>); })}

react-leaflet动态添加图层

2 个答案: