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

【问题标题】：geojson data style by order of properties (leaflet)按属性顺序排列的 geojson 数据样式（传单）
【发布时间】：2021-09-20 06:01:00
【问题描述】：

我尝试根据距离路线（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"}}]}

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

【问题讨论】：

请附上您要订购的商品。如果它是一个数组，您可以按值对其进行排序并为每个数组分配一种颜色。
知道了，已经编辑过了。我不知道它是不是一个数组。因为传单使用这种变量Feature.properties.distance.我如何按顺序分配颜色？

标签： javascript leaflet styles geojson

【解决方案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);

【讨论】：

@astaga 成功了吗？
正常工作，添加一点改变：颜色属性的位置features.color...
我使用feature.properties.color所以我会在属性里面
我将此代码添加到样式function styleroute(Feature) {return {color: Feature.properties.color,};} shortest_path = L.geoJSON(result,{style: styleroute}).addTo(mymap);

【解决方案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);

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

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

【讨论】：