基于属性文本值的 Mapbox GL 样式线条颜色

Question

我正在尝试使用 react-map-gl 根据特征属性为单个 GeoJSON 源设置不同线条颜色的样式，但我找不到设置线条颜色的方法以一种聪明的方式。

最重要的是，我很想根据特征属性值将数据集上的函数应用于 return 我自己选择的颜色，但到目前为止我还没有找到关于它的任何事情。如果你知道，请指点我的方向:)

如果我有以下 GeoJSON:

{
  "type": "FeatureCollection",
  "name": "lineData",
  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
  "features": [
    { "type": "Feature", "properties": { "Need": "Urgent" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 10.653823175868171, 59.676506860589157 ], [ 10.652881996887283, 59.675443989456632 ] ] ] } },
    { "type": "Feature", "properties": { "Need": "Starting" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 10.658536710768077, 59.680279341285896 ], [ 10.65787427600862, 59.680222775937636 ] ] ] } },
    { "type": "Feature", "properties": { "Need": "Medium" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 10.653224904719789, 59.67859470385492 ], [ 10.653201052045171, 59.678557551379008 ] ] ] } },
  ]
}

我希望能够根据属性“需要”用不同的线条颜色设置此源数据的样式。比如说，紧急变成红色，中等变成黄色，开始变成绿色。

我在 mapbox 上读到了有关样式表达式的内容，我相信“特征状态”是解决这个问题的关键，但我无法理解如何从特征转换颜色。

如果在渲染中是这样的：

<Source id="my-data" type="geojson" data={TheDataFileWithSomeData}>
  <Layer {...layerStyleTheLines } />
</Source>

然后我想要一个像这样的图层样式（不起作用）：

const layerStyleTheLines = {
  id: 'style_it_to_red',
  type: 'line',
  paint: {
    'line-color': [
      [["==", ["feature-state", "Need"], "Urgent"],"red"],
      [["==", ["feature-state", "Need"], "Medium"],"yellow"],
      [["==", ["feature-state", "Need"], "Starting"],"green"]
    ],
    'line-width': 3,
  }
};

感谢您的帮助！

Answer 1

I've read about styling expressions at mapbox, and I believe the "feature-state" is key to solving this, but I cant wrap my head around how to get the color converted from a feature.

只有 feature-state 如果您打算动态操作要素属性，我认为您不是。

您可能只需要常规的数据驱动样式：

const layerStyleTheLines = {
  id: 'style_it_to_red',
  type: 'line',
  paint: {
    'line-color': [
      'match', ['get','Need'],
      'Urgent', 'red',
      'Medium', 'yellow',
      'Starting','green',
      'black'
    ],
    'line-width': 3,
  }
};

基于属性文本值的 Mapbox GL 样式线条颜色

Mapbox GL style line color based on property text value

mapbox

mapbox-gl-js

react-map-gl

基于 属性 文本值的 Mapbox GL 样式线条颜色

Mapbox GL style line color based on property text value

mapbox

mapbox-gl-js

react-map-gl

基于属性文本值的 Mapbox GL 样式线条颜色