根据地图的缩放级别和点击显示多边形图层答案

【问题标题】：Display Polygons Layers according to zoom level of the map and clicks根据地图的缩放级别和点击显示多边形图层
【发布时间】：2019-05-03 11:22:39
【问题描述】：

所以我有一个 OpenStreetMap 地图（带有 Leaflet），并放置了一个欧洲 javascript 层（我在 javascript 中插入了 ID 以区分每个国家/地区）。当我用鼠标悬停在每个国家/地区时，每个国家/地区都会突出显示。当我点击一个国家时，它会自动放大它。

我希望，当我点击国家时，国家的图层消失（根据缩放级别）（但其他国家必须保持“分层”。（知道之后，我将尝试将标记放置在仅当国家图层消失时才会显示的国家/地区，并且我们可以通过单击它来放大它）。

Ps：我关注这个网站是为了做我此刻所拥有的： https://leafletjs.com/examples/choropleth/

还有我的代码： https://jsfiddle.net/Gio687351/3bwsnu8z/2/

map.on('zoomend ', function(e) {
    if (map.getZoom() < 3) {
        map.fitBounds(layer.getBounds())
        map.removeLayer(Europe-Layer.js)
        map.setStyle({
            'fillOpacity': '0.7'
        });
    } else if (map.getZoom() >= 3) {
        map.fitBounds(layer.getBounds())
        map.addLayer(statesData);
        map.setStyle({
            'fillOpacity': '0.0'
        });
    }
});

【问题讨论】：

标签： javascript html css leaflet geojson

【解决方案1】：

可以通过fill-opacity 和opacity style properties 管理图层可见性，如下所示：

function toggleLayerVisibility(map, layer) {
  if (selectedLayerId) {
    geojson.resetStyle(layer);
    selectedLayerId = null;
  } else {
    //hide a layer
    layer.setStyle({
      opacity: 0,
      fillOpacity: 0.0
    });
    selectedLayerId = layer._leaflet_id; //save identifier of a selected layer
  }
}

解释：

设置opacity: 0和fillOpacity: 0隐藏图层
selectedLayerId用于存储当前选中层的标识

鉴于提供的示例，following demo 演示了如何隐藏单击的图层

【讨论】：

有效！非常感谢你！我很感激！