在单击(OpenLayers 4)上显示Geojson功能

Question

使用openlayers 4显示带有geojson数据的地图(其中几个多边形和圆形特征(。Onload所有内容都按预期显示。

现在试图在Ajax OnClick事件上显示不同的Geojson数据。尝试了docketSource.refresh();，但不起作用。请建议我一个解决方案。

我的按钮

<p:commandButton value="Change Data" ajax="true"
actionListener="#{geojsonMapController.prepareGeoJson}" oncomplete="changeGeoJsonData();"/>

JS代码

var map, docketLayer, docketSource;    
docketSource = new ol.source.Vector({
    url:'http://localhost:8080/mapApp/resources/map/fetch?111',
    format: new ol.format.GeoJSON()
});
docketLayer = new ol.layer.Vector({
    source: docketSource,
    style: styleFunction
}); 
map = new ol.Map({
    layers: [docketLayer],
    target: 'map',
    view: new ol.View({
        center: [0, 0],
        zoom: 1
    })
});
function changeGeoJsonData(){
    docketSource = new ol.source.Vector({
    url: 'http://localhost:8080/mapApp/resources/map/fetch?555',
        format: new ol.format.GeoJSON()
    });
    docketSource.refresh();
}

Answer 1

看来您没有更新矢量源。您应该在向量上调用setSource((方法：

docketLayer.setSource(...); <-- new Source config here