0

我正在使用 MapboxJS 构建地图。

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

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

我尝试将每个标记单独加载到图层中，但出现 mapbox 错误。

我应该如何处理这个？

提前致谢。

梅

4

2 回答 2

2

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

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

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

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

详细信息在博文http://meigwilym.com/custom-marker-controls-with-mapbox-and-leafletjs/

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

于 2013-05-14T14:25:52.803 回答
0

我没玩过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
};
于 2016-01-16T22:36:41.470 回答