第二次无法设置WFS过滤器

Question

这是我的情景.页面加载,地图加载空矢量图层.所以它在那里,但没有任何功能.然后,用户单击按钮,CQL过滤器根据CQL设置加载功能.

我实现这个的方法.我设置了一个空的矢量图层,没有loader或strategy.用户第一次点击的按钮调用"初始化"功能(= firstTimeOnly()):

• 将a loader和a 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过滤器重置代码,如果我使用他的代码工作正常.但是如果我想从一个空层开始并按上面的方式编辑它,我什么也得不到.我的代码没有错误.但是,如果我点击按钮,我什么也得不到.

请告诉我如何解决这个问题.或者它可能是一个矫枉过正,你建议更聪明的东西.

谢谢

UPDATE

如果我放

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

在changeFilter的最后我得到了loader函数.所以,我想我第一次点击按钮时,firstTimeOnly实际设置了一个加载器并调用了changeFilter.所以,装载机在那里,但不起作用？有帮助吗？

Answer 1

在不涉及 Openlayers 潜在问题的情况下，我看到的问题是removeEventListener仅适用于删除使用addEventListener. 由于您onclick在 HTML 中以声明方式绑定了它，因此取消绑定的方法是执行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);

并去掉onclickHTML 中的 。

还可以考虑缓存对 的引用，magicButton这样您就不必不断调用getElementById.

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