如何在Leaflet图层控件中设置复选框的行为类似于单选按钮

时间:2016-04-08 18:28:50

标签: javascript leaflet

这是我的小提琴:http://jsfiddle.net/anton9ov/twxx4up8/

我的地图上有两个baseLayers和两个带有标记集的overLayers。我想制作复选框切换overLayers就像单选按钮一样。即我想同时只选择其中一个。

L.control.layers({
    "Map 1": basemap1,
  "Map 2": basemap2
}, {
    "Marker 1": markerLayer1,
  "Marker 2": markerLayer2
}).addTo(map);

2 个答案:

答案 0 :(得分:0)

您可以重写L.Control.Layers并替换

input = document.createElement('input');
input.type = 'checkbox';
input.className = 'leaflet-control-layers-selector';
input.defaultChecked = checked;

input = this._createRadioElement('leaflet-control-layers-selector', checked);

选中此example

这个基于你的jsfiddle的例子很快而且很脏,但它可以编写你自己的控件。

答案 1 :(得分:-1)

您可以直接编辑leaflet.js文件(第4388行),如下所示,以获得所需的输出。

替换

t.overlay ? (i = e.createElement("input"), i.type = "checkbox", i.className = "leaflet-control-layers-selector", i.defaultChecked = s) : i = this._createRadioElement("leaflet-base-layers", s), i.layerId = o.stamp(t.layer), o.DomEvent.on(i, "click", this._onInputClick, this);

t.overlay ? (i = this._createRadioElement('leaflet-control-layers-selector', s)) : i = this._createRadioElement("leaflet-base-layers", s), i.layerId = o.stamp(t.layer), o.DomEvent.on(i, "click", this._onInputClick, this);

希望这有帮助!