Цветовая кодировка полилинии Leaflet на основе дополнительных значений, например высоты, скорости,

Я хотел бы нарисовать 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/