Question

我想在我的地图上添加一条多边形线，但似乎无法在按钮点击时进行渲染。这是我目前的代码：

<button onClick={
                    function(){
                        console.log(asset.past);
                        var pathLine = new L.Polyline(asset.past, {
                        color: 'red',
                        weight: 3,
                        opacity: 0.5,
                        smoothFactor: 1
                      }
                    );
                    leafletMap.addLayer(pathLine);}
                  }
                  className="btn btn-info eachBtn">Go</button>

谢谢，Ed。

Answer 1

您似乎正在尝试在react-leaflet的上下文之外管理地图状态。我甚至不确定你是否正在使用react-leaflet包或尝试推出自己的反应网站，而这些网站恰好有传单。

如果您确实使用react-leaflet，则应维护要在组件状态中呈现的折线列表或由父组件更新和发送的属性。然后，在渲染函数中，您将迭代这些折线并将它们中的每一个渲染为反应传单折线。

这样的事情：

render() {
  return (
    <Map 
      center={[51.505, -0.09]} 
      zoom={13} 
      >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
      {this.state.polylines.map((positions, idx) => 
        <Polyline key={`polyline-${idx}`} positions={positions} />
      )}
    </Map>
  );
}

另外，请参阅类似的反应传单应用程序的示例over here，该应用程序在地图上单击点后添加标记。

按钮单击时添加折线

1 个答案: