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

Question

我已经构建了地图，并添加了一个突出显示特定邻域的图层，我想在该图层上添加一个悬停效果。就像本例中的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工作