小册子:切换GeoJSON层与复选框

Leaflet: Toggle GeoJSON layers with Checkboxes

本文关键字：复选框 GeoJSON 切换 小册子      更新时间：2023-09-26

我希望能够使用复选框来切换地图上的图层。该地图将不加载任何图层。

现在我的按钮是这样的:

<label><input type="checkbox" name="points" value="addressPoints" /> ADDRESS POINTS</label>

我像这样调用我的GeoJSON层:

L.geoJson(schoolDistricts, {
style: defaultStyle,
onEachFeature: function (feature, layer) {
    layer.bindPopup("<h4>School District: " + feature.properties.name);
    layer.setStyle(defaultStyle);
(function(layer, properties) {
    layer.on("mouseover", function (e) {
        layer.setStyle(highlightStyle);
    });
    layer.on("mouseout", function (e) {
        layer.setStyle(defaultStyle);
    });
})(layer, feature.properties.name);

}});

我知道我需要在复选框代码中添加一个更改事件。我只是真的不知道如何写一个函数来切换图层的打开和关闭。我有大约10个图层，我需要这样做，所以我希望能够有一个函数，我可以使用所有的

希望这是足够的信息。

谢谢!

传单通过覆盖对象将此功能内置到图层控件中。层控件可以接受一个基图对象和一个覆盖对象的输入。基图用单选按钮切换，叠加用复选框切换。下面是一个简单的例子:

var basemapObj = {
"First Basemap": L.tileLayer(...),
"Second Basemap": L.tileLayer(...)
}
var overlayObj = {
"LayerA": L.geoJson(...),
"LayerB": L.geoJson(...)
}
L.control.layers(basemapObj, overlayObj).addTo(map);

上面注释中列出的链接与内置控件的功能相同，但需要您自己编写代码并为元素设置样式等。使用基本的传单控件简单得多。

相关文章：