如何为使用mapbox gl绘制的单个多边形着色

Question

我正在读取一个GeoJSON文件，并使用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的特征着色绿色。我们该怎么做？

Answer 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/]