时间戳

首页 > 解决方案 > 传单：使用图层在地图上一起显示动态折线

javascript - 传单：使用图层在地图上一起显示动态折线

问题描述

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

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

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

      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;

标签： javascriptreactjsleafletreact-leaflet

解决方案

一条折线至少需要两组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/

推荐阅读