OpenLayers 6.8如何获取GeoJSON矢量图层内的坐标数据？

问题原因 #

你调用geoMoscow.getSource().getFeatures()返回空数组，是因为OpenLayers通过url参数加载外部GeoJSON是异步网络请求，你执行获取要素的代码时，文件还没完成加载和解析，数据源里还没有生成要素对象。

解决方案 #

方案1：监听数据源加载完成事件（推荐） #

通过监听矢量数据源的featuresloadend事件，在要素全部加载解析完成后再执行获取坐标的逻辑：

const vectorSource = geoMoscow.getSource()
// 监听GeoJSON要素加载完成事件
vectorSource.on('featuresloadend', () => {
  const features = vectorSource.getFeatures()
  // 遍历提取坐标，可同时提取要素自定义属性
  const coordinates = features.map(feature => {
    // 点要素直接取坐标，面/线要素可根据需求调整为getExtent()取边界、getCenter()取中心点等
    return feature.getGeometry().getCoordinates()
  })
  // 后续坐标处理逻辑写在这里
  console.log(coordinates)
})

方案2：自主请求并解析GeoJSON #

如果你需要更灵活的控制异步流程，可以自己发起请求获取GeoJSON数据，解析完成后再绑定到图层数据源：

fetch('./assets/moscow.geojson')
  .then(res => res.json())
  .then(geojson => {
    // 解析GeoJSON为OpenLayers要素对象，若坐标系和地图不一致需指定投影转换参数
    const features = new ol.format.GeoJSON().readFeatures(geojson, {
      // 根据你的实际坐标系调整，示例为WGS84转地图当前投影
      dataProjection: 'EPSG:4326',
      featureProjection: map.getView().getProjection()
    })
    // 给现有图层替换数据源
    geoMoscow.setSource(new ol.source.Vector({ features }))
    // 直接使用解析完成的要素提取坐标
    const coordinates = features.map(f => f.getGeometry().getCoordinates())
    // 后续坐标处理逻辑
  })

注意事项 #

如果你的GeoJSON坐标参考系和地图视图的参考系不一致，必须在解析要素时添加投影转换参数，否则会出现坐标偏移、要素不在可视区域的问题。

内容的提问来源于stack exchange，提问作者M Matthieu