Question

我希望能够使用复选框在地图上切换开/关图层。地图将在没有任何图层的情况下加载。

现在我的按钮看起来像这样：

<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层，所以我希望能够拥有一个可以用于所有这些的功能。

希望这是足够的信息。

谢谢！

Answer 1

Leaflet通过覆盖对象将此功能内置到layers control中。图层控件可以接受底图对象和叠加对象的输入。使用单选按钮切换底图，使用复选框切换叠加层。这是一个简单的例子：

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);

上面评论中列出的链接与内置控件的作用相同，但要求您自己编写代码并设置元素样式等。使用基本Leaflet控件要简单得多。

Leaflet：使用Checkboxes切换GeoJSON图层

1 个答案: