Mapbox querySourceFeatures返回多数组且首数组为空问题求助

出现多次输出空数组、最终结果重复的原因是：sourcedata事件会在矢量源加载的多个阶段触发（比如开始请求、分片加载、加载完成等），而非仅在加载完成时执行一次。以下是两种可行的解决方案：

方案一：使用source.load事件（推荐） #

source.load是Mapbox专门提供的事件，仅当矢量源完全加载完成时触发一次，精准匹配需求：

map.on('load', (e) => {    
   
    map.addSource('aa_winter_spoorts_points', {
        type: 'vector',
        url: 'mapbox://username.3t9kz8q5' 
    });
     
    map.addLayer({
        'id': 'aa_winter_spoorts_points',
        'type': 'symbol',  
        'source': 'aa_winter_spoorts_points',
        'source-layer': 'aa_winter_sports_points-6lir92',
        'layout': {
            'visibility': 'visible',
            'icon-image': 'mountain-11',
            'icon-allow-overlap': true
        },
    });
    
    // 仅在目标源加载完成时执行一次
    map.on('source.load', (e) => {
        if (e.sourceId === 'aa_winter_spoorts_points') {
            let features = map.querySourceFeatures('aa_winter_spoorts_points', {
                sourceLayer: 'aa_winter_sports_points-6lir92',
                filter: ["==", "id", "way/771665618"]
            });
            if (features.length > 0) {
                console.log(features);
            }
        }
    });    
});

方案二：优化sourcedata事件监听 #

如果坚持使用sourcedata，需要在成功获取目标要素后移除事件监听，同时判断加载状态：

map.on('load', (e) => {    
   
    map.addSource('aa_winter_spoorts_points', {
        type: 'vector',
        url: 'mapbox://username.3t9kz8q5' 
    });
     
    map.addLayer({
        'id': 'aa_winter_spoorts_points',
        'type': 'symbol',  
        'source': 'aa_winter_spoorts_points',
        'source-layer': 'aa_winter_sports_points-6lir92',
        'layout': {
            'visibility': 'visible',
            'icon-image': 'mountain-11',
            'icon-allow-overlap': true
        },
    });
    
    function handleSourceData(e) {
        // 仅处理目标源的加载完成状态
        if (e.sourceId === 'aa_winter_spoorts_points' && e.isSourceLoaded) {
            let features = map.querySourceFeatures('aa_winter_spoorts_points', {
                sourceLayer: 'aa_winter_sports_points-6lir92',
                filter: ["==", "id", "way/771665618"]
            });
            if (features.length > 0) {
                console.log(features);
                // 执行后移除监听，避免重复触发
                map.off("sourcedata", handleSourceData);
            }
        }
    }
    
    map.on("sourcedata", handleSourceData);    
});

内容的提问来源于stack exchange，提问作者spreaderman