WFS-Filter kann nicht zum zweiten Mal eingestellt werden

Question

Hier ist mein Szenario. Die Seite lädt und die Karte wird mit einer leeren Vektorebene geladen. So ist es da, hat aber keine Features. Dann klickt der Benutzer auf eine Schaltfläche und ein CQL-Filter lädt Funktionen entsprechend den CQL-Einstellungen.

Meine Methodik, um dies zu implementieren. Ich lege eine leere Vektorschicht, keine loader oder strategy. Der Knopf der Benutzer zum ersten Mal klickt ruft eine „Initialisierung“ Funktion (= firstTimeOnly()), dass:

• setzt loader und ein strategy zur Vektor Schicht

• nun, dass ein loader vorhanden ist, Anrufe eine andere „Filterung“ -Funktion (= changeFilter()), dass
  setzt den cql Filter des Laders und Lasten bietet

• nun die „Filterung“ Funktion der Taste angebracht wird und rief
  mit jedem Klick. Die „Initialisierung“ -Funktion hat seinen Zweck erfüllt
  und löst sich von der Taste.

Hier ist mein Code

<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); 
} 

Dies zu erilem's code für cql Filter Zurücksetzen basiert und wenn ich nur seinen Code verwenden funktioniert gut. Aber wenn ich mit einer leeren Ebene beginnen und sie wie oben beschrieben bearbeiten möchte, bekomme ich nichts. Mein Code gibt keine Fehler. Aber wenn ich auf den Knopf klicke, bekomme ich nichts.

Bitte sagen Sie mir, wie Sie das beheben können. Oder vielleicht ist es ein Overkill und du schlägst etwas klüger vor.

Dank

UPDATE

Wenn ich

legte am Ende des changeFilter

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

ich die Loader-Funktion bekommen. Also, denke ich, wenn ich zum ersten Mal auf die Schaltfläche klicke, setzt FirstTimeOnly tatsächlich einen Loader und ruft changeFilter auf. Also, der Lader ist da, aber funktioniert nicht? Irgendeine Hilfe?

Answer 1

Ohne auf mögliche Probleme mit Openlayers zu stoßen, sehe ich das Problem, dass nur zum Entfernen von Listenern funktioniert, die mit addEventListener eingestellt wurden. Da Sie die onclick deklarativ in den HTML-Code eingebunden haben, wäre die Möglichkeit, dies zu lösen, document.getElementById("magicButton").onclick = null.

Das sagte ich dein Beispiel, dass irgendwo Sie in Ihrem Code festgelegt mit dem Ereignis-Listener addEventListener so ändern würde.

Beispiel:

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); 

Und die onclick im HTML loszuwerden.

Denken Sie auch daran, den Verweis auf magicButton zwischenzuspeichern, damit Sie nicht ständig getElementById aufrufen müssen.

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