创建从以GeoJSON文件中的OpenLayers 3数组 [英] Creating an array from GeoJSON file in OpenLayers 3

问题描述

我使用的OpenLayers 3动画迁移科学家标记的动物的路径。我加载GeoJSON的文件，像这样

I am using OpenLayers 3 to animate the paths of migrating animals tagged by scientists. I load the geoJSON file like so

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

而不是直接加载到这一层，我想为不同的目的以GeoJSON文件在我的程序中使用和重复使用的数据。例如，我想拉纬度和放大器; LON坐标到一个数组操纵他们创造插动画轨道。后来，我将要查询的GeoJSON属性来restyle男性和女性的轨迹。

Instead of loading this directly into a layer, I would like to use and reuse the data in the geoJSON file for different purposes throughout my program. For example, I want to pull the lat & lon coordinates into an array to manipulate them to create interpolated animated tracks. Later I will want to query the geoJSON properties to restyle the tracks of males and females.

我怎么可能在我的程序的不同阶段加载GeoJSON的数据转换成不同的阵列，而不是直接进入层？

How might I load the geoJSON data into various arrays at different stages of my program instead of directly into a layer?

谢谢了

推荐答案

在使用网​​址的属性 ol.source.Vector 类加载通过XHR / AJAX给定的URL为您提供：

When using the url property of ol.source.Vector the class loads the given url via XHR/AJAX for you:

设置这个选项指示使用XHR加载程序（见ol.featureloader.xhr）和ol.loadingstrategy.all从该网址的所有功能一次性下载源。

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使用 XMLHtt prequest 或你可以加载文件像jQuery库，它拥有XHR / AJAX功能。当你retreived的GeoJSON的集合，你可以遍历所有的功能阵列其拥有并把它分解成每次你需要什么，并把这些功能整合到新的独立的GeoJSON的集合。这里是一个非常粗糙的例子给你的理念和思路：

You could load the file yourself using XHR/AJAX using XMLHttpRequest or a library like jquery which has XHR/AJAX functionality. When you've retreived the GeoJSON collection you can loop over the features array it holds and split it up into what every you need and put those features into new separate GeoJSON collections. Here's a very crude example to give you and idea of the concept:

假设以下以GeoJSON系列：

Assume the following GeoJSON collection:

{
  "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函数）来加载它和它在单独的集合分裂：

Here's how to load it (using jQuery's $.getJSON XHR function) and to split it up in to separate collections:

// 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);
  });
});

现在，您可以使用存储在鲸鱼对象创建层单独的集合。请注意，这不同于一些由使用网​​址属性：

Now you can use the separate collections stored in the whale object to create layers. Note this differs some from using the url property:

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

Here's a working example of the concept: http://plnkr.co/edit/rGwhI9vpu8ZYfAWvBZZr?p=preview

评论后编辑：

如果你想为所有的威利坐标：

If you want all the coordinates for 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]]

Now willysCoordinates holds a nested array of coordinates: [[0, 0],[2, 2]]

这篇关于创建从以GeoJSON文件中的OpenLayers 3数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！