Брошюра: отображение динамических c полилиний вместе на карте с использованием слоев - PullRequest
Новая
       24

Брошюра: отображение динамических c полилиний вместе на карте с использованием слоев

0 голосов
/ 08 июля 2020

Я работаю над задачей показать все полилинии (разных цветов) на моей карте с помощью листовки. Я получаю широту и долготу всех своих динамических c полилиний с их цветами, но когда я объединяю их с помощью слоев, он просто берет последнюю полилинию и показывает ее.

Думаю, я ошибаюсь в наслоении. Может ли кто-нибудь порекомендовать правильный способ наложения полилиний в листовки?

Вот пример кода, в котором это происходит - 

      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;

1 Ответ

0 голосов
/ 08 июля 2020

Для полилинии требуется как минимум два набора 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/

...