Колір коду поліліній листівки на основі додаткових значень, наприклад висоти, швидкості,

Я хотів би намалювати GPX-трек на карті Leaflet. У полілінії не повинно бути лише одного кольору, але я хотів би показати певні значення, такі як висота, швидкість, частота серцевих скорочень, температура, каденція, кольоровий нахил. Звичайно, одразу можна візуалізувати лише одне значення.

Ці значення зберігатимуться разом із L.LatLng, наприклад, в meta: {ele: 298, hr: 155}об'єкті.

Я новачок у Leaflet і особливо стурбований пошуком ефективного способу зробити це. Перше, що прийшло в голову, - створити сотні чи тисячі поліліній, кожна з яких має особливий колір. Але це звучить дуже жадібно щодо пам'яті та процесора.

Будь-які ідеї?

Приклад того, що я маю на увазі, можна переглянути тут

Перетворіть ваш трек GPX в GeoJSON за допомогою QGIS.

Скажімо, ваш GeoJSON виглядає так. GeoJSON має атрибут elevationзі значенням висоти.

        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 із наступним кодом на карту листівки. Використовуйте функцію для стилювання файлу. "color"Елемент викликає функцію get colorі передає на elevationвартості вашої функції в якості параметра.

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

Функція getColorповертає колір на основі значення висоти.

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

Я зробив JSFiddle із зразком GeoJSON та описаними вище функціями: http://jsfiddle.net/2VY5z/1/

Я створив невеликий плагін для Leaflet: Leaflet.MultiOptionsPolyline .

Ось скріншот із демонстраційної сторінки :

Наразі не вистачає документації, але демонстраційна сторінка посилається на вихідний код, який повинен бути цілком зрозумілим.

Ваш відгук вітається (створіть проблему на GitHub або прокоментуйте цю відповідь, якщо у вас немає облікового запису GitHub).

Схоже, це стара тема, але, сподіваємось, хтось вважає це корисним.

Плагін Leaflet для малювання кольорових градієнтів уздовж поліліній. https://github.com/iosphere/Leaflet.hotline/