如何使用MarkerClusterGroup对多边形进行聚类

Question

我正在尝试使用markerclustergroups和Polygons显示聚类。目前，多边形已经显示出来了，但聚类没有显示。我一直在尝试使用多边形的质心，因为似乎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());

http://js.do/code/165930 - 展示了如何对多边形进行聚类，但效果不佳

我正在寻找像这个http://jsfiddle.net/ve2huzxw/237/这样的解决方案。

- Rainoa

---

请参见 https://gis.stackexchange.com/questions/197882/is-it-possible-to-cluster-polygons-in-leaflet。 - ghybs

@ghybs，我实际上看到了你在http://jsfiddle.net/ve2huzxw/237/上的解决方案，并尝试将你的逻辑复制到我的代码中。但是无法让rectangleclulsterable与我的多边形一起工作。 我在将getter和setter添加到方法中时有点迷失。 - Rainoa

Answer 1

您可以像在此GIS帖子中那样进行操作：在Leaflet中聚类多边形是否可能？

// Compute a polygon "center", use your favourite algorithm (centroid, etc.)
L.Polygon.addInitHook(function() {
  this._latlng = this._bounds.getCenter();
});

// Provide getLatLng and setLatLng methods for
// Leaflet.markercluster to be able to cluster polygons.
L.Polygon.include({
  getLatLng: function() {
    return this._latlng;
  },
  setLatLng: function() {} // Dummy method.
});

Updated live example: http://js.do/code/166021

- ghybs

---

非常感谢您的帮助。您提供的代码片段和评论使它变得易于理解。 - Rainoa

非常感谢您的帮助。对于Angular 2+也是有效的 :) - ANANDAN SELVAGANESAN