Código de Color de un Prospecto que polilínea se base en otros valores, como la altitud, la velocidad,la

Question

Me gustaría dibujar un GPX-pista en un Folleto con un mapa. La polilínea no debería haber un solo color, pero me gustaría mostrar ciertos valores como la altitud, la velocidad, el ritmo cardíaco, la temperatura, la cadencia, la pendiente de color codificado. Por supuesto, sólo uno de los valores se pueden visualizar a la vez.

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

Soy nuevo en el Prospecto y especialmente preocupadas por encontrar una manera eficaz de hacer esto. La primera que me vino a la mente fue la de crear cientos o miles de polilíneas cada uno con un color especial. Pero esto suena muy codicioso con respecto a la memoria y la cpu.

Alguna idea?

Un ejemplo de lo que digo se puede ver aquí

Answer 1

Convertir un archivo GPX a un GeoJSON con QGIS.

Digamos que su GeoJSON se parece a esto. 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 ], ] } }
];

Añade tu GeoJSON con el siguiente código a tu prospecto mapa. Utilizar una función para el estilo de su archivo. El "color" elemento llama a la función get color , y se la pasa en la elevation del valor 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 basado en 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 la muestra GeoJSON y las funciones descritas anteriormente: http://jsfiddle.net/2VY5z/1/

Answer 2

He creado un pequeño plugin para Folleto: Folleto.MultiOptionsPolyline.

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

En la actualidad se carece de documentación, pero la demo de la página de enlaces al código fuente que debe ser bastante auto-explicativo.

Sus comentarios son bienvenidos (crear un problema en GitHub o comentario a esta respuesta si usted no tiene una cuenta de GitHub).