Блог

В настоящее время я пытаюсь создать веб-карту клиента с помощью mapbox gl js и пытаюсь решить, как наилучшим образом структурировать код для отображения данных geojson на слое карты на основе нескольких свойств.

Свойства следующие:

• тип: включает свойство маркера с 3 значениями: статический, самолет, корабль
• имя: включает имя маркера, может быть любым именем для корабля и самолета, но определяет подтип для статического: аэропорт, здание, мост
• нация: включает числовое значение, основанное на нации, к которой принадлежат вышеуказанные элементы: 0, 1, 2

Тип и имя определяют тип значка, нация — цвет значка (значки в формате sdf)

Теперь у меня есть следующий код, который работает, но без учета подкласса name для статических объектов. Есть какие-либо предложения о том, как можно включить это соответствие подкласса, чтобы я мог показывать разные значки для статического аэропорта, статического здания, статического моста, но не заботиться о названии типов самолетов и кораблей?

 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
                    ]
                }
        });
 

Спасибо миллион!!

Чтобы ответить на мой собственный вопрос. Конечно, можно сложить несколько уровней. Возможно, это не самое оптимальное решение (по сравнению с запросом, который проверяет и сравнивает 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
                    ]
                }
        });