javascript - 如何制作 MarkerClusterGroup 聚类多边形

Question

我正在尝试使用 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());

http://js.do/code/165930 - 显示聚类如何不适用于多边形

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

Answer 1

您可以像在这篇 GIS 文章中那样做: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.
});

更新实例:http://js.do/code/166021