OpenLayers 3：强制向量层重新加载GeoJSON源

I'm trying to force a vector layer in OpenLayers 3 to periodically reload its data from a GeoJSON source. The GeoJSON source changes from time to time.

我正试图强制OpenLayers 3中的矢量图层定期从GeoJSON源重新加载其数据。 GeoJSON源不时更改。

After many different attempts using different methods, I think this is the closest I've managed to get so far:

在使用不同方法进行多次尝试之后,我认为这是我迄今为止最接近的方法:

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

However this is giving me the following (every 3 seconds of course):

然而,这给了我以下(当然每3秒):

Uncaught TypeError: source.getParams is not a function

Here's all of the other code I'm using to load and display the GeoJSON file. The other layers in the map are loaded in the same way:

这是我用来加载和显示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]);

I read somewhere else that getParams simply doesn't work on vector layers, so this error wasn't entirely unexpected.

我在其他地方读到getParams根本无法在矢量图层上工作,所以这个错误并非完全出乎意料。

Is there an alternative method which will reload (not just re-render) a vector layer?

是否有一种替代方法可以重新加载(而不仅仅是重新渲染)矢量图层?

Thanks in advance. I must also apologise in advance as I'll need really specific guidance with this - I'm very new to JS and OpenLayers.

提前致谢。我还必须提前道歉,因为我需要真正具体的指导 - 我是JS和OpenLayers的新手。

Gareth

1 个解决方案

#1

(fiddle)

You can achieve this with a custom AJAX loader (when you pass url to ol.source.Vector this is AJAX as well). Then you can reload your JSON file as you will.

您可以使用自定义AJAX加载器实现此目的(当您将url传递给ol.source.Vector时,这也是AJAX)。然后,您可以重新加载JSON文件。

You can use any AJAX library you want but this is as simple as:

您可以使用任何您想要的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; }
    };
  }
};

#1