Creating an array from GeoJSON file in OpenLayers

Question

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

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.

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

Thanks much

Answer 1

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

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.

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:

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.
  }]
}

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

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

Edit after comment:

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

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