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

【问题标题】：Mapbox personalized icons with cluster and filter checkbox带有集群和过滤器复选框的 Mapbox 个性化图标
【发布时间】：2016-06-08 15:48:29
【问题描述】：

我使用 mapbox 创建了一张地图。我从一个 URL 和一种“过滤器”添加图标。但我想添加一个标记簇，并添加一个带有复选框的过滤器功能以选择多个选项。

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

这是我的例子。我将尝试使用 Leaflet 标记集群，但是......我对代码完全陌生，我不知道应该将集群代码放在什么地方。

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

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;
});

谢谢，祝你有美好的一天！ :)

【问题讨论】：

标签： javascript checkbox filtering mapbox

【解决方案1】：

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

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

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

【讨论】：