Mapbox gl js - 基于多个条件的自定义图标

Question

我目前正在尝试使用 mapbox gl js 构建客户 web 地图，并努力如何最好地构建代码以基于多个属性在地图图层上显示 geojson 数据。

属性如下：

• 类型：包括标记的属性，具有 3 个值：静态、 飞机、轮船
• name：包括标记的名称，可以是任何船舶名称和 飞机，但定义了静态的子类型：机场、建筑物、桥梁
• nation：包含基于上述项目所属国家的数值：0、1、2

类型和名称将定义图标类型，国家图标颜色（图标为 sdf 格式）

我现在有以下代码可以工作，但没有考虑静态对象的名称子类。关于如何包含此子类匹配的任何建议，以便我可以显示静态+机场、静态+建筑、静态+桥的不同图标，但不关心飞机和船舶类型的名称？

map.addLayer({
        'id': 'marker',
        'type': 'symbol',
        'source': 'db-json',
        'layout': {
            'icon-image': [
                    'match', // Use the 'match' expression: https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
                    ['get', 'type'], // Use the result 'coalition' property
                    'airplane', 'plane-icon',
                    'static', 'circle-stroked-15',
                    'ship', 'harbor-15',
                    'airfield-15' // any other type
                    ]
            },
            'paint': {
                'icon-color': [
                    'match', // Use the 'match' expression: https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
                    ['get', 'nation'], // Use the result 'nation' property
                    0, '#808080',
                    1, '#FF0000',
                    2, '#0000FF',
                    '#00FF00' // any other nation
                    ]
                }
        });

谢谢一百万！！

Answer 1

回答我自己的问题。当然可以堆叠多个级别。可能不是最佳解决方案（与同时检查和比较 2 个变量的查询相比），但它确实有效。

例子：

map.addLayer({
        'id': 'marker',
        'type': 'symbol',
        'source': 'db-json',
        'layout': {
            'icon-image': [
                    'match', 
                    ['get', 'type'], // Use the result 'type' property
                    'airplane', 'plane-icon',
                    'static', [
                       'match', 
                        ['get', 'name'], // Use the result 'name' property
                        'airport', 'airport-icon',
                        'building', 'building-icon',
                        'bridge', 'bridge-icon',
                        '' // none for any other type
                         ],
                    'ship', 'harbor-15',
                    'airfield-15' // any other type
                    ]
            },
            'paint': {
                'icon-color': [
                    'match', 
                    ['get', 'nation'], // Use the result 'nation' property
                    0, '#808080',
                    1, '#FF0000',
                    2, '#0000FF',
                    '#00FF00' // any other nation
                    ]
                }
        });