如何制作MarkerClusterGroup群集多边形

Question

I am trying to show clusters using markerclustergroups with Polygons. Right now the polygons are shown but the clusters aren't. I have been trying to use center of mass for the polygons because it seems like markerclustergroup doesn't like polygons but that doesn't really work since the animation of markerclustergroup will be set on the centroids and not the actual polygon.

My polygons all vary in amount of coordinates. Some have +10 sets others have 3. How would I use markerclustergroup for polygons?

Below my code can be seen:

        // 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 - Shows how clustering doesn't work for the polygons

I am looking for a solution like this: http://jsfiddle.net/ve2huzxw/237/

Answer 1

You can do it very much like in this GIS post: Is it possible to cluster polygons in 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