无法第二次设置WFS筛选器

Cannot set WFS filter the second time

本文关键字：筛选 WFS 设置 第二次      更新时间：2023-09-26

这是我的场景。页面加载，地图加载时使用一个空矢量层。所以它在那里，但没有任何功能。然后用户点击按钮，CQL过滤器根据CQL设置加载特征。

我的方法来实现这一点。我设置了一个空的矢量层，没有loader或strategy。用户第一次点击的按钮调用一个"初始化"函数（=firstTimeOnly()），即：

  • 将loader和strategy设置为矢量层

  • 既然存在loader，则调用另一个"筛选"函数（=changeFilter()），
    重置加载程序的cql过滤器并加载功能

  • 现在，"过滤"功能被附加到按钮上，并被调用
    每次点击。"初始化"功能达到了目的
    并将其自身与按钮分离

这是我的代码

<button id= "magicButton", onclick="firstTimeOnly()">Click me</button>
//set globals to use them
var cqlFilter = "name='testpoint9'";
var urlTemplate =  'http://localhost:5550/geoserver/mymap/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=mymap:layerName&CQL_FILTER={{CQLFILTER}}&outputFormat=application/json';
var loader = function (extent) {
        var url = urlTemplate.replace('{{CQLFILTER}}', cqlFilter);
        $.ajax(url, {
            type: 'GET',
            success: function(response) {
                var res = response;
                var geojsonFormat = new ol.format.GeoJSON();
                sourceVector.addFeatures(geojsonFormat.readFeatures(response));
            }
        })
    };
var strategy = new ol.loadingstrategy.tile(ol.tilegrid.createXYZ({maxZoom: 20}));
//empty vector source
var sourceVector = new ol.source.Vector({});
function changeFilter() {
    //remove all, set cql and reload
    var featsToRemove = layerVector.getSource().getFeatures();
    for (var f=0;f<featsToRemove.length;f++)
    {
        layerVector.getSource().removeFeature(featsToRemove[f]);
    }
    cqlFilter = "name LIKE 'p'";
    sourceVector.clear(true);
}
layerVector = new ol.layer.Vector({
    source: sourceVector,
    style:styleFunction
});
function firstTimeOnly() {
    sourceVector.set('loader', loader);
    sourceVector.set('strategy', strategy);
    changeFilter();
    document.getElementById("magicButton").removeEventListener("click", firstTimeOnly, false);
    document.getElementById("magicButton").addEventListener("click", changeFilter, false);
}

这是基于erilem的cql过滤器重置代码，如果我只使用他的代码，效果会很好。但如果我想从一个空层开始，并按照上面的方式编辑它，我什么都得不到。我的代码没有错误。但是，如果我点击按钮，我什么也得不到。

请告诉我如何解决这个问题。或者这可能有些过头了，你提出了更聪明的建议。

感谢

更新

如果我放

console.log("loader "+sourceVector.get('loader'));

在changeFilter的末尾，我得到了loader函数。所以，我想我第一次点击按钮时，firstTimeOnly实际上设置了一个加载器并调用changeFilter。那么，装载机在那里，但不工作？有什么帮助吗？

在不涉及Openlayers的潜在问题的情况下，我看到的问题是removeEventListener仅适用于删除使用addEventListener设置的侦听器。由于您在HTML中以声明方式绑定了onclick，因此解除绑定的方法是执行document.getElementById("magicButton").onclick = null。

也就是说，我将更改您的示例，以便在代码中的某个位置使用addEventListener设置事件侦听器。

示例：

function firstTimeOnly() {
    sourceVector.set('loader', loader);
    sourceVector.set('strategy', strategy);
    changeFilter();
    document.getElementById("magicButton").removeEventListener("click", firstTimeOnly, false);
    document.getElementById("magicButton").addEventListener("click", changeFilter, false);
}
document.getElementById("magicButton").addEventListener("click", firstTimeOnly, false);

并去掉HTML中的onclick。

还要考虑缓存对magicButton的引用，这样就不必一直调用getElementById。

var magicButton = document.getElementById("magicButton");

相关文章：