Question

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

当达到某个缩放级别时，我希望点和多边形关闭。使用map.removeLayer（多边形的名称）完全关闭多边形，然后缩小我使用map.addLayer（多边形的名称）然后它们返回（使用'zoomend'和if else声明）。

点要素不像多边形那样对removeLayer函数做出反应。我也尝试过harvestPoints.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

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

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

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

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

如果您想同时打开/关闭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）

1 个答案: