Codifique con colores una polilínea de Folleto basada en valores adicionales, por ejemplo. altitud, velocidad,

13

Me gustaría dibujar una pista GPX en un mapa de folletos. La polilínea no debería tener un solo color, pero me gustaría mostrar ciertos valores como la altitud, la velocidad, la frecuencia cardíaca, la temperatura, la cadencia, la pendiente codificada por colores. Por supuesto, solo se puede visualizar un valor a la vez.

Los valores se almacenarían junto con L.LatLng , por ejemplo. en un objeto meta: {ele: 298, hr: 155} .

Soy nuevo en Leaflet y estoy especialmente preocupado por encontrar una forma eficiente de hacerlo. Lo primero que se me ocurrió fue crear cientos o miles de polilíneas, cada una con un color especial. Pero esto suena muy codicioso con respecto a la memoria y la CPU.

¿Alguna idea?

Un ejemplo de lo que quiero decir se puede ver aquí

    
pregunta hgoebl 19.03.2014 - 13:26

3 respuestas

7

Convierta su pista GPX a GeoJSON con QGIS.

Digamos que tu GeoJSON se ve así. El GeoJSON tiene un atributo elevation con el valor de la elevación.

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


Agregue su GeoJSON con el siguiente código a su mapa de folletos. Usa una función para estilizar tu archivo. El elemento "color" llama a la función get color y pasa el valor elevation de su función como parámetro.

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

La función getColor devuelve el color según el valor de elevación.

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

Hice un JSFiddle con el ejemplo GeoJSON y las funciones descritas anteriormente: enlace

    
respondido por el ustroetz 19.03.2014 - 14:45
6

He creado un pequeño complemento para el Folleto: Leaflet.MultiOptionsPolyline .

Aquí hay una captura de pantalla de la página de demostración :

Actualmente falta documentación, pero la página de demostración enlaza con el código fuente, que debería explicarse por sí mismo.

Sus comentarios son bienvenidos (cree un problema en GitHub o comente esta respuesta si no tiene una cuenta de GitHub).

    
respondido por el hgoebl 26.03.2014 - 12:34
1

Parece que este es el hilo anterior, pero espero que alguien lo encuentre útil.

Un complemento de folleto para dibujar gradientes de colores a lo largo de las polilíneas. enlace

    
respondido por el Dzmitry Atkayey 18.06.2018 - 15:43

Lea otras preguntas en las etiquetas