使用Mapbox/LeafletJS显示和隐藏标记组

Showing and hiding groups of markers with Mapbox/LeafletJS

本文关键字：隐藏 显示 Mapbox LeafletJS 使用      更新时间：2023-09-26

我使用MapboxJS来构建一个地图。

我目前给它一个geoJson对象的所有标记，它显示没有问题。

由于每个点都有一个类别，我想为每个类别添加一个带有复选框的控制层，因此用户可以显示/隐藏每个类别。

我试过将每个标记单独加载到一个图层中，但我得到了mapbox错误。

我该如何处理?

提前感谢。

梅

最后我自己写了一些东西。

我创建了一个全局变量来保存我想要使用的类别，并向geoJson对象添加了一个类别属性。我还为所有的标记设置了一个全局。

然后我使用L.control来添加一个div，并循环遍历类别来创建复选框。

我向这些输入添加了一个事件侦听器，它循环遍历每个标记，并根据复选框的值将它们从地图中添加或删除(每个标记是一个层)。

详情见blogpost http://meigwilym.com/custom-marker-controls-with-mapbox-and-leafletjs/

我不知道这是不是最好的方法，但这是我唯一能做的。

我没有玩mapbox，但与leafletjs，你需要的大部分是在http://leafletjs.com/examples/layers-control.html

该页的代码如下:

var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
denver    = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
aurora    = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');
var cities = L.layerGroup([littleton, denver, aurora, golden]);
var grayscale = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution}),
streets   = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution});
var map = L.map('map', {
    center: [39.73, -104.99],
    zoom: 10,
    layers: [grayscale, cities]
});
var baseMaps = {
"Grayscale": grayscale,
"Streets": streets
};
var overlayMaps = {
"Cities": cities
};
L.control.layers(baseMaps, overlayMaps).addTo(map);

根据上述代码，您所需要更改的就是将多个元素添加到overlayMaps变量中，每个元素都有一组标记。

所以你可以写:

var myMarkers = L.layerGroup([
    L.marker([39.75,-105.1]),
    L.marker([39.76,-105.3])
]);

，然后修改上面代码中overlayMaps的定义，如下所示:

var overlayMaps = {
    "Cities": cities,
    "My Markers": myMarkers
};
相关文章：