Javascript OpenLayers 4缩放到群集_Javascript_Openlayers

Javascript OpenLayers 4缩放到群集

javascript openlayers

Javascript OpenLayers 4缩放到群集,javascript,openlayers,Javascript,Openlayers,Im使用OpenLayers 4，并且有一个以ol.source.Cluster作为源的层。单击某个聚集点时，我希望放大到组成该聚集的原始点的范围。我的问题是，我在任何地方都找不到这些原始点我曾尝试根据我在集群上使用的距离计算范围，但结果并不令人满意知道如何确定簇点后面的原始点是什么吗 <html> <head> <title>Cluster</title> <link rel="stylesheet" href="h

Im使用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>


簇
变量geojsonObject={
“类型”：“功能集合”，
“crs”：{
“类型”：“名称”，
“属性”：{
'name'：'EPSG:3857'
}
},
“特征”：[{
“类型”：“特征”，
“几何学”：{
'类型'：'点'，
“坐标”：[0，0]
}
}, {
“类型”：“特征”，
“几何学”：{
'类型'：'点'，
“坐标”：[9,9]
}
},{
“类型”：“特征”，
“几何学”：{
'类型'：'点'，
“坐标”：[10,10]
}
}]
};
var source=新的ol.source.Vector({
特性：（新的ol.format.GeoJSON（））.readFeatures（geojsonObject）
});
var clusterSource=新的ol.source.Cluster({
资料来源：资料来源，
距离：30
});
var layer=新ol.layer.Vector({
资料来源：clusterSource
});
var select=新建ol.interaction.select({
图层：[图层]
});
变量视图=新的ol.view({
中间：[5,5]，
缩放：20
});
var map=新ol.map({
目标：“地图”，
图层：[新建ol.layer.Tile({
来源：new ol.source.OSM（）
})，图层]，
视图：视图
});
map.addInteraction（选择）；
var selectedFeatures=select.getFeatures（）；
selectedFeatures.on（'add'，函数（事件）{
//event.target仅包含聚集点
var feature=event.target.item（0）；
});

您可以从以下位置获得群集中的功能：

source.getFeatures（）

您可以从以下位置获取范围：

source.getExtent（）

其中source是ol.source.Cluster的一个实例

我在一个

在所选功能中，您可以执行以下操作：

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());

但是这会给我源代码中的所有特性，我只想要组成一个聚集点的特性（我刚刚选择的那个）。无论如何，我找到了一个答案，我会把它贴出来供将来参考。