Código de cor de uma polilinha do folheto com base em valores adicionais, por exemplo, altitude, velocidade,

Eu gostaria de desenhar uma pista GPX em um mapa do Leaflet. A polilinha não deve ter apenas uma cor, mas eu gostaria de mostrar certos valores como altitude, velocidade, frequência cardíaca, temperatura, cadência, inclinação codificada por cores. Obviamente, apenas um valor pode ser visualizado de uma só vez.

Os valores seriam armazenados junto com L.LatLng, por exemplo, em um meta: {ele: 298, hr: 155}objeto.

Sou novo no Leaflet e estou especialmente preocupado em encontrar uma maneira eficiente de fazer isso. O primeiro que veio à mente foi criar centenas ou milhares de polilinhas, cada uma com uma cor especial. Mas isso parece muito ganancioso em relação à memória e à CPU.

Alguma ideia?

Um exemplo do que quero dizer pode ser visto aqui

Converta sua trilha GPX em um GeoJSON com QGIS.

Digamos que seu GeoJSON tenha esta aparência. O GeoJSON tem um atributo elevationcom o valor da elevação.

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

Adicione o seu GeoJSON com o seguinte código ao seu mapa de folhetos. Use uma função para estilizar seu arquivo. O "color"elemento chama a função get colore transmite o elevationvalor do seu recurso como um parâmetro.

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

A função getColorretorna a cor com base no valor da elevação.

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

Fiz um JSFiddle com o exemplo GeoJSON e as funções descritas acima: http://jsfiddle.net/2VY5z/1/

Eu criei um pequeno plugin para o Leaflet: Leaflet.MultiOptionsPolyline .

Aqui está uma captura de tela da página de demonstração :

Atualmente, está faltando documentação, mas a página de demonstração está vinculada ao código-fonte, que deve ser bastante auto-explicativo.

Seus comentários são bem-vindos (crie um problema no GitHub ou comente esta resposta se você não tiver uma conta no GitHub).

Parece que esse é o tópico antigo, mas espero que alguém ache isso útil.

Um plugin do Leaflet para desenhar gradientes coloridos ao longo de polilinhas. https://github.com/iosphere/Leaflet.hotline/