Блог

Главная - Вопросы по программированию - стиль данных geojson по порядку свойств (листовка)

стиль данных geojson по порядку свойств (листовка)

#javascript #leaflet #styles #geojson

Вопрос:

Я попытался создать несколько маршрутов на основе маршрута расстояния(свойства geojson).
По возрастанию от самого короткого(красный, оранжевый, желтый,зеленый, синий) до самого длинного.
Поскольку расстояние маршрута не фиксировано на каком-либо значении, я не могу использовать этот стиль из интерактивного стиля cloropeth в листовке:

 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';
}

вот пример geojson (список координат вырезан):

 {"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"}}]}

Кто — нибудь знает, как стилизовать по порядку свойств? не от точного значения

Комментарии:

1. Пожалуйста, укажите, что вы пытаетесь заказать. Если это массив, вы можете отсортировать его по значению и присвоить каждому из них цвет.

2. понял, уже отредактировано. я не знаю, массив это или нет.. так как в листовке используется такая переменная Feature.properties.distance. , как я назначаю цвет по порядку?

Ответ №1:

Вы можете использовать Array.prototype.sort для сортировки элементов.

 // 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);

Комментарии:

1. @astaga Это сработало?

2. работайте правильно, добавьте небольшое изменение :расположение атрибута цвета features.color … <br> я использую <br> feature.properties.color , так что я не буду находиться внутри свойств

3. и я добавляю этот код в стиль function styleroute(Feature) {return {color: Feature.properties.color,};} shortest_path = L.geoJSON(result,{style: styleroute}).addTo(mymap);

Ответ №2:

Вы можете передать функцию style свойству в параметрах 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);

Вот рабочая скрипка: https://jsfiddle.net/7eh1bajL/

(Я использовал ваш GeoJSON, но изменил значения расстояний, чтобы вы могли видеть, как применяются разные цвета)

Метки: