Rakım, hız,

Bir broşür haritasında GPX izi çizmek istiyorum. Çoklu çizginin yalnızca bir rengi olmamalıdır, ancak rakım, hız, kalp atış hızı, sıcaklık, kadans, eğim renk kodlu gibi belirli değerleri göstermek istiyorum. Elbette aynı anda yalnızca bir değer görüntülenebilir.

Değerler L.LatLng, örneğin bir meta: {ele: 298, hr: 155}nesnede birlikte depolanır .

Leaflet'te yeniyim ve özellikle bunu yapmanın etkili bir yolunu bulmakla ilgileniyorum. İlk akla gelen, her biri özel bir renkle yüzlerce veya binlerce çoklu çizgi oluşturmaktı. Ancak bu bellek ve işlemci açısından çok açgözlü geliyor.

Herhangi bir fikir?

Demek istediğim bir örnek burada görülebilir

GPX parçanızı QGIS ile bir GeoJSON'a dönüştürün.

Diyelim ki GeoJSON'unuz böyle görünüyor. GeoJSON, elevationyükseklik değeri olan bir özniteliğe sahiptir.

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

GeoJSON'unuzu aşağıdaki kodla birlikte broşür haritanıza ekleyin. Dosyanıza stil eklemek için bir işlev kullanın. "color"Elemanı işlevini çağırır get colorve geçer elevationparametre olarak özelliğin değeri.

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

İşlev getColor, yükseklik değerine göre rengi döndürür.

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

Örnek GeoJSON ve yukarıda açıklanan fonksiyonları ile bir JSFiddle yaptım: http://jsfiddle.net/2VY5z/1/

Leaflet: Leaflet.MultiOptionsPolyline için küçük bir eklenti oluşturdum .

Demo sayfasından bir ekran görüntüsü :

Şu anda dokümantasyon yok, ancak demo sayfası oldukça açıklayıcı olması gereken kaynak koduna bağlanıyor.

Geri bildiriminiz hoş geldiniz (GitHub'da bir sorun oluşturun veya GitHub hesabınız yoksa bu yanıtı yorumlayın).

Bu eski iş parçacığı gibi görünüyor, ama umarım birisi bunu yararlı bulur.

Çoklu çizgiler boyunca renkli gradyanlar çizmek için bir broşür eklentisi. https://github.com/iosphere/Leaflet.hotline/