传单：使用图层在地图上一起显示动态多段线

Question

我正在使用传单在我的地图上显示所有折线（不同颜色）。我正在获取所有动态折线的纬度和经度及其颜色，但是当我使用图层合并它时，它只获取最后一条折线并显示它。

我想我在分层时犯了一些错误。有人可以推荐在传单中分层折线的正确方法吗？

这是发生这种情况的代码示例 -

      let newColour = this.returnMapColor(moment(startDate).day());
      
      var layerGroups = {}
      console.log("colour", newColour, startDate );
      let range = this.props.history.filter((v) => { return moment(v.time).format("YYYY-MM-DD")  == moment(startDate).format("YYYY-MM-DD") });
      startDate = moment(startDate).add(1, 'days');

      range.map((row)=> {
        positions.push([row.latitude,row.longitude,row.sp] )
      });

      if(this.props.map){
        const leafletMap = this.props.map.leafletElement;   

         this.hotlineLayer = L.layerGroup(L.polyline(positions, {color: newColour})).addTo(leafletMap);

      } 
      ++i;

Answer 1

一条折线至少需要两组lat, longs。你能指出你在代码中的什么地方形成 polylines 吗？

在您的代码中，range.map 操作只会导致创建持仓数组。因此，您的代码呈现单行。

如果您打算创建多条多段线并使用 LayerGroup 渲染它们，我建议采用以下行：

var latlngs1 = [
     [45.51, -122.68,0],
     [37.77, -122.43,1],
     [34.04, -118.2,2]
];

var latlngs2 = [
     [34.04, -118.2,2],
     [32.08, -110.5,2]
];

const polyline1 = L.polyline(latlngs1, {color: 'red'})

var polyline2 = L.polyline(latlngs2, {color: 'blue'})

var hotlineLayer = L.layerGroup([polyline1, polyline2]).addTo(map);

示例代码：https://jsfiddle.net/idhruvs/n75omjbd/32/

传单：使用图层在地图上一起显示动态多段线

Leaflet: showing dynamic polylines together on a map using layers

javascript

leaflet

reactjs

react-leaflet