在 OpenLayers 3 中从 GeoJSON 文件创建数组

Question

我正在使用 OpenLayers 3 为科学家标记的迁徙动物的路径设置动画。我像这样加载 geoJSON 文件

    var whaleSource = new ol.source.Vector({
        url: 'data/BW2205005.json',
        format: new ol.format.GeoJSON()
    });

我不想将其直接加载到图层中，而是希望在我的程序中为不同的目的使用和重复使用 geoJSON 文件中的数据。例如，我想将纬度和经度坐标拉到一个数组中以操纵它们来创建插值动画轨迹。稍后我会想查询 geoJSON 属性来重新设计男性和女性的足迹。

如何在程序的不同阶段将 geoJSON 数据加载到各种数组中，而不是直接加载到图层中？

非常感谢

Answer 1

当使用 ol.source.Vector 的 url 属性时，class 通过 XHR/AJAX 为您加载给定的 url：

Setting this option instructs the source to use an XHR loader (see ol.featureloader.xhr) and an ol.loadingstrategy.all for a one-off download of all features from that URL.

您可以使用 XHR/AJAX 使用 XMLHttpRequest 或像 jquery 这样具有 XHR/AJAX 功能的库自己加载文件。当您检索到 GeoJSON 集合时，您可以遍历它包含的特征数组并将其拆分为您需要的每一个，然后将这些特征放入新的单独的 GeoJSON 集合中。这是一个非常粗略的例子，可以让您了解这个概念：

假设以下 GeoJSON 集合：

{
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [0, 0]
    },
    "properties": {
      "name": "Free Willy"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [1, 1]
    },
    "properties": {
      "name": "Moby Dick"
    }
  }, {
    // Etc.
  }]
}

以下是加载它的方法（使用 jQuery 的 $.getJSON XHR 函数）并将其拆分为单独的集合：

// Object to store separated collections
var whales = {};

// Load url and execute handler function
$.getJSON('collection.json', function (data) {

  // Iterate the features of the collection
  data.features.forEach(function (feature) {

    // Check there is a whale already with that name
    if (!whales.hasOwnProperty(feature.properties.name)) {

      // No there isn't create empty collection
      whales[feature.properties.name] = {
        "type": "FeatureCollection",
        "features": []
      };
    }

    // Add the feature to the collection
    whales[feature.properties.name].features.push(feature);
  });
});

现在您可以使用存储在鲸鱼对象中的单独集合来创建图层。请注意，这与使用 url 属性:

有所不同

new ol.layer.Vector({
  source: new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(whales['Free Willy'], {
      featureProjection: 'EPSG:3857'
    })
  })
});

这是该概念的一个工作示例：http://plnkr.co/edit/rGwhI9vpu8ZYfAWvBZZr?p=preview

评论后编辑：

如果您想要威利的所有坐标：

// Empty array to store coordinates
var willysCoordinates = [];

// Iterate over Willy's features
whales['Free Willy'].features.forEach(function (feature) {
    willysCoordinates.push(feature.geometry.coordinates);
});

现在 willysCoordinates 包含一个嵌套的坐标数组：[[0, 0],[2, 2]]

在 OpenLayers 3 中从 GeoJSON 文件创建数组

Creating an array from GeoJSON file in OpenLayers 3

arrays

geojson

openlayers-3