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ローダー（あなたがol.source.Vectorにurlを渡すとき、これは同様にAJAXである）でこれを達成することができます。その後、JSONファイルをリロードすることができます。あなたの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; } 
    }; 
    } 
};