Question

我已经构建了地图，并添加了一个突出显示特定邻域的图层，我想在该图层上添加一个悬停效果。就像在此示例https://docs.mapbox.com/mapbox-gl-js/example/hover-styles

中一样

我可以用geojson创建自己的图层，但是我要遵循的示例使用的是外部数据源，而我使用的是我自己的图层。我试图引用我的数据，但是我认为我做的不正确。请看到此链接，并带有一个工作版本，其中显示了突出显示邻居的图层。

这是我到目前为止https://jsfiddle.net/jrax4pvm/1/

的链接

这是我的JS

Full match: http://example.com/bar1/checkstatus
Group 1: checkstatus
Full match: http://example.com/bar2/checkstatus
Group 1: checkstatus
Full match: https://www.example.com/bar1/checkstatus
Group 1: checkstatus
Full match: https://www.example.com/bar2/checkstatus
Group 1: checkstatus
Full match: http://example.com/bar1/checkstatus/
Group 1: checkstatus
Full match: http://example.com/bar2/checkstatus/
Group 1: checkstatus
Full match: https://www.example.com/bar1/checkstatus/
Group 1: checkstatus
Full match: https://www.example.com/bar2/checkstatus/
Group 1: checkstatus

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

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工作

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

1 个答案: