Koduj kolorami polilinię Ulotki w oparciu o dodatkowe wartości, np. Wysokość, prędkość,

Chciałbym narysować tor GPX na mapie Ulotki. Polilinia nie powinna mieć tylko jednego koloru, ale chciałbym pokazać pewne wartości, takie jak wysokość, prędkość, tętno, temperatura, kadencja, nachylenie oznaczone kolorami. Oczywiście można jednocześnie wyświetlić tylko jedną wartość.

Wartości byłyby przechowywane razem L.LatLngnp. W meta: {ele: 298, hr: 155}obiekcie.

Jestem nowy w Ulotce i szczególnie martwię się o znalezienie skutecznego sposobu, aby to zrobić. Najpierw przyszło mi do głowy stworzyć setki lub tysiące polilinii o specjalnym kolorze. Ale to brzmi bardzo chciwie w odniesieniu do pamięci i procesora.

Jakieś pomysły?

Przykład, co mam na myśli, można obejrzeć tutaj

Konwertuj swoją ścieżkę GPX na GeoJSON za pomocą QGIS.

Powiedzmy, że Twój GeoJSON wygląda tak. GeoJSON ma atrybut elevationo wartości rzędnej.

        var yourGeoJSON = [ 
{ "type": "Feature", "properties": { "id": 2, "elevation": 50 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.836395263671875, 47.75317468890147 ], [ 11.865234375, 47.73193447949174 ] ] } },
{ "type": "Feature", "properties": { "id": 1, "elevation": 750 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.865234375,47.73193447949174 ], [ 11.881027221679688, 47.700520033704954 ] ] } },
{ "type": "Feature", "properties": { "id": 0, "elevation": 1700 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.881027221679688, 47.700520033704954 ], [ 11.923599243164062, 47.706527200903395 ] ] } },
{ "type": "Feature", "properties": { "id": 0, "elevation": 3000 }, "geometry": { "type": "LineString", "coordinates": [ [ 11.923599243164062, 47.706527200903395 ], [ 11.881027221679688, 47.700520033704954 ], ] } }
];

Dodaj swój GeoJSON z następującym kodem do mapy ulotki. Użyj funkcji do stylizowania pliku. "color"Elementem wywołuje funkcję get colori przechodzi na elevationwartości swojej funkcji jako parametr.

L.geoJson(yourGeoJSON, {
    style: function (feature) {
        return {
         "color": getColor(feature.properties.elevation),
         "opacity": 1,
        }}
}).addTo(map);

Funkcja getColorzwraca kolor na podstawie wartości rzędnej.

function getColor(x) {
  return x < 500     ?    '#bd0026':
         x < 1000     ?   '#f03b20':
         x < 1500     ?   '#fd8d3c':
         x < 2000     ?   '#fecc5c':
                          '#ffffb2' ;
};

Zrobiłem JSFiddle z przykładowym GeoJSON i funkcjami opisanymi powyżej: http://jsfiddle.net/2VY5z/1/

Stworzyłem małą wtyczkę do Leaflet: Leaflet.MultiOptionsPolyline .

Oto zrzut ekranu ze strony demonstracyjnej :

Obecnie brakuje dokumentacji, ale strona demo prowadzi do kodu źródłowego, co powinno być dość oczywiste.

Twoja opinia jest mile widziana (stwórz problem na GitHub lub skomentuj tę odpowiedź, jeśli nie masz konta GitHub).

Wygląda na to, że jest to stary wątek, ale mam nadzieję, że ktoś uzna to za pomocne.

Wtyczka Leaflet do rysowania kolorowych gradientów wzdłuż polilinii. https://github.com/iosphere/Leaflet.hotline/