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

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