javascript - Leaflet - 在 LayerAdd 事件上添加图层

Question

所以如果添加了另一个图层，我想添加一个图层....我做了一个小例子

var mymap = L.map('mymap').setView([51.505, -0.09], 13);

var baseLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
}).addTo(mymap);

var layer1 = L.marker([51.505,-0.10]);
var layer2 = L.marker([51.505,-0.09]);
var layer3 = L.marker([51.505,-0.8]);



var basemaps = {
    "OSM": baseLayer
};

var overlays = {
    "Layer1": layer1,
  "Layer2": layer2,
  "Layer3": layer3
}

L.control.layers(basemaps,overlays,{collapsed:false}).addTo(mymap);

layer1.on("add",function(){
    layer2.addTo(mymap);
});

继续

JSFiddle (更新版本)

就像你(可能)看到的那样，第二个标记很快被添加，但在添加事件完成后立即被删除......我不确定如何阻止它这样做，或者更具体地说，我如何真正添加第二个标记(因为在 Layer Control 中，复选框在那一刻甚至没有被激活)......

Answer 1

您可以使用 map.on('layeradd') 或者尝试 layeraddlayer1 对象上的事件。

传单的文档链接:http://leafletjs.com/reference-1.0.3.html#layerevent

编辑...将以下代码添加到 js-fiddle 代码中。

layer1.on('add',(e)=>{
  layer2.addTo(mymap);
});

layer1.addTo(mymap);

如果没有从上面删除 addTo 行并粘贴以下内容

setTimeout(()=>{
  layer1.addTo(mymap);
},500);

编辑 2:

var controlObj = L.control.layers(basemaps,overlays,{collapsed:false}).addTo(mymap);

layer1.on("add",function(){
 console.log(controlObj._form[2].click())
});

此代码有效...但它不应该是这样...将不得不找出更好的方法来执行此操作，但这将暂时有效。