Question

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

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

我想在整个程序中使用和重用geoJSON文件中的数据用于不同目的，而不是直接将其加载到图层中。例如，我想拉动lat＆amp; lon坐标成一个数组来操纵它们来创建插值的动画轨迹。稍后我将要查询geoJSON属性以重新设置男性和女性的轨迹。

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

非常感谢

Answer 1

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

设置此选项可指示源使用XHR加载程序（请参阅ol.featureloader.xhr）和ol.loadingstrategy.all，以便一次性下载该URL中的所有功能。

您可以使用XMLHttpRequest使用XHR / AJAX自行加载文件，也可以使用具有XHR / AJAX功能的jquery库加载文件。当您重新访问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＆＃39; $ .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);
  });
});

现在，您可以使用存储在whale对象中的单独集合来创建图层。请注意，这与使用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

评论后编辑：

如果你想要Willy的所有坐标：

// 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文件创建数组

1 个答案: