react-leaflet 动态添加图层答案

【问题标题】：react-leaflet add layers dynamicallyreact-leaflet 动态添加图层
【发布时间】：2017-01-29 18:44:03
【问题描述】：

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

谢谢。

【问题讨论】：

标签： react-leaflet

【解决方案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>

【讨论】：

损坏的“插件部分”链接。 Plugins.md -> plugins.md

【解决方案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>); })}

【讨论】：