Javascript 如何生成MarkerClusterGroup簇多边形

Javascript 如何生成MarkerClusterGroup簇多边形,javascript,leaflet,polygon,leaflet.markercluster,Javascript,Leaflet,Polygon,Leaflet.markercluster,我正在尝试使用带多边形的markerclustergroups显示簇。现在显示多边形,但不显示簇。我一直在尝试使用多边形的质心,因为看起来markerclustergroup不喜欢多边形,但这并不真正起作用,因为markerclustergroup的动画将设置在质心上,而不是实际的多边形上 我的多边形的坐标量都不同。有些有+10套,有些有3套。 如何将markerclustergroup用于多边形 下面是我的代码: // Create variable to hold map e

我正在尝试使用带多边形的markerclustergroups显示簇。现在显示多边形,但不显示簇。我一直在尝试使用多边形的质心,因为看起来markerclustergroup不喜欢多边形,但这并不真正起作用,因为markerclustergroup的动画将设置在质心上,而不是实际的多边形上

我的多边形的坐标量都不同。有些有+10套,有些有3套。 如何将markerclustergroup用于多边形

下面是我的代码:

        // Create variable to hold map element, give initial settings to map
        var map = L.map('map', {
            center: [23.70489, 43.90137],
            zoom: 5
        });

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        }).addTo(map);

        var ojStyle = {
            "color": "#ff7800",
            "weight": 5,
            "opacity": 0.65
        };
        // Hardcoded polygons as GeoJSON
        var polygons = {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [37.99896240234376, 21.55017532555692],
                            [39.39422607421876, 21.476073444092435],
                            [38.88336181640626, 22.56582956966297],
                            [38.023681640625, 22.611475436593366],
                            [37.43591308593751, 21.99908185836153],
                            [37.28485107421876, 21.624239377938288],
                            [37.28485107421876, 21.624239377938288],
                            [37.99896240234376, 21.55017532555692]
                        ]
                    ]
                }
            }, {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [38.50708007812501, 21.453068633086783],
                            [39.20745849609376, 21.37124437061832],
                            [39.10858154296876, 20.876776727727016],
                            [38.80920410156251, 20.912700155617568],
                            [38.49884033203126, 20.94604992010052],
                            [38.50708007812501, 21.453068633086783]
                        ]
                    ]
                }
            }, {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [50.57830810546875, 25.980268007469803],
                            [50.77606201171876, 25.956809920555312],
                            [50.780181884765625, 25.69970044378398],
                            [50.56457519531251, 25.822144306879686],
                            [50.56182861328126, 25.945696562830516],
                            [50.57830810546875, 25.980268007469803]
                        ]
                    ]
                }
            }, {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [54.37408447265626, 24.51963836811676],
                            [54.29443359375001, 24.40963901896311],
                            [54.25872802734375, 24.449649897759667],
                            [54.32739257812501, 24.539627918861232],
                            [54.37133789062501, 24.559614286039903],
                            [54.37408447265626, 24.51963836811676]
                        ]
                    ]
                }
            }, {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [54.40155029296876, 24.463400705082282],
                            [54.41940307617188, 24.489648077028683],
                            [54.45785522460938, 24.462150693715266],
                            [54.43450927734376, 24.43839812102505],
                            [54.40155029296876, 24.463400705082282]
                        ]
                    ]
                }
            }]
        }
        var polygonArray = []
        for (i = 0; i < polygons.features.length; i++) {
            polygonArray.push(polygons.features[i]);
        }

        var markers = L.markerClusterGroup().addTo(map);
        var geoJsonLayer = L.geoJson(polygonArray);
        markers.addLayer(geoJsonLayer);
        map.fitBounds(markers.getBounds());
//创建用于保存映射元素的变量,为映射提供初始设置
var map=L.map('map'{
中间:[23.70489,43.90137],
缩放:5
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
}).addTo(地图);
变量类型={
“颜色”:“ff7800”,
“重量”:5,
“不透明度”:0.65
};
//将多边形硬编码为GeoJSON
变量多边形={
“类型”:“FeatureCollection”,
“特点”:[{
“类型”:“功能”,
“属性”:{},
“几何学”:{
“类型”:“多边形”,
“坐标”:[
[
[37.99896240234376, 21.55017532555692],
[39.39422607421876, 21.476073444092435],
[38.88336181640626, 22.56582956966297],
[38.023681640625, 22.611475436593366],
[37.43591308593751, 21.99908185836153],
[37.28485107421876, 21.624239377938288],
[37.28485107421876, 21.624239377938288],
[37.99896240234376, 21.55017532555692]
]
]
}
}, {
“类型”:“功能”,
“属性”:{},
“几何学”:{
“类型”:“多边形”,
“坐标”:[
[
[38.50708007812501, 21.453068633086783],
[39.20745849609376, 21.37124437061832],
[39.10858154296876, 20.876776727727016],
[38.80920410156251, 20.912700155617568],
[38.49884033203126, 20.94604992010052],
[38.50708007812501, 21.453068633086783]
]
]
}
}, {
“类型”:“功能”,
“属性”:{},
“几何学”:{
“类型”:“多边形”,
“坐标”:[
[
[50.57830810546875, 25.980268007469803],
[50.77606201171876, 25.956809920555312],
[50.780181884765625, 25.69970044378398],
[50.56457519531251, 25.822144306879686],
[50.56182861328126, 25.945696562830516],
[50.57830810546875, 25.980268007469803]
]
]
}
}, {
“类型”:“功能”,
“属性”:{},
“几何学”:{
“类型”:“多边形”,
“坐标”:[
[
[54.37408447265626, 24.51963836811676],
[54.29443359375001, 24.40963901896311],
[54.25872802734375, 24.449649897759667],
[54.32739257812501, 24.539627918861232],
[54.37133789062501, 24.559614286039903],
[54.37408447265626, 24.51963836811676]
]
]
}
}, {
“类型”:“功能”,
“属性”:{},
“几何学”:{
“类型”:“多边形”,
“坐标”:[
[
[54.40155029296876, 24.463400705082282],
[54.41940307617188, 24.489648077028683],
[54.45785522460938, 24.462150693715266],
[54.43450927734376, 24.43839812102505],
[54.40155029296876, 24.463400705082282]
]
]
}
}]
}
变量多边形阵列=[]
对于(i=0;i
-显示群集如何不适用于多边形


我正在寻找这样的解决方案:

你可以像在这篇GIS文章中那样做:

//计算多边形“中心”,使用您喜欢的算法(质心等)
L.Polygon.addInitHook(函数(){
this._latlng=this._bounds.getCenter();
});
//为以下各项提供getLatLng和setLatLng方法:
//传单.markercluster可以对多边形进行聚类。
包括({
getLatLng:function(){
归还这个;
},
setLatLng:function(){}//Dummy方法。
});

更新的实时示例:

See@ghybs我实际上在上看到了您的解决方案,并试图将您的逻辑复制到我的代码中。但无法使矩形ClulstRable与我的多边形一起工作。在向方法中添加getter和setter时,我有点迷失了方向。非常感谢您的帮助。你的片段和评论让它很容易理解。