在addLayer“布局”中获取自定义属性 - 有选择地工作

Question

我正在使用 Mapbox GL JS 创建带有旅行旅游的自定义地图，但出现以下“奇怪”错误：

这是我的“代码”：

const transportIconGeoJsonData = {
    'type': 'FeatureCollection',
    'features': [
        {
            'type': 'Feature',              
            'geometry': {
                'type': 'Point',
                'coordinates': [-59.492456, 13.074603]
            },
            'properties': {
                'icon': 'planeIcon',
                'rotate': true,
                'alignment': 'map'
            }
        },
        {
            'type': 'Feature',              
            'geometry': {
                'type': 'Point',
                'coordinates': [-60.992936, 14.020228]
            },
            'properties': {
                'icon': 'shipIcon',
                'rotate': false,
                'alignment': 'viewport'
            }
        },
    ]
};


map.on('load', () => {
    map.addSource('transportSourceIcon', {
        'type': 'geojson',
        'data': transportIconGeoJsonData
    });

    map.addLayer({
        id: 'transport-icon',
        type: 'symbol',
        source: 'transportSourceIcon',
        layout: {
            'icon-image': ['get', 'icon'], // <- works perfectly!
            'icon-size': 0.5,
            'icon-rotate': ['get', 'rotation'], // <- works perfectly!
            'icon-rotation-alignment': ['get', 'alignment'], // <- does not work ...
            'icon-allow-overlap': true,
            'icon-ignore-placement': true
        }
    });
});

我可以获得属性“图标”和“旋转”，但不能获得“对齐”。 控制台显示：

Error: layers.transport-icon.layout.icon-rotation-alignment: data expressions not supported

这怎么可能？我错过了什么？！

如果我尝试在控制台中手动输出属性，例如：

console.log(transportIconGeoJsonData.features[0].properties.alignment);

完美运行并显示“地图”或“视口”（如果..features.[1]）

Answer 1

就像@Davi所说，不可能将插值表达式（如

['get', 'rotation']

）与属性

icon-rotation-alignment

一起使用。

我还尝试找到更新图层属性的方法，这实际上可以通过

setLayoutProperty

实现，但不适用于单个特征。 （实际上这也是可能的，但对于

icon-rotation-alignment

来说是不可能的，因为插值表达式...... 示例：

map.setPaintProperty('Icons', 'icon-opacity', ['match', ['get', 'id'], 'example-id', 0.5 , 1]);

)

我想对于我的任务（单独更改单个功能的布局属性），唯一的解决方案是 - 为具有不同属性的每个功能（图标）单独创建源和图层。

希望我的经验能帮助别人；）