Mapbox GL JS：如何使用 JavaScript 和表达式来更改图层布局？

Question

我正在使用 Overpass 获取 OSM 数据，并在 Mapbox 中显示了几个 'categories' 中最近的兴趣点。我将 OSM 数据转换为 GeoJSON 层，并将其作为符号层添加到 Mapbox，数据中的每个点都有一个标记图像。结果如下所示：

我想将每个标记下方显示的文本更改为我用来对数据进行分类的变量以外的内容。我的第一个想法是使用像这样的 JS 对象：

translate = {
    'water': 'Waterway',
    'city': 'City Center',
    'school': 'Elementary School',
    ..etc
}

然后运行每个名称通过翻译[venue_type]。但这似乎并不那么容易。标记添加为图层，如下所示：

map.loadImage(
    './img/map_marker3.png',
    (error, image) => {
        if (error) throw error;
        if (!map.hasImage('custom-marker')) {
            map.addImage('custom-marker', image);
        }
        map.addSource('venues',
        {
            'type': 'geojson',
            'data': data
        });
        map.addLayer({
            "id": "venues",
            "type": "symbol",
            "source": "venues",
            'layout': {
                'visibility': 'none',
                'icon-image': 'custom-marker',
                'icon-size': 1,
                'icon-anchor': 'bottom',
                'icon-allow-overlap': true,
                // get the venue_type from the feature's venue_type property
                'text-field': ['get','venue_type'], 
                'text-allow-overlap': true,
                'text-font': [
                    'Open Sans Semibold',
                    'Arial Unicode MS Bold'
                ],
                'text-offset': [0, 0.5],
                'text-anchor': 'top'
            }
        });
        callback();
    });

具有以下结构的 GeoJson FeatureCollection：

"type": "Feature",
"properties": {
    "dist": 0.25566043226822727,
    "index": 758,
    "location": 21.218387011937942,
    "name": "Östersjön",
    "venue_type": "coastline"
},
"geometry": {
    "type": "Point",
    "coordinates": [
        18.3434769,
        59.4563257
    ]
}

负责在标记下方设置文本的行如下，它使用 Mapbox GL JS 表达式从 GeoJSON 对象的属性中获取字段 'venue_type'。

'text-field': ['get','venue_type']

我想我可以做类似的事情

'text-field': translate[['get','venue_type']]

但它给出了错误：

Error: layers.venues.layout.text-field: 'undefined' value invalid. Use null instead.
at Object.ri [as emitValidationErrors]

text-field 可以接受字符串、变量和 mapbox 表达式。但我不太确定是否可以通过上述表达式之外的任何其他方式访问正在添加的功能的属性。

研究了修改表达式后，似乎可以使用算术和东西，但我真的找不到任何将 JavaScript 混合到表达式中的示例。

在这里寻找一些指点，我应该换一种方式吗？还是我遗漏了什么？

Answer 1

首先，这是一个符号层，而不是Marker。

您不能在 Mapbox GL 表达式中执行任意 JavaScript 表达式。

您可以使用 match 表达式，如下所示：

'text-field': [`match', ['get', 'venue_type'],
  'water', 'Waterway',
  'city', 'City Center',
  'school', 'Elementary School',
  ''
]

Mapbox GL JS：如何使用 JavaScript 和表达式来更改图层布局？

Mapbox GL JS: How can I use JavaScript with expressions to change layer layout?

geojson

overpass-api

mapbox-gl-js

mapbox-marker