javascript - 如何将悬停效果添加到使用自定义 geojson 创建的新层

Question

我已经构建了一张 map 并添加了一个突出显示特定社区的图层，我想为该图层添加悬停效果。就像在这个例子中一样 https://docs.mapbox.com/mapbox-gl-js/example/hover-styles

我已经使用 geojson 创建了自己的层，但我尝试遵循的示例使用了外部数据源，而我使用的是我自己的数据源。我试图引用我的数据，但我认为我做的不正确。请查看此链接，其中包含一个工作版本，其中显示了突出显示该社区的图层。

这是我目前拥有的链接 https://jsfiddle.net/jrax4pvm/1/

这是我的 JS

mapboxgl.accessToken = 

'pk.eyJ1IjoibGVvc29ubmVrdXM5NSIsImEiOiJjazAxdHcyZWExMHBjM2lwN2psMDhheXQwIn0.KpEYrurG0lE55PLKMuYtKw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/leosonnekus95/ck11gbbaz0neb1cmrunqmijkf',
zoom: 15,
center: [174.7570008, -36.8658221]
});

map.on('load', function () {



           'id': 'Uptown',
                    'type': 'fill',
                    'source': {
                    'type': 'geojson',
                    'data': {
                    'type': 'Feature',
                    'geometry': {
                    'type': 'Polygon',
                    'coordinates': 


                    [
        [ /* Co-ordinates here..*/ ]]

       }
                    }
                    },
                    'layout': {},
                    'paint': {
                    'fill-color': '#088',
                    'fill-opacity': 0.8
                    }
                    });


    });

我真的很想让这一层可悬停/可点击，并且怀疑我必须创建这两个示例的组合版本

https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/ https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/

并希望得到一些指导。

Answer 1

您需要将 map.on('mouseenter') 和 map.on('mouseleave') 函数添加到您的代码中，如下所示:

map.on('mouseenter', 'Uptown', function(e) {
  map.setPaintProperty('Uptown', 'fill-color', '#FF0000');
});

map.on('mouseleave', 'Uptown', function() {
  map.setPaintProperty('Uptown', 'fill-color', '#1F06F0'));
}); 

我已经使用这些更改在另一个 JSFiddle ( https://jsfiddle.net/pjleonard37/jfd0bsha/) 中更新了您的代码。

免责声明:我在 Mapbox 工作