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還是陌生的。

加雷斯

Answer 1

（ 小提琴 ）

您可以使用自定義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; }
    };
  }
};