单击按钮添加多段线

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>

谢谢，埃德

Answer 1

您似乎正试图在 react-leaflet 上下文之外管理地图状态。我什至不确定你是在使用 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>
  );
}

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

单击按钮添加多段线

Add polyline on button click

leaflet

reactjs

react-leaflet