Impossibile impostare il filtro WFS la seconda volta

Question

Ecco il mio scenario. La pagina viene caricata e la mappa viene caricata con un livello vettoriale vuoto. Quindi è lì, ma non ha caratteristiche. Quindi l'utente fa clic su un pulsante e un filtro CQL carica le funzionalità in base alle impostazioni CQL.

La mia metodologia per implementare questo. Ho impostato un livello vettoriale vuoto, senza loader o strategy. Il pulsante che l'utente per la prima volta chiama una funzione "inizializzazione" (= firstTimeOnly()) che:

• fissa un loader e strategy allo strato vettore

• ora che un loader esiste, chiamate un'altra funzione "filtro" (= changeFilter()) che
  azzera i filtri CQL della pala e carichi offre

• ora la funzione "filtro" si attacca al pulsante e chiamato
  con ogni clic. La funzione "inizializzazione" è servita allo scopo
  e si stacca dal pulsante.

Ecco il mio codice

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

Questo si basa per erilem's code per il filtro CQL ripristino e se uso solo il suo codice funziona bene. Ma se voglio iniziare con un livello vuoto e modificarlo come sopra, non ottengo nulla. Il mio codice non dà errori. Ma se faccio clic sul pulsante non ottengo nulla.

Si prega di farmi come risolvere questo problema. O forse è eccessivo e tu suggerisci qualcosa di più intelligente.

Grazie

UPDATE

se metto

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

alla fine del changeFilter ottengo la funzione caricatore. Quindi, credo che la prima volta che clicco il pulsante, il primo TimeOnly imposta effettivamente un loader e chiama changeFilter. Quindi, il caricatore è lì, ma non funziona? Qualsiasi aiuto?

Answer 1

Senza entrare in potenziali problemi con Openlayers il problema che vedo è che removeEventListener funziona solo per la rimozione di listener che sono stati impostati con addEventListener. Dal momento che hai vincolato il onclick in modo dichiarativo nel codice HTML, il modo per separarlo sarebbe eseguendo document.getElementById("magicButton").onclick = null.

Detto questo, cambierei il tuo esempio in modo che da qualche parte nel codice tu imposti l'ascoltatore di eventi usando addEventListener.

Esempio:

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

E sbarazzarsi del onclick nel codice HTML.

Considerare inoltre la memorizzazione nella cache del riferimento a magicButton in modo da non dover chiamare costantemente getElementById.

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