Leaflet - 在LayerAdd事件

时间:2017-03-11 00:17:16

标签: javascript leaflet

所以如果添加其他图层,我想添加一个图层.... 我做了一个小例子

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(更新版)

就像你(可能)可以看到第二个Marker很快被添加但在add-Event结束后立即被删除... 我不确定我怎么可以通过这样做或更具体的方式来确保我真的可以添加第二个标记(因为在图层控制中复选框甚至不会在那么短的时刻激活)....

1 个答案:

答案 0 :(得分:0)

您可以使用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())
});

这段代码有效......但不是它应该如何...不得不想出更好的方法来做到这一点,但这会暂时起作用。