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

Question

我使用OpenLayers 3为科学家标记的迁移动物路径设置动画。我喜欢这样

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

，而不是加载此的GeoJSON的文件直接加载到一个层，我想我的整个程序中使用和重用在用于不同目的的GeoJSON的文件中的数据。例如，我想拉动lon坐标到一个数组中来操作它们来创建内插的动画轨迹。稍后，我将要查询geoJSON属性以重新定位男性和女性的轨迹。

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

感谢很多

Answer 1

当使用ol.source.Vector的url属性的类加载通过XHR/AJAX为您指定的网址：

设置这个选项指示源使用XHR加载器（见OL .featureloader.xhr）和ol.loadingstrategy.all，以便从该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]]