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

我已经建立了一个地图，并添加了一个层，突出了一个特定的社区，我想添加一个悬停效果的层。就像这个例子一样

我已经用geojson创建了自己的层，但我尝试遵循的示例使用了外部数据源，而我使用自己的数据源。我试图引用我的数据，但我认为我做得不对。请查看此链接，其中有一个工作版本，显示突出显示邻域的图层

这是到目前为止我所拥有的链接

这是我的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
                    }
                    });


    });

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

需要一些指导。

您需要添加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（）中更新了您的代码

免责声明：我在Mapbox工作