Mapbox-gl-在 LineString 上绘制数据驱动样式答案

【问题标题】：mapbox-gl-draw data driven style on LineStringMapbox-gl-在 LineString 上绘制数据驱动样式
【发布时间】：2022-01-05 08:39:09
【问题描述】：

我使用 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）在多边形上设置线条颜色，它工作正常！

有什么想法吗？

【问题讨论】：

标签： mapbox mapbox-gl-js mapbox-gl mapbox-gl-draw

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

【讨论】：

我使用自定义模式 DrawBezierCurve 来获得带有曲线段的普通特征。此模式使用填充颜色创建封闭的线串要素。我想定制它。
顺便说一句，我尝试使用匹配运算符自定义线条颜色。它不再起作用了。始终使用默认值
我使用了上面的配置，效果很好。我在巴黎市中心有漂亮的绿线！

【解决方案2】：

我只是想出了怎么做，我把答案放在这里，以防其他人和我犯同样的错误。

我误解了在数据驱动样式中使用我自己的属性的 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_。

【讨论】：