Question

我使用mapbox创建了一个地图。我添加了一个Url中的图标和一种“过滤器”。但是我想要添加一个标记簇并使用复选框来选择多个选项。

http://jsfiddle.net/MichelleCh/3du88qtr/7/

这是我的榜样。我会尝试使用Leaflet标记集群，但是......我对代码完全不熟悉，我不知道我应该在什么地方放置集群代码。

我想现在，最重要的形式是过滤器的复选框。我尝试将“true”或“false”设置为图标属性中的某些值，最后这个值。但不是复选框:(

myLayer.on('layeradd', function(e) {
    var marker = e.layer;
    var feature = marker.feature;

    var images = feature.properties.images
    var slideshowContent = '';

marker.setIcon(L.icon(feature.properties.icon));
    for(var i = 0; i < images.length; i++) {
        var img = images[i];
    }
    var popupContent =  '<div id="' + feature.properties.id + '" class="popup">' +
                            '<h2>' + '<p align=center>'+ feature.properties.title + '</p>'+'</h2>' +
                            '<h5>' + feature.properties.description +'</h5>'

                        '</div>';

    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 400
    });

});



myLayer.setGeoJSON(geoJson)
.addTo(map);

$('.menu-ui a').on('click', function() {
      var filter = $(this).data('filter');
    $(this).addClass('active').siblings().removeClass('active');
    myLayer.setFilter(function(f) {

        return (filter === 'Development') ? true : f.properties[filter] === true;
    });
    return false;
});

谢谢，祝你有个愉快的一天！：）

Answer 1

以this为参考，您可以在将图层添加到地图后使用以下代码在地图上进行聚类。

var clusterGroup = new L.MarkerClusterGroup();
    clusterGroup.addLayer(myLayer);
    map.addLayer(clusterGroup);

关于复选框行为，似乎更像是一个JS问题。选择all的选项增加了一些复杂性来控制何时隐藏/显示引脚。查看here基于您的完整示例，包括此示例和群集功能。

带有群集和过滤器复选框的Mapbox个性化图标

1 个答案: