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

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 sini

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/

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

Ini screenshot 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).

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/