OpenLayers 4縮放到群集

Question

我使用OpenLayers 4並有一個ol.source.Cluster作為源的圖層。 當我單擊聚類點時，我想放大到構成聚類的原始點的范圍。 我的問題是我無法在任何地方找到這些原始點。

我試圖從我在群集上使用的距離計算范圍，但結果並不令人滿意。

知道如何確定群集點后面的原始點是什么？

<html>
  <head>
    <title>Cluster</title>
    <link rel="stylesheet" href="https://openlayers.org /en/v4.1.1/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>

      var geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
          'type': 'name',
          'properties': {
            'name': 'EPSG:3857'
          }
        },
        'features': [{
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [0, 0]
          }
        }, {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [9, 9]
          }
        },{
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [10, 10]
          }
        }]
      };

      var source = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
      });

      var clusterSource = new ol.source.Cluster({
        source: source,
        distance: 30
      });

      var layer = new ol.layer.Vector({
        source: clusterSource
      });

      var select = new ol.interaction.Select({
        layers: [layer]     
      });

      var view = new ol.View({
        center: [5, 5],
        zoom: 20
      });

      var map = new ol.Map({
        target: 'map',
        layers: [new ol.layer.Tile({
          source: new ol.source.OSM()
          }),layer],
        view: view
      });

      map.addInteraction(select);

      var selectedFeatures = select.getFeatures();

      selectedFeatures.on('add', function(event) {
        // event.target only contains the clustered point
        var feature = event.target.item(0);
      });   

    </script>
  </body>
</html>

Answer 1

我在OpenLayers示例中找到了答案。

在您選擇的功能中，您可以執行此操作

var originalFeatures = feature.get('features');

要獲得原始功能，然后在我的情況下縮放到一定程度

var extent = new ol.extent.createEmpty();
originalFeatures.forEach(function(f, index, array){
    ol.extent.extend(extent, f.getGeometry().getExtent());
});
map.getView().fit(extent, map.getSize());

Answer 2

您可以從以下位置獲取群集中的功能：

source.getFeatures（）

你可以從以下方面獲得：

source.getExtent（）

其中source是ol.source.Cluster的實例

OpenLayers 4縮放到群集

問題描述

2 個解決方案

解決方案1
3 2017-07-10 17:25:15

解決方案2
0 2017-07-10 16:50:15

OpenLayers 4縮放到群集

問題描述

2 個解決方案

解決方案1 3 2017-07-10 17:25:15

解決方案2 0 2017-07-10 16:50:15

解決方案1
3 2017-07-10 17:25:15

解決方案2
0 2017-07-10 16:50:15