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í
Respuestas:
Convierta su pista GPX a GeoJSON con QGIS.
Digamos que su GeoJSON se ve así. GeoJSON tiene un atributo
elevation
con el valor de la elevación.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ónget color
y pasa elelevation
valor de su característica como parámetro.La función
getColor
devuelve el color en función del valor de elevación.Hice un JSFiddle con el ejemplo GeoJSON y las funciones descritas anteriormente: http://jsfiddle.net/2VY5z/1/
fuente
<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 399
sería necesario para eso (C = color).He creado un pequeño complemento para Leaflet: Leaflet.MultiOptionsPolyline .
Aquí hay una captura de pantalla 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).
fuente
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/
fuente