Codifique por color 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 folleto. La polilínea no debe tener solo un color, pero me gustaría mostrar ciertos valores como altitud, velocidad, frecuencia cardíaca, temperatura, cadencia, 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 meta: {ele: 298, hr: 155}objeto.

Soy nuevo en Leaflet y estoy especialmente preocupado por encontrar una manera eficiente de hacer esto. 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.

¿Algunas ideas?

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

hgoebl
fuente
¿Puede proporcionar un archivo de muestra? De esta manera, podría ser más fácil ayudar.
ustroetz

Respuestas:

7

Convierta su pista GPX a GeoJSON con QGIS.

Digamos que su GeoJSON se ve así. GeoJSON tiene un atributo elevationcon 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 folleto. Use una función para diseñar su archivo. El "color"elemento llama a la función get colory pasa el elevationvalor de su característica como parámetro.

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

La función getColordevuelve el color en función del 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: http://jsfiddle.net/2VY5z/1/

ustroetz
fuente
1
Gracias, esa es una posible solución. Jugué un poco jsfiddle.net/2VY5z/3 y observé que internamente habrá una capa creada para cada característica. En el caso de pistas GPX largas, supongo que esto puede ser bastante abrumador. Por lo tanto, esperaré unas horas para obtener una respuesta aún mejor hasta que obtenga la marca "correcta".
hgoebl
1
Estoy de acuerdo con @hgoebl, segmentar una característica de fuente en miles de pequeños fragmentos parece que no es bueno en cuanto a rendimiento. Creo que necesitamos una clase especial, derivada de L.Path con la funcionalidad mencionada anteriormente. Tal vez alguien ya lo hizo? ;)
unibasil
Actualmente estoy desarrollando un complemento de capa que es un poco más eficiente. Pero me temo que tengo que crear al menos el número de <path>elementos con la frecuencia que cambia el color. Lamentablemente, no hay forma de cambiar el color en una ruta: M184 398L187 395C#00FF00 L183 399sería necesario para eso (C = color).
hgoebl
7

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

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

ejemplo de la página de demostración

Actualmente carece de documentación, pero la página de demostración enlaza con el código fuente, lo 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).

hgoebl
fuente
2

Parece que este es el hilo viejo, pero con suerte, alguien lo encuentra útil.

Un complemento de folleto para dibujar gradientes de colores a lo largo de polilíneas. https://github.com/iosphere/Leaflet.hotline/ manifestación

Dzmitry Atkayey
fuente
1
Parece ser útil, pero como regla general, una respuesta debe contener más que solo un enlace. Incluso si todo lo que hace es dar un resumen de lo que está al otro lado del enlace, otro usuario debería poder entender cuál es esta solución y por qué aborda adecuadamente la pregunta original, sin que dicho usuario tenga que abandonar esta página.
JoshC
@JoshC, gracias, espero que sea la descripción comprensible después de la actualización si tienes en cuenta que la imagen explica mucho
Dzmitry Atkayey