缩放后删除自定义 geojson 标记（使用 Leaflet 加载）

Question

我正在使用下面的代码向地图添加一些点，它们看起来很棒。我还毫无问题地添加了一些 json 多边形。

当达到某个缩放级别时，我希望关闭点和多边形。使用 map.removeLayer(多边形名称) 完全关闭多边形然后缩小我使用 map.addLayer(多边形名称) 然后他们回来（使用 'zoomend' 和 if else 语句）。

点要素不会像多边形那样对 removeLayer 函数做出反应。我也试过 harvestPoints.setOpacity(0) 也不起作用。我应该使用什么代码来将这些 geojson 标记 "on" 和 "off" 变成像多边形特征一样？

function onEachPoint(feature, layer) {            
    layer.bindPopup(feature.properties.MGNT_AREA.toString());
    layer.on('click', function (e) { layer.openPopup(); });
    layer.bindLabel(feature.properties.MGNT_AREA.toString(), {
        noHide: true,
        className: "my-label",
        offset: [-2, -25]
    }).addTo(map);
};

var areaIcon = {
    icon: L.icon({ 
        iconUrl: 'labels/MonitoringIcon.png',
        iconAnchor: [20, 24]
    })
};

var harvestPoints = new L.GeoJSON.AJAX('labels/dfo_areas_point.json', {
    onEachFeature: onEachPoint,
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, areaIcon);
    }
});

Answer 1

不确定您的问题的根本原因是什么，因为当您尝试从地图中删除点（标记）时，我们不知道您是如何准确引用这些点（标记）的。

通常情况下，多边形和点（标记）之间应该没有区别以实现您所描述的（在特定缩放级别从地图中删除图层，并在其他缩放级别将它们添加回来）。

请注意 setOpacity is a method for L.Markers，而您将其应用于 harvestPoints，这是您的 geoJson 图层组。

可能发生的情况 是您向地图添加了单独的点（标记）（onEachPoint 函数中的最后一条指令），但尝试删除图层组harvestPoints 来自地图。因为它似乎从未被添加到地图中，所以没有任何反应。

如果您想同时转动 on/off 您的 harvestPoints 图层组中的所有点，那么您只需将该图层组添加到/从地图中删除，而不是添加个人标记：

var harvestPoints = L.geoJson.ajax('labels/dfo_areas_point.json', {
    onEachFeature: onEachPoint,
    pointToLayer: function (feature, latlng) {
                                // make sure `areaIcon` is an OPTIONS objects
        return L.marker(latlng, areaIcon);
    }
}).addTo(map); // Adding the entire geoJson layer to the map.

map.on("zoomend", function () {
    var newMapZoom = map.getZoom();

    if (newMapZoom >= 13) {
        map.addLayer(harvestPoints);
    } else {
        // Removing entire geoJson layer that contains the points.
        map.removeLayer(harvestPoints);
    }
});

旁注：弹出窗口默认在点击时打开，您不需要为此添加点击监听器吗？

演示：http://jsfiddle.net/ve2huzxw/62/

缩放后删除自定义 geojson 标记（使用 Leaflet 加载）

Remove custom geojson markers (loaded with Leaflet) after zoom

javascript

google-maps

geojson

leaflet