OpenLayers 3: Принуждение векторного слоя для перезагрузки источника GeoJSON

Question

Я пытаюсь заставить векторный слой в OpenLayers 3 периодически перезагружать свои данные из источника GeoJSON. Источник GeoJSON время от времени меняется.

После многих различных попыток, используя различные методы, я думаю, что это самый близкий мне удалось получить до сих пор:

$(document).ready(function(){ 
    map.once("postcompose", function(){ 
     //start refreshing each 3 seconds 
     window.setInterval(function(){ 
     var source = testLayer.getSource(); 
     var params = source.getParams(); 
     params.t = new Date().getMilliseconds(); 
     source.updateParams(params); 
     }, 3000); 
    }); 
}); 

Однако это дает мне следующее (каждые 3 секунды, конечно):

Uncaught TypeError: source.getParams is not a function 

Вот еще один код, который я использую для загрузки и отображения файла GeoJSON. Остальные слои карты загружаются таким же образом:

var testSource = new ol.source.Vector({ 
    url: '/js/geojson/testfile.geojson', 
    format: new ol.format.GeoJSON() 
}); 

... 

window.testLayer = new ol.layer.Vector({ 
    source: testSource, 
    style: function(feature, resolution) { 
     var style = new ol.style.Style({ 
      fill: new ol.style.Fill({color: '#ffffff'}), 
      stroke: new ol.style.Stroke({color: 'black', width: 1}), 
      text: new ol.style.Text({ 
       font: '12px Verdana', 
       text: feature.get('testvalue'), 
       fill: new ol.style.Fill({ 
        color: 'rgba(255, 255, 255, 0.1)' 
       }), 
       stroke: new ol.style.Stroke({ 
        color: 'rgba(0, 0, 0, 1)', 
        width: 1 
       }) 
      }) 
     }); 

     return style 
    } 
}); 

... 

var olMapDiv = document.getElementById('olmap'); 
var map = new ol.Map({ 
    layers: [paddocksLayer,zonesLayer,structuresLayer,roadsLayer,testLayer], 
    interactions: ol.interaction.defaults({ 
     altShiftDragRotate: false, 
     dragPan: false, 
     rotate: false 
    }).extend([new ol.interaction.DragPan({kinetic: null})]), 
    target: olMapDiv, 
    view: view 
}); 
view.setZoom(1); 
view.setCenter([0,0]); 

Я читал где-то еще, что getParams просто не работает на векторных слоях, поэтому эта ошибка не была совершенно неожиданной.

Есть ли альтернативный метод, который будет перезагружать (а не просто повторно отображать) векторный слой?

Заранее спасибо. Я должен также извиниться заранее, так как мне понадобится действительно конкретное руководство с этим - я очень новичок в JS и OpenLayers.

Gareth

Answer 1

(fiddle)

Вы можете добиться этого с помощью пользовательского загрузчика AJAX (при передаче url в ol.source.Vector это AJAX, а). Затем вы можете перезагрузить свой JSON-файл так, как вы.

Вы можете использовать любую библиотеку AJAX вы хотите, но это так же просто, как:

var utils = { 
    refreshGeoJson: function(url, source) { 
    this.getJson(url).when({ 
     ready: function(response) { 
     var format = new ol.format.GeoJSON(); 
     var features = format.readFeatures(response, { 
      featureProjection: 'EPSG:3857' 
     }); 
     source.addFeatures(features); 
     source.refresh(); 
     } 
    }); 
    }, 
    getJson: function(url) { 
    var xhr = new XMLHttpRequest(), 
     when = {}, 
     onload = function() { 
      if (xhr.status === 200) { 
      when.ready.call(undefined, JSON.parse(xhr.response)); 
      } 
     }, 
     onerror = function() { 
      console.info('Cannot XHR ' + JSON.stringify(url)); 
     }; 
    xhr.open('GET', url, true); 
    xhr.setRequestHeader('Accept','application/json'); 
    xhr.onload = onload; 
    xhr.onerror = onerror; 
    xhr.send(null); 

    return { 
     when: function(obj) { when.ready = obj.ready; } 
    }; 
    } 
};