從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]]