Question

极端初学者在这里。我找到了这个（https://www.mapbox.com/mapbox-gl-js/example/hover-styles/）教程，该教程完成了我想做的第一部分（对美国产生悬停效果），但是我想增加单击状态并将地图缩放到的功能。该状态的范围。

基本上希望在地图框gl中执行类似https://leafletjs.com/examples/choropleth/的操作。

非常感谢，即使只是指出我应该从哪里开始。

Answer 1

您可以使用map.on('click', <layer-name> ...来设置点击监听器。本示例将帮助您了解以下结构：https://www.mapbox.com/mapbox-gl-js/example/polygon-popup-on-click/

为了在侦听器中正确使用fitBounds，您需要将原始多边形坐标“转换”为mapgoxgl.LngLatBounds对象。此示例针对LineString进行了此操作（但该方法可适用于多边形）：https://www.mapbox.com/mapbox-gl-js/example/zoomto-linestring/

在不知道图层名称的情况下，我可能会推荐一些大致如下的内容：

map.on('click', 'state-fills', function(e) {
    var coordinates = e.features[0].geometry.coordinates[0];
    var bounds = coordinates.reduce(function(bounds, coord) {
             return bounds.extend(coord);
         }, new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));

    map.fitBounds(bounds, {
            padding: 20
        });
});

合并悬停状态和单击缩放功能时遇到麻烦（fitToBounds？）

1 个答案: