Intenté diseñar varias rutas según la ruta de distancia (propiedades de geojson).
Ascendente del más corto (rojo, naranja, amarillo, verde, azul) al más largo.
Dado que la distancia de la ruta no se fija en algún valor, no puedo usar este estilo del estilo de cloropeth interactivo del folleto :
function getColor(d) { return d > 1000 ? '#800026' : d > 500 ? '#BD0026' : d > 200 ? '#E31A1C' : d > 100 ? '#FC4E2A' : d > 50 ? '#FD8D3C' : d > 20 ? '#FEB24C' : d > 10 ? '#FED976' : '#FFEDA0'; } aquí está el ejemplo de geojson (la lista de coordenadas está recortada):
{"type":"FeatureCollection","features":[ {"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2382587,-7.9579805],[110.2380463,-7.9581418]]]},"properties":{"distance":"3989.57671272009"}}, {"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2374145,-7.9593029],[110.2371966,-7.9598229]]]},"properties":{"distance":"2206.76527447351"}}, {"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2374145,-7.9593029],[110.2379765,-7.9594952]]]},"properties":{"distance":"2667.74036482918"}}]}¿Alguien sabe cómo diseñar desde el orden de las propiedades? no del valor exacto
Puede usar Array.prototype.sort para ordenar los elementos.
// input myVariable = {"type":"FeatureCollection","features":[ {"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2382587,-7.9579805],[110.2380463,-7.9581418]]]},"properties":{"distance":"3989.57671272009"}}, {"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2374145,-7.9593029],[110.2371966,-7.9598229]]]},"properties":{"distance":"2206.76527447351"}}, {"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2374145,-7.9593029],[110.2379765,-7.9594952]]]},"properties":{"distance":"2667.74036482918"}}]} // Sort by distance; highest distance will be first element // To sort as lowest first flip a and b myVariable.features.sort((a, b) => b.properties.distance - a.properties.distance); colors = ['#800026', '#BD0026', '#E31A1C', '#FC4E2A', '#FD8D3C', '#FEB24C', '#FED976', '#FFEDA0']; // Now you can get color using index // The next step depends on how you want to use color // For example adding color property to each item in myVariable.features myVariable.features.forEach((features, index) => { if (index < colors.length) features.color = colors[index]; else featurs.color = colors[colors.length - 1]; }); // Show the final output console.log(myVariable);Puede pasar una función a la propiedad de style en las opciones de GeoJSON.
function getColor(d) { return d > 1000 ? '#800026' : d > 500 ? '#BD0026' : d > 200 ? '#E31A1C' : d > 100 ? '#FC4E2A' : d > 50 ? '#FD8D3C' : d > 20 ? '#FEB24C' : d > 10 ? '#FED976' : '#FFEDA0'; } L.geoJSON(routes, { style: (feature) => { return {color: getColor(feature.properties.distance)}; } }).addTo(map);Aquí hay un violín que funciona: https://jsfiddle.net/7eh1bajL/
(He usado su GeoJSON pero cambié los valores de distancia para que pueda ver cómo se aplican diferentes colores)