如何製作MarkerClusterGroup羣集多邊形

我正嘗試使用帶Polygon的markerclustergroups來顯示羣集。現在顯示多邊形，但是這些多邊形不是。我一直在嘗試爲多邊形使用質量中心，因爲它看起來像markerclustergroup不喜歡多邊形，但由於markerclustergroup的動畫將設置在質心而不是實際的多邊形上，所以它不起作用。如何製作MarkerClusterGroup羣集多邊形

我的多邊形的座標數量都不相同。有些人擁有+10套，其他人擁有3. 我如何使用markerclustergroup for polygons？

下面我的代碼可以看出：

 // 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/

來源

2017-08-21 Rainoa

見https://gis.stackexchange.com/questions/197882/is-it-possible-to-cluster-polygons-in-leaflet – ghybs

@ghybs我居然看到您的解決方案在http ：//jsfiddle.net/ve2huzxw/237/，並試圖將您的邏輯重現到我的代碼中。但無法讓我的多邊形能夠使用矩形可擴展。我在添加一個getter和setter到方法中有點失落。 – Rainoa

你可以非常喜歡在這個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. 
});

更新活生生的例子：http://js.do/code/166021

來源

2017-08-22 09:18:44 ghybs

非常感謝您的幫助。您的摘錄和評論使其非常容易理解。 – Rainoa

如何製作MarkerClusterGroup羣集多邊形

回答

相關問題