Mapbox - 悬停在多边形上根本不起作用。如何让它与矢量数据一起工作?

问题描述 投票:0回答:0

我无法让悬停工作。

下面是我的代码。当我将鼠标移到地图上时,控制台中会显示正确的多边形 ID。

    map.on('mousemove', 'aa_winter_sports_polygons', (e) => { // layer you want to listen on
        if (e.features.length > 0) {
            console.log(e.features.length); // this works and give 1 when defined
            if (hoveredStateId !== null) {
                console.log('hoveredStateId is NOT null and is: '+hoveredStateId); // this works and give an id #
                map.setFeatureState(
                    { 
                        source: 'aa_winter_sports_polygons', 
                        sourceLayer: "aa_winter_sports_polygons_source_layer",
                        id: hoveredStateId
                    },
                    { 
                        hover: false 
                    }
                );              
                console.log('e.features[0].aa_winter_sports_polygin_id: '+JSON.stringify(e.features[0].properties.aa_winter_sports_polygin_id)); // with works and gives a polygon number.
            }
            hoveredStateId = e.features[0].properties.aa_winter_sports_polygin_id;
            map.setFeatureState(
                { 
                    source:     'aa_winter_sports_polygons', 
                    sourceLayer: "aa_winter_sports_polygons_source_layer",
                    id: hoveredStateId
                },
                { 
                    hover: true 
                }
            );
        }
    });

图层添加如下;

    map.addLayer({
        'id': 'aa_winter_sports_polygons',
        'type': 'fill', 
        'source': 'aa_winter_sports_polygons', 

        'source-layer': aa_winter_sports_polygons_source_layer, // for vector layers
        'paint': {
            'fill-color': '#93E7FB', 
            'fill-opacity': [
                'case',
                    ['boolean', ['feature-state', 'hover'], false],
                        0.5,
                        1
                    ]
        }
    });

再次,浅蓝色多边形在我的地图上显示得很好。当我将鼠标移到多边形上时,控制台中会给出所有数字。 aa_winter_polygons_id 是一个整数。我在添加源时尝试了 promoteId :

'aa_winter_sports_polygin_id'
但没有变化。

mapbox mapbox-gl-js
© www.soinside.com 2019 - 2024. All rights reserved.