Javascript 通过过滤层控制进行传单标记聚类划分

基于此示例：

我开发了自己的地图，但标记聚类存在问题

我用这个例子来解决这个问题：

现在我的代码如下所示：

     $.getJSON(url, function(data) {

      var clusters = L.markerClusterGroup();
     //Initial Setup  with layer Verified No
     var mdu = L.geoJson(data, {

       pointToLayer: function(feature, latlng) {

        return L.circleMarker(latlng, {
            color:'black',
            fillColor:  'black',
            fillOpacity: 1,
            radius: 8
        })
       },  
       onEachFeature: function (feature, layer) {
        layer._leaflet_id = feature.properties.Owner;
            var popupContent = "<p><h2>" +
                feature.properties.Owner + "</h2><font color='red'><h3>Status:</font> " +
                feature.properties.Status + "</h3><b> NBU ID:</b> " +
                feature.properties.NBU + "</br><b> Ticket ID:</b> " +
                feature.properties.Ticket_ID + "</br><b> Address (street):</b> " +
                feature.properties.Address + "</br><b> Address (postcode):</b> " +
                feature.properties.Postcode + "</br><b> Asbestos report:</b> " +
                feature.properties.Asbestos_rep + "</br><font color='blue'><b>Planner</b>:</font> " +
                feature.properties.Planner + "</br><font color='blue'><b>Surveyor</b>:</font> " +
                feature.properties.Surveyor + "</br></h2><b>Units provisional:</b> " +
                feature.properties.Client_Home_Count + "</br></h2><b> Post survey units:</b> " +
                feature.properties.Post_Survey_Home_Count + "</br> <b>STATS (applied):</b> " +
                feature.properties.STATS_Applied_for_date + "</br> <b>STATS (completed):</b> " +
                feature.properties.STATS_compleeted + "</br> <b>VM issue date:</b> " +
                feature.properties.Date_issued_from_VM + "</br> <b>QC date:</b> " +
                feature.properties.ACTUAL_Internal_QC_Date + "</br> <b>VM ECD date:</b> " +
                feature.properties.VM_ECD_date + "</br><b>General notes:</b> " +
                feature.properties.General_notes + "</br>" +
                '</br><center><a href="'+ feature.properties.Directory +'" target="_blank">Local directory</a></center></p>' +
                '<center><font color="red"><a href="'+ feature.properties.Sharepoint +'" target="_blank">Sharepoint</a></font></center></p>';                   
            if (feature.properties && feature.properties.popupContent) {
                    popupContent += feature.properties.popupContent;
                }
            layer.bindPopup(popupContent);
            layer.addTo(clusters);
    },
    filter: function(feature, layer) {   
         return (feature.properties.Type =="MDU");
    },

}).addTo(map);  
map.addLayer(clusters);

   //mdu.addData(data);


    /// END Initial Setup

//Using a Layer Group to add/ remove data from the map.
var myData =  L.layerGroup([]);
    myData.addLayer(mdu);
    myData.addTo(map); 


//If Radio Button one is clicked.  
document.getElementById("radioOne").addEventListener('click', function(event) {
theExpression = 'feature.properties.Status == "Issued" ';
console.log(theExpression); 

    myData.clearLayers();
    map.removeLayer(myData);

    mdu = L.geoJson(data, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
                color:'black',
                fillColor:  'red',
                fillOpacity: 1,
                radius: 8
            })
        },  
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.Owner);
        },
        filter: function(feature, layer) {   
             return (feature.properties.Type =="MDU") && (feature.properties.Status == "Issued" );
        },

    });
    map.addLayer(clusters);
    /*
    $.getJSON(url, function(data) {
           mdu.addData(data);
    });
    */

    myData.addLayer(mdu);
    myData.addTo(map);;
});



       //If Radio button two is clicked.
       document.getElementById("radioTwo").addEventListener('click', function(event) {
       theExpression = 'feature.properties.Status == "Completed_and_invoiced" ';    
        console.log(theExpression);
    map.removeLayer(myData);
    myData.clearLayers();

    mdu = L.geoJson(null, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
                color:'black',
                fillColor:  'green',
                fillOpacity: 1,
                radius: 8
            })
        },  
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.Owner);
        },
        filter: function(feature, layer) {   
             return(feature.properties.Type =="MDU")&&(feature.properties.Status == "Completed_and_invoiced" );
        },

    });

    $.getJSON(url, function(data) {
           mdu.addData(data);
    });

    myData.addLayer(mdu);
    myData.addTo(map);
});

//If Survey is clicked.
document.getElementById("Survey").addEventListener('click', function(event) {
theExpression = 'feature.properties.Status == "Survey_to_arrange" ';    
console.log(theExpression);
    map.removeLayer(myData);
    myData.clearLayers();

    mdu = L.geoJson(null, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
                color:'black',
                fillColor:  'yellow',
                fillOpacity: 1,
                radius: 8
            })
        },  
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.Owner);
        },
        filter: function(feature, layer) {   
             return(feature.properties.Type =="MDU")&&(feature.properties.Status == "Survey_to_arrange" );
        },

    });

    $.getJSON(url, function(data) {
           mdu.addData(data);
    });

    myData.addLayer(mdu);
    myData.addTo(map);
});


     //If On-Hold is clicked.
     document.getElementById("On-hold").addEventListener('click', function(event) {
    //theExpression = 'feature.properties.Status == "Do_not_design" ';  
    //console.log(theExpression);
    map.removeLayer(myData);
    myData.clearLayers();

    mdu = L.geoJson(null, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
                color:'black',
                fillColor:  'orange',
                fillOpacity: 1,
                radius: 8
            })
        },  
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.Owner);
        },
        filter: function(feature, layer) {   
             return(feature.properties.Type =="MDU")&&(feature.properties.Status == "Do_not_design" 
   );
        },

    });

    $.getJSON(url, function(data) {
           mdu.addData(data);
    });

    myData.addLayer(mdu);
    myData.addTo(map);
});

//If Upoloaded is clicked.
document.getElementById("Uploaded").addEventListener('click', function(event) {
//theExpression = 'feature.properties.Status == "Design_uploaded" ';    
//console.log(theExpression);
    map.removeLayer(myData);
    myData.clearLayers();

    mdu = L.geoJson(null, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
                color:'black',
                fillColor:  'purple',
                fillOpacity: 1,
                radius: 8
            })
        },  
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.Owner);
        },
        filter: function(feature, layer) {   
             return(feature.properties.Type =="MDU")&&(feature.properties.Status == 
     "Design_uploaded" );
        },

    });

    $.getJSON(url, function(data) {
           mdu.addData(data);
    });

    myData.addLayer(mdu);
    myData.addTo(map);
     });

    //If Inactive is clicked.
   document.getElementById("Inactive").addEventListener('click', function(event) {
//theExpression = 'feature.properties.Status == "?" ';  
//console.log(theExpression);
    map.removeLayer(myData);
    myData.clearLayers();

    mdu = L.geoJson(null, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
                color:'black',
                fillColor:  'grey',
                fillOpacity: 1,
                radius: 8
            })
        },  
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.Owner);
        },
        filter: function(feature, layer) {   
             return(feature.properties.Type =="MDU")&&(feature.properties.Status == "?" );
        },

    });

    $.getJSON(url, function(data) {
           mdu.addData(data);
    });

    myData.addLayer(mdu);
    myData.addTo(map);
});

//If All is clicked.
document.getElementById("All").addEventListener('click', function(event) {
//theExpression = 'feature.properties.Type == "MDU" ';  
//console.log(theExpression);
    map.removeLayer(myData);
    myData.clearLayers();

    mdu = L.geoJson(data, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
                color:'black',
                fillColor:  'black',
                fillOpacity: 1,
                radius: 8
            })
        },  
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.Owner);
        },
        filter: function(feature, layer) {   
             return(feature.properties.Type =="MDU");
        },

    });

    /*
    $.getJSON(url, function(data) {
           mdu.addData(data);
    });
    */

    myData.addLayer(mdu);
    myData.addTo(map);
 });

$.getJSON（url、函数（数据）{
var clusters=L.markerClusterGroup（）；
//初始设置，层验证否
var mdu=L.geoJson（数据{
pointToLayer：功能（特性、latlng）{
返回L.circleMarker（车床{
颜色：'黑色'，
fillColor:'黑色'，
不透明度：1，
半径：8
})
},  
onEachFeature：功能（功能，图层）{
图层。\u传单\u id=feature.properties.Owner；
var popupContent=“”+
feature.properties.Owner+“状态：”+
feature.properties.Status+“NBU ID：”+
feature.properties.NBU+“
票证ID：”+
feature.properties.Ticket_ID+“
地址（街道）：”+
feature.properties.Address+“
地址（邮政编码）：”+
feature.properties.Postcode+“
石棉报告：”+
feature.properties.asyman_rep+“
规划器：”+
feature.properties.Planner+“
测量师：”+
feature.properties.Surveyor+“
暂定单位：”+
feature.properties.Client\u Home\u Count+“
调查后单位：+
feature.properties.Post\u Survey\u Home\u Count+“
统计数据（已应用）：”+
feature.properties.STATS\u应用于\u date+“
STATS（已完成）：”+
feature.properties.STATS\u completed+“
VM发布日期：”+
feature.properties.Date \u从\u VM+“
质控日期：”+
feature.properties.ACTUAL\u Internal\u QC\u Date+“
VM ECD Date：”+
feature.properties.VM\u ECD\u date+“
一般说明：+
feature.properties.General_notes+“
”+
“
”+
“
”；
if（feature.properties&&feature.properties.popupContent）{
popupContent+=feature.properties.popupContent；
}
layer.bindPopup（弹出内容）；
layer.addTo（集群）；
},
过滤器：功能（特征，层）{
返回（feature.properties.Type==“MDU”）；
},
}).addTo（地图）；
map.addLayer（集群）；
//mdu.addData（数据）；
///结束初始设置
//使用图层组在地图中添加/删除数据。
var myData=L.layerGroup（[]）；
myData.addLayer（mdu）；
myData.addTo（map）；
//如果单击单选按钮1。
document.getElementById（“radioOne”）.addEventListener（'click'，函数（事件）{
表达式='feature.properties.Status=='Issued'；
console.log（表达式）；
myData.clearLayers（）；
map.removeLayer（myData）；
mdu=L.geoJson（数据{
pointToLayer：功能（特性、latlng）{
返回L.circleMarker（车床{
颜色：'黑色'，
fillColor:'红色'，
不透明度：1，
半径：8
})
},  
onEachFeature：功能（功能，图层）{
layer.bindPopup（feature.properties.Owner）；
},
过滤器：功能（特征，层）{
返回（feature.properties.Type==“MDU”）&&（feature.properties.Status==“已发布”）；
},
});
map.addLayer（集群）；
/*
$.getJSON（url、函数（数据）{
mdu.addData（数据）；
});
*/
myData.addLayer（mdu）；
myData.addTo（map）；；
});
//如果单击单选按钮2。
document.getElementById（“radioTwo”）.addEventListener（'click'，函数（事件）{
表达式='feature.properties.Status=='Completed_and_invoited'；
console.log（表达式）；
map.removeLayer（myData）；
myData.clearLayers（）；
mdu=L.geoJson（空{
pointToLayer：功能（特性、latlng）{
返回L.circleMarker（车床{
颜色：'黑色'，
fillColor:'绿色'，
不透明度：1，
半径：8
})
},  
onEachFeature：功能（功能，图层）{
layer.bindPopup（feature.properties.Owner）；
},
过滤器：功能（特征，层）{
返回（feature.properties.Type==“MDU”）&&（feature.properties.Status==“已完成”和“已开票”）；
},
});
$.getJSON（url、函数（数据）{
mdu.addData（数据）；
});
myData.addLayer（mdu）；
myData.addTo（map）；
});
//如果单击“调查”。
document.getElementById（“调查”）.addEventListener（“单击”），函数（事件）{
表达式='feature.properties.Status=='Survey_to_arrange'；
console.log（表达式）；
map.removeLayer（myData）；
myData.clearLayers（）；
mdu=L.geoJson（空{
pointToLayer：功能（特性、latlng）{
返回L.circleMarker（车床{
颜色：'黑色'，
fillColor:'黄色'，
不透明度：1，
半径：8
})
},  
onEachFeature：功能（功能，图层）{
layer.bindPopup（feature.properties.Owner）；
},
过滤器：功能（特征，层）{
return（feature.properties.Type==“MDU”）&&（feature.properties.Status==“Survey_to_arrange”）；
},
});
$.getJSON（url、函数（数据）{
mdu.addData（数据）；
});
myData.addLayer（mdu）；
myData.addTo（map）；
});
//如果单击了“暂停”。
document.getElementById（“保留”）.addEventListener（“单击”），函数（事件）{
//表达式='feature.properties.Status=='Do_not_design'；
//console.log（表达式）；
map.removeLayer（myData）；
myData.clearLayers（）；
mdu=L.geoJson（空{
pointToLayer：功能（特性、latlng）{
返回