Question

由于我的上一个问题答案如此之快，而我对另一个问题感到迷茫，即使我没有时间查看最后一个问题的答案，我也已经问了另一个问题。

所以，我想在传单的Layer控制面板中插入一个下拉菜单来管理一些不同距离的缓冲区域，当我点击时，它会触发标记（或折线）它

现在我试着进入leaflet-src.js并修改了LayerControl，但由于我不知道自己在做什么，所以我只是模仿了我看到的其他选项（baselayer和覆盖）。理想情况下，我希望有一个动态图层，一次只绘制一个缓冲区，只有在LayerControl面板中检查我的图层，并且缓冲区的大小根据所选距离。以下是我用来说明我的情况的代码：

<!DOCTYPE html> 
<head> 
<title>Example</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css"/>
<style>

body {
    font-family: Helvetica;
    margin:0;
}

#map{
    position:absolute;
    top:0;
    bottom:0;
    width:100%;}

</style>
</head>

<body>
<div id="map"></div>
<script>

var sites = [
        {'loc':[42.2793869135936,9.53257201027757],'title':'TORRA A I CASELLI'},
        {'loc':[42.2713622720985,9.50678498185463],'title':'TOUR GIANDINELLI'},
        {'loc':[42.641518105666,9.00587322013212],'title':'TOUR DE LOSARI'},];

var map = new L.Map('map');
var osm = map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));
map.setView([42.5,9.2210706018535],9);

var marks = new L.LayerGroup();
    for(i in sites) {
        var title = sites[i].title,
            loc = sites[i].loc,
            markersites = new L.Marker(new L.latLng(loc), {title: title});
        markersites.bindPopup('<strong>'+title+'</strong><br>');
        marks.addLayer(markersites);
    }
marks.addTo(map);

// for now it is all good, the next part is where I fail, please notice the extra overlay I put as a comment and which should include my selectable, checkable, dropdown menu

var baseLayers = {
    "OpenStreetMap": osm
};
var overlays = {
    "Sites":marks,
    /*"Distance":...,*/
};


L.control.layers(baseLayers, overlays,{collapsed:false, hideSingleBase:true}).addTo(map);

</script>
</body>
</html>

由于我没有找到任何接近我想要的东西，我只希望有人能够有一个想法（以及更好的网络代码知识），让任何事情都指向我的好方向

感谢您的关注。干杯，纪尧姆

在Leaflet的LayerControl面板中插入下拉菜单

0 个答案: