如何为使用 mapbox-gl draw 绘制的单个多边形着色？答案

【问题标题】：How to color individual polygons drawn with mapbox-gl draw?如何为使用 mapbox-gl draw 绘制的单个多边形着色？
【发布时间】：2018-07-12 10:23:57
【问题描述】：

我正在阅读 a GeoJSON file 并使用 draw.set(geoJSON) 将多边形（和其他东西）导入 mapbox-gl draw。如何通过要素属性中的属性为单个多边形着色。示例：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      //"id": "the most unique id in the world",
      "properties": {
        "class_id": 1
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              79.30961608886719,
              61.57192958204744
            ],
            [
              79.34309005737303,
              61.57192958204744
            ],
            [
              79.34309005737303,
              61.57871162332267
            ],
            [
              79.30961608886719,
              61.57871162332267
            ],
            [
              79.30961608886719,
              61.57192958204744
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "class_id": 2
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              79.35201644897461,
              61.58271478278019
            ],
            [
              79.35115814208984,
              61.573972521656835
            ],
            [
              79.38188552856444,
              61.57192958204744
            ],
            [
              79.35201644897461,
              61.58271478278019
            ]
          ]
        ]
      }
    },
    }

我们的想法是我们将class_id = 1 为红色，class_id = 2 为蓝色，class_id = 3 为绿色的特征着色。我们如何做到这一点？

【问题讨论】：

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

【解决方案1】：

对于a feature will be available for styling 的属性，您需要将userProperties 设置为true。并使用前缀user。

并使用case expression：

var Draw = new MapboxDraw({
  userProperties: true,
  styles: [{
      'id': 'gl-draw-polygon-fill-inactive',
      'type': 'fill',
      'filter': ['all', ['==', 'active', 'false'],
        ['==', '$type', 'Polygon'],
        ['!=', 'mode', 'static']
      ],
      'paint': {
        'fill-color': [
          "case", 
          ['==', ['get', "user_class_id"], 1], "#00ff00", 
          ['==', ['get', "user_class_id"], 2], "#0000ff",
          '#ff0000'
        ],
        'fill-outline-color': '#3bb2d0',
        'fill-opacity': 0.5
      }
    }...

[http://jsfiddle.net/5Lotf4ka/]

【讨论】：

谢谢！做到了。