Kode warna polyline Leaflet berdasarkan pada nilai tambahan, mis. Ketinggian, kecepatan,

13

Saya ingin menggambar jalur GPX pada peta Leaflet. Polyline seharusnya tidak hanya memiliki satu warna, tetapi saya ingin menunjukkan nilai-nilai tertentu seperti ketinggian, kecepatan, detak jantung, suhu, irama, kode warna kemiringan. Tentu saja hanya satu nilai yang dapat divisualisasikan sekaligus.

Nilai akan disimpan bersama dengan L.LatLng, misalnya dalam suatu meta: {ele: 298, hr: 155}objek.

Saya baru mengenal Leaflet dan terutama peduli tentang menemukan cara yang efisien untuk melakukan ini. Yang pertama terlintas di pikiran adalah membuat ratusan atau ribuan polyline masing-masing dengan warna khusus. Tapi ini terdengar serakah mengenai memori dan cpu.

Ada ide?

Contoh yang saya maksud bisa dilihat di siniTangkapan layar MyTourbook

leaflet hgoebl
sumber
Bisakah Anda memberikan file sampel. Dengan cara ini mungkin lebih mudah untuk membantu.
ustroetz
Berikut ini sebuah contoh: track-and-find.me/gpx-viewer/data/kampenwand.gpx
hgoebl

Jawaban:

7

Ubah trek GPX Anda menjadi GeoJSON dengan QGIS.

Katakanlah GeoJSON Anda terlihat seperti ini. GeoJSON memiliki atribut elevationdengan nilai ketinggian.

        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 ], ] } }
];


Tambahkan GeoJSON Anda dengan kode berikut ke peta selebaran Anda. Gunakan fungsi untuk menata file Anda. The "color"elemen memanggil fungsi get colordan melewati pada elevationnilai fitur Anda sebagai parameter.

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

Fungsi getColormengembalikan warna berdasarkan nilai ketinggian.

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

Saya membuat JSFiddle dengan sampel GeoJSON dan fungsi yang dijelaskan di atas: http://jsfiddle.net/2VY5z/1/

ustroetz
sumber
1
Terima kasih, itu solusi yang memungkinkan. Saya mengutak-atik jsfiddle.net/2VY5z/3 dan mengamati bahwa secara internal akan ada layer yang dibuat untuk setiap fitur. Dalam hal trek GPX yang panjang, saya kira ini bisa sangat luar biasa. Untuk itu saya akan menunggu beberapa jam untuk jawaban yang lebih baik sampai Anda mendapatkan nilai "benar".
hgoebl
1
Saya setuju dengan @hgoebl, untuk mensegmentasi fitur satu sumber ke dalam ribuan potongan kecil tampaknya tidak baik dalam hal kinerja. Saya pikir kita memerlukan kelas khusus, berasal dari L.Path dengan fungsi yang disebutkan di atas. Mungkin seseorang sudah berhasil? ;)
unibasil
Saat ini saya sedang mengembangkan plugin Layer yang sedikit lebih efisien. Tapi saya khawatir saya harus membuat setidaknya jumlah <path>elemen sesering warna berubah. Sayangnya tidak ada cara untuk mengubah warna di jalur: M184 398L187 395C#00FF00 L183 399akan diperlukan untuk itu (C = warna).
hgoebl
7

Saya telah membuat plugin kecil untuk Leaflet: Leaflet.MultiOptionsPolyline .

Ini screenshot dari halaman demo :

contoh dari halaman demo

Saat ini masih kurang dokumentasi, tetapi halaman demo terhubung ke kode sumber yang seharusnya cukup jelas.

Umpan balik Anda diterima (buat masalah pada GitHub atau komentar jawaban ini jika Anda tidak memiliki akun GitHub).

hgoebl
sumber
2

Sepertinya ini adalah utas lama, tetapi mudah-mudahan, seseorang menemukan ini bermanfaat.

Plugin Leaflet untuk menggambar gradien berwarna di sepanjang polyline. https://github.com/iosphere/Leaflet.hotline/ demo

Dzmitry Atkayey
sumber
1
Tampaknya memang bermanfaat, tetapi sebagai aturan umum, jawaban harus berisi lebih dari sekadar tautan. Sekalipun semua yang Anda lakukan adalah memberikan ringkasan tentang apa yang ada di sisi lain tautan, pengguna lain harus dapat memahami apa solusi ini dan mengapa solusi tersebut cukup menjawab pertanyaan awal, tanpa mengatakan pengguna harus meninggalkan halaman ini.
JoshC
@JoshC, terima kasih, semoga uraian ini dapat dimengerti setelah pembaruan jika Anda mengambil akun yang gambarnya banyak menjelaskan
Dzmitry Atkayey