mapbox gl在LineString上绘制数据驱动的样式

Question

我使用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(在Polygon上设置Line颜色，效果很好！

有什么想法吗？

Answer 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_。

Answer 2

我真的不明白，你为什么要使用"类型：填充；行字符串的样式配置中。您应该使用此地图框示例中所示的特定于线条的样式特性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