दूसरी बार WFS फ़िल्टर सेट नहीं कर सकता

Question

यहां मेरा परिदृश्य है। पृष्ठ लोड होता है और नक्शा एक खाली वेक्टर परत के साथ लोड होता है। तो वहां है, लेकिन इसमें कोई सुविधा नहीं है। फिर उपयोगकर्ता सीक्यूएल सेटिंग्स के अनुसार एक बटन और एक सीक्यूएल फिल्टर लोड सुविधाओं पर क्लिक करता है।

इसे लागू करने के लिए मेरी पद्धति। मैंने एक खाली वेक्टर परत सेट की, loader या strategy सेट किया।

• सेट एक loader और अब है कि एक loader मौजूद है, कॉल सदिश परत

• करने के लिए एक strategy: बटन उपयोगकर्ता पहली बार के लिए क्लिक करता है एक "प्रारंभ" समारोह (= firstTimeOnly()) कि कॉल एक और "फ़िल्टरिंग" समारोह (= changeFilter()) कि
  फिर सेट करता है लोडर के cql फिल्टर और भार

• सुविधाओं अब "फ़िल्टरिंग" समारोह बटन से जुड़ी औरकहा जाता हो जाता है प्रत्येक क्लिक के साथ 10 । "प्रारंभिक" फ़ंक्शन ने इसके उद्देश्य
  पर कार्य किया और बटन से खुद को अलग कर दिया।

यहाँ मेरी कोड

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

यह cql फिल्टर रीसेट के लिए erilem's code लिए आधारित है और अगर मैं का उपयोग अपने कोड ठीक काम करता है। लेकिन अगर मैं एक खाली परत से शुरू करना चाहता हूं और उपर्युक्त के रूप में इसे संपादित करना चाहता हूं, तो मुझे कुछ भी नहीं मिलता है। मेरा कोड कोई त्रुटि नहीं देता है। लेकिन, अगर मैं बटन पर क्लिक करता हूं तो मुझे कुछ भी नहीं मिलता है।

कृपया मुझे सलाह दें कि इसे कैसे ठीक किया जाए। या शायद यह एक ओवरकिल है और आप कुछ बेहतर सुझाव देते हैं।

धन्यवाद

अद्यतन

अगर मैं changeFilter मैं लोडर समारोह पाने के अंत में

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

डाल दिया। तो, मुझे लगता है कि पहली बार जब मैं बटन पर क्लिक करता हूं, तो पहली बार केवल एक लोडर सेट करता है और कॉल बदलता है फ़िल्टर। तो, लोडर वहाँ है, लेकिन काम नहीं करता है? कोई मदद?

Answer 1

ओपनलेयर के साथ संभावित मुद्दों को प्राप्त किए बिना मुझे लगता है कि 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");