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

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

1 个答案: