javascript - 缩放后删除自定义 geojson 标记(使用 Leaflet 加载)

Question

我使用下面的代码向 map 添加一些点，它们看起来很棒。我还添加了一些 json 多边形，没有任何问题。

当达到一定的缩放级别时，我希望关闭点和多边形。使用map.removeLayer(多边形名称)完美关闭多边形，然后缩小我使用map.addLayer(多边形名称)，它们回来了(使用'zoomend' 和 if else 语句)。

点要素不会像多边形那样对removeLayer函数使用react。我还尝试了harvesPoints.setOpacity(0)，但这也不起作用。我应该使用什么代码来像多边形特征一样“打开”和“关闭”这些 geojson 标记？

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

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

通常情况下，多边形和点(标记)之间应该没有区别才能实现您所描述的效果(在特定缩放级别从 map 中删除图层，然后在其他缩放级别将它们添加回来)。

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

可能发生的情况是，您将单个点(标记)添加到 map 中(onEachPoint 函数中的最后一条指令)，但尝试删除图层组 harvestPoints从 map 。因为它似乎从未添加到 map 中，所以什么也没有发生。

如果您想打开/关闭 harvestPoints 中的所有点图层组，那么您只需在 map 上添加/删除该图层组，而不是添加单独的标记:

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/