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