使用 Openlayers 3 将 update() 函数添加到 cql 过滤器

Question

我已经搜索解决方案 3 天了，但没有找到答案。我第一次使用 WFS 请求显示我的层，使用 update() 函数从 Dropdown list 获取 layer 并更改 cql-filter 的值，它工作：

<select name="pam" class='pam' id="pam" onchange='update()'> 
  <option value="Arbuuned">Moyen</option>
  <option value="Bended">Fort</option>
</select>
<script>
var vector = new ol.layer.Vector( { source: new ol.source.Vector() })

var geojsonFormat = new ol.format.GeoJSON();

var vectorSource = new ol.source.Vector({
  loader: function(extent, resolution, projection) {
    var url = "http://localhost:8080/geoserver/opengeo/ows?service=WFS&" +
        "version=2.0.0&request=GetFeature&typename=opengeo:arbousiers0&CQL_FILTER=code_espec="+"'"+pam.value+"'"+
        "&outputFormat=text/javascript&format_options=callback:loadFeatures"+
        "&srsname=EPSG:3857";
    $.ajax({url: url, dataType: 'jsonp', jsonp: false});
  },
  strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
    maxZoom: 19

  }))

});
window.loadFeatures = function(response) {
  vectorSource.addFeatures(geojsonFormat.readFeatures(response));
};
 window.update = function() {
 vectorSource.clear(true);
};

</script>

但是当我决定使用 WMS 请求时，我会像这样更改脚本：

var wmsSource= "code_espec="+"'"+pam.value+"'"+"";
 window.update = function() {
   wmsSource.clear(true);
};
new ol.layer.Image({
          source: new ol.source.ImageWMS({
            url: 'http://localhost:8080/geoserver/opengeo/wms',
            params: {'LAYERS': 'opengeo:arbousiers0','cql_filter':wmsSource},
            serverType: 'geoserver'                                            
          })})

当我从 dropdown list 中选择 layer 时，我什么也没得到。我不知道是否有要添加的内容或我犯的错误？谢谢你

Answer 1

我认为更新值的函数有问题。我建议这样做：

 window.update = function(){ad.getSource().updateParams({'cql_filter':"code_espec"+"="+"'"+pam.value+"'"+"});};

         var ad =new ol.layer.Image({
                    name: 'Espece(Répartition)',
              source: new ol.source.ImageWMS({
                url: 'http://localhost:8080/geoserver/opengeo/wms',
                params: {'LAYERS': 'opengeo:arbousiers0'},
                serverType: 'geoserver'                                            
              })});

使用 Openlayers 3 将 update() 函数添加到 cql 过滤器

Add update() function to cql filter using Openlayers 3

updates

geoserver

openlayers