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

13

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

Значения будут храниться вместе L.LatLng, например, в meta: {ele: 298, hr: 155}объекте.

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

Есть идеи?

Пример того, что я имею в виду, можно посмотреть здесьСкриншот MyTourbook

leaflet hgoebl
источник
Можете ли вы предоставить образец файла. Так легче помочь.
Устроец
Вот пример: track-and-find.me/gpx-viewer/data/kampenwand.gpx
hgoebl

Ответы:

7

Конвертируйте ваш трек 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/

ustroetz
источник
1
Спасибо, это возможное решение. Я немного поигрался с jsfiddle.net/2VY5z/3 и заметил, что внутри каждого слоя будет создан слой. В случае длинных треков GPX, я полагаю, это может быть довольно подавляющим. Поэтому я подожду несколько часов, чтобы получить лучший ответ, пока вы не получите «правильную» оценку.
hgoebl
1
Я согласен с @hgoebl: сегментировать одну исходную функцию на тысячу маленьких кусочков кажется не очень хорошим с точки зрения производительности. Я думаю, что нам нужен специальный класс, производный от L.Path с вышеупомянутой функциональностью. Может быть, кто-то уже сделал это? ;)
unibasil
В настоящее время я разрабатываю плагин Layer, который немного более эффективен. Но я боюсь, что мне нужно создавать как минимум количество <path>элементов так часто, как переключаются цвета. К сожалению, нет никакого способа изменить цвет в пути: это M184 398L187 395C#00FF00 L183 399было бы необходимо для этого (C = цвет).
hgoebl
7

Я создал небольшой плагин для Leaflet: Leaflet.MultiOptionsPolyline .

Вот скриншот с демо-страницы :

пример с демо-страницы

В настоящее время не хватает документации, но на демонстрационной странице есть ссылки на исходный код, который должен быть понятен.

Ваши отзывы приветствуются (создайте проблему на GitHub или прокомментируйте этот ответ, если у вас нет учетной записи GitHub).

hgoebl
источник
2

Выглядит так, как будто это старая ветка, но, надеюсь, кто-то найдет это полезным.

Плагин Leaflet для рисования цветных градиентов вдоль полилиний. https://github.com/iosphere/Leaflet.hotline/ демонстрация

Дмитрий Аткаей
источник
1
Это кажется полезным, но, как правило, ответ должен содержать больше, чем просто ссылку. Даже если все, что вы делаете, это дает краткое изложение того, что находится на другой стороне ссылки, другой пользователь должен иметь возможность понять, что это за решение и почему оно адекватно отвечает на исходный вопрос, без того , чтобы указанный пользователь покинул эту страницу.
JoshC
@JoshC, спасибо, надеюсь, это понятное описание после обновления, если принять во внимание, что изображение многое объясняет
Дмитрий Аткаей