如何在地图右上角的 leaflet.js 中添加多个具有三个类别的叠加层？

Question

我想制作一张地图，在地图的右上方显示三个类别，例如厕所、垃圾箱和医院。我已经使用 QGIS 开源制图创建了一个地图层。

这是我的代码，其中我只创建了一个类别。

var baseMaps = {'OSM': basemap0};
    L.control.layers(baseMaps,{'<img src="legend/sampletoiletsurvey0.png" /> TOILETS': sampleJSON,},{collapsed:false},{autoZIndex :true}).addTo(map);
    L.control.layers(null, overlays).addTo(map);

现在我想在它下面有两个类别。对于纬度和经度，我有 geojson 文件。如何使用 leaflet.js 中的图层组功能创建额外的两个类别？

Answer 1

首先，存储对要添加项目的 L.Control.Layers 实例的引用。

var myLayersControl = L.control.layers(null, overlays).addTo(map);

然后从网络异步获取 geojson 文件...

fetch('http://wherever/stuff.geojson')

...完成后，获取网络响应的 json 表示，并为其创建 L.GeoJson 的实例...

fetch('http://wherever/stuff.geojson')
.then(function(response){
    return response.json();
})
.then(function(jsonData){
    var geoJsonLayer = L.geoJson(jsonData);
});

...将其添加到地图...

.then(function(jsonData){
    var geoJsonLayer = L.geoJson(jsonData).addTo(map);
});

...最后，将新创建的 L.GeoJSON 实例添加到图层控件中：

.then(function(jsonData){
    var geoJsonLayer = L.geoJson(jsonData).addTo(map);
    myLayersControl.addOverlay(geoJsonLayer, "Stuff!!");
});

如果有任何混淆，请记住 RTFM：

如果您尝试异步加载多条数据并且它们以任意顺序出现，请阅读：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

如何在地图右上角的 leaflet.js 中添加多个具有三个类别的叠加层？

How can I add multiple overlay layers in leaflet.js having three categories at the right top of the map?

qgis

openstreetmap

geojson

leaflet