0

我使用 Mapbox GL Draw，我想使用数据驱动自定义 LineString Feature 的填充颜色。我有一个集合userProperties: true，我有一个以 user_ 为前缀的属性。

这是我的风格配置：

 {
    id: "gl-draw-linestring-fill-inactive",
    type: "fill",
    filter: ["all", ["==", "active", "false"], ["==", "$type", "LineString"],["!=", "mode", "static"],],
    paint: {
      "fill-color": [
        "case",
        ["==", ["get", "user_type"], "meetingRoom"],
        "#00ff00",
        ["==", ["get", "user_type"], "notUsed"],
        "#00ff00",
        "#ff0000",
      ],
      "fill-outline-color": "#3bb2d0",
      "fill-opacity": 0.4,
    },
  }

和我的特点：

{
      "type": "Feature",
      "id": "ROOM-floor-1-1",
      "properties": {
        "parentId": "floor-1",

        "user_type": "notUsed"
      },
      "geometry": {
        "coordinates": [
          [2.334699793548168, 48.85506145052912],
          [2.3334337908935083, 48.85340956808176],
          [2.3360301692199243, 48.85314130852265],
          [2.3368884761040363, 48.85547088304844],
          [2.3368884761040363, 48.85547088304844],
          [2.334699793548168, 48.85506145052912]
        ],
        "type": "LineString"
      }
    }

功能始终使用默认值 (#ff0000) 绘制。在这个例子中它应该是#00ff00。在同一个应用程序中，我使用相同的属性（user_type）在多边形上设置线条颜色，它工作正常！

任何想法 ？

4

2 回答 2

1

我只是想出了如何去做，我把答案放在这里，以防其他人犯和我一样的错误。

我误解了在数据驱动样式中使用我自己的属性的 mapbox 文档。

如果你想使用myProp从你的特性中命名的属性，你必须在它前面加上前缀，user_但只能在样式规则中。

例如：

{
      "type": "Feature",
      "id": "1",
      "properties": {
        "myProp": "myValue"
      },
      "geometry": {
        "coordinates": [...],
        "type": "LineString"
      }
    }

和：

{
    id: 'my-rule',
    type: 'line',
    filter: ['all', ['==', 'active', 'false'], ['==', '$type', 'LineString'],['!=', 'mode', 'static']],
    paint: {
      'line-color': [
         'match', ['get', 'user_myProp'], // get the property
           'myValue', '#00ff00',
           '#ff0000']
    },
  }

user_我的错误是在样式规则和特征属性中添加前缀。

于 2022-01-15T12:36:06.677 回答
1

我真的不明白，为什么您在样式配置中使用“类型：填充”作为线串。您应该使用此地图框示例https://docs.mapbox.com/mapbox-gl-js/example/data-driven-lines/中所示的特定于行的样式属性

此外，由于您在数据驱动样式中引用属性，因此无需使用“案例”。你可以简单地使用“匹配”

所以宁愿是：

{
    id: 'gl-draw-linestring-fill-inactive',
    type: 'line',
    filter: ['all', ['==', 'active', 'false'], ['==', '$type', 'LineString'],['!=', 'mode', 'static']],
    paint: {
      'line-color': [
         'match', ['get', 'user_type'], // get the property
           'meetingRoom', '#00ff00',
           'notUsed', '#00ff00',
           '#ff0000'],
      'line-width': 3,
    },
  }

顺便说一句：特征级别的 id 应该是整数或字符串，可以转换为整数： https ://github.com/mapbox/mapbox-gl-js/issues/7632

于 2022-01-05T14:42:15.943 回答