Leaflet - 添加图层到已有图层的Add事件

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（更新版本）

就像您（可能）看到的那样，第二个标记很快被添加，但在添加事件完成后立即删除... 我不确定如何防止它这样做，或者更具体地说，我真的可以如何添加第二个标记（因为在图层控制中，复选框甚至在那个短暂的时刻都没有激活）....

- daHappy

---

jsfiddle不起作用。 - Sharky

Answer 1

你可以使用 map.on('layeradd') 或尝试在你的 layer1 对象上使用 layeradd 事件。leaflet 的文档链接：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())
});

这段代码可以运行……但不是最好的方式。需要想办法找到更好的方法，不过这暂时能够工作。

- MK4

---

因此，layeradd事件在图层对象上不起作用，而 map.on（'layeradd'） 仍然会出现同样的问题（图层短暂添加但在事件结束时被删除）请参见新的（并且这次希望能够正常运行的）[JSFiddle] 1查看在打开警报时显示了2个标记... - daHappy

我在我的JSFiddle中有3个图层...如果用户使用LayerControl添加Layer1，我也想添加Layer2。问题出在代码上，如果我使用layer1.addTo(mymap)，那么它可以正常工作，但是如果用户使用LayerControl，它在事件完成后就会消失... - daHappy

添加了新代码，它可以运行，但必须找到更好的方法来做到这一点。我认为这是一种引用错误，因为layer2和您的overlay对象都引用了同一个marker。 - MK4

这也是我能想到的唯一解决方案，但我不喜欢这个方法，因为它并不真正动态，如果图层顺序改变，我还必须更改它...我以为我错过了什么明显的东西，但似乎这是leaflet中的一个“bug”。 - daHappy

我同意，这是一种相当糟糕的做法。 - MK4