Question

我正在使用MapboxJS来构建地图。

我现在给它一个我所有标记的geoJson对象，这些对象显示没有问题。

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

我已经尝试将每个标记单独加载到图层中，但我收到了mapbox错误。

我该如何处理？

提前致谢。

美

Answer 1

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

我创建了一个全局变量来保存我想要使用的类别，并为geoJson对象添加了一个category属性。我的所有标记也都是全球性的。

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

我为这些输入添加了一个事件监听器，它循环遍历每个标记，并在地图中添加或删除它们（每个标记是一个图层），具体取决于复选框的值。

详情请参阅博文http://meigwilym.com/custom-marker-controls-with-mapbox-and-leafletjs/

我不知道这是否是最好的方法，但这是我唯一可以工作的方法。

Answer 2

我还没有玩过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
};

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

2 个答案: