OpenLayers 4中如何仅缩放至GeoJSON中的点要素？

看起来你已经搞定了GeoJSON数据的加载，现在就差把地图视野缩放到仅显示点要素这一步啦。其实核心思路就是先筛选出所有点要素，再计算它们的整体范围，最后让地图视图适配这个范围，不过要注意异步加载的问题，直接在初始化后操作可能拿不到要素哦。

下面结合你的现有代码，给你具体的实现步骤：

1. 等待矢量数据加载完成 #

因为GeoJSON是异步请求的，你直接在初始化docketSource后调用getFeatures()大概率会拿到空数组。所以我们要监听数据源的featuresloadend事件，确保所有要素都加载完成后再处理。

2. 筛选点要素并计算范围 #

在事件回调里，我们过滤出所有几何类型为Point的要素，然后计算这些点的整体边界范围，最后用地图视图的fit方法缩放到这个范围。

完整代码示例 #

把这段代码加到你现有代码的后面就行：

// 监听所有要素加载完成的事件
docketSource.on('featuresloadend', function() {
  // 从数据源中筛选出所有点要素
  const pointFeatures = docketSource.getFeatures().filter(feature => {
    // OpenLayers中几何类型是大写字符串，比如'Point'、'Polygon'
    return feature.getGeometry().getType() === 'Point';
  });

  // 如果有点要素，就缩放至它们的范围
  if (pointFeatures.length > 0) {
    // 创建一个空的范围对象
    const pointExtent = ol.extent.createEmpty();
    // 逐个扩展范围，把所有点都包含进去
    pointFeatures.forEach(feature => {
      ol.extent.extend(pointExtent, feature.getGeometry().getExtent());
    });

    // 让地图视图适配这个范围，还可以加一些优化参数
    map.getView().fit(pointExtent, {
      padding: [50, 50, 50, 50], // 给地图四周留50px的空白，避免要素贴边
      duration: 1000 // 1秒的动画过渡，让缩放更平滑
    });
  } else {
    console.log('当前数据源中没有点要素哦');
  }
});

一些小细节提醒 #

• 如果你需要在其他时机触发这个缩放（比如点击按钮），可以把筛选和缩放的逻辑封装成一个函数，需要的时候调用就行，不用一直依赖featuresloadend事件。
• 要是你的GeoJSON数据是分批加载的（比如用了分页策略），featuresloadend可能会触发多次，这时候可以考虑用change事件，判断数据源的getState()是否为ready再处理。

内容的提问来源于stack exchange，提问作者Venkat Maridu