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

13

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ć tutajZrzut ekranu MyTourbook

leaflet hgoebl
źródło
Czy możesz podać przykładowy plik. W ten sposób może być łatwiej pomóc.
ustroetz
Oto przykład: track-and-find.me/gpx-viewer/data/kampenwand.gpx
hgoebl

Odpowiedzi:

7

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/

ustroetz
źródło
1
Dziękuję, to możliwe rozwiązanie. Zrobiłem trochę jsfiddle.net/2VY5z/3 i zauważyłem, że wewnętrznie będzie utworzona warstwa dla każdej funkcji. W przypadku długich ścieżek GPX przypuszczam, że może to być dość przytłaczające. Dlatego poczekam kilka godzin na jeszcze lepszą odpowiedź, aż uzyskasz ocenę „poprawną”.
hgoebl
1
Zgadzam się z @hgoebl, segmentacja jednej funkcji źródłowej na tysiąc małych fragmentów wydaje się nie być dobra pod względem wydajności. Myślę, że potrzebujemy specjalnej klasy, pochodzącej z L.Path o wyżej wspomnianej funkcjonalności. Może ktoś już to zrobił? ;)
unibasil
Obecnie opracowuję wtyczkę Layer, która jest nieco bardziej wydajna. Ale obawiam się, że muszę tworzyć co najmniej liczbę <path>elementów tak często, jak zmienia się kolor. Niestety nie ma możliwości zmiany koloru na ścieżce: M184 398L187 395C#00FF00 L183 399byłoby to konieczne (C = kolor).
hgoebl
7

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

Oto zrzut ekranu ze strony demonstracyjnej :

przykład 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).

hgoebl
źródło
2

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/ próbny

Dzmitry Atkayey
źródło
1
Wydaje się to pomocne, ale z reguły odpowiedź powinna zawierać więcej niż link. Nawet jeśli wszystko, co robisz, to podsumowanie tego, co znajduje się po drugiej stronie linku, inny użytkownik powinien być w stanie zrozumieć, czym jest to rozwiązanie i dlaczego odpowiednio odnosi się do pierwotnego pytania, bez konieczności opuszczania tej strony.
JoshC
@JoshC, dzięki, mam nadzieję, że to zrozumiały opis po aktualizacji, jeśli weźmiesz pod uwagę to, że obraz wiele wyjaśnia
Dzmitry Atkayey