按属性顺序排列的 geojson 数据样式（传单）

Question

我尝试根据距离路线（geojson 属性）设置多条路线的样式。
从最短的（红、橙、黄、绿、蓝）到最长的
由于路线的距离不固定在某个值上，我不能使用 leaflet interactive cloropeth styling:

中的这种样式

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

有人知道如何根据属性的顺序设置样式吗？不是来自确切的值

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

Answer 2

您可以在 GeoJSON 选项中将函数传递给 style 属性。

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

这是一个有效的 fiddle：https://jsfiddle.net/7eh1bajL/

（我使用了您的 GeoJSON，但更改了距离值，以便您可以看到应用了不同的颜色）

按属性顺序排列的 geojson 数据样式（传单）

geojson data style by order of properties (leaflet)

javascript

styles

geojson

leaflet