Không thể đặt bộ lọc WFS lần thứ hai

Question

Đây là kịch bản của tôi. Trang tải và bản đồ tải với một lớp vectơ trống. Vì vậy, nó ở đó, nhưng không có tính năng. Sau đó, người dùng nhấp vào một nút và bộ lọc CQL sẽ tải các tính năng theo cài đặt CQL.

Phương pháp của tôi để thực hiện điều này. Tôi đặt một lớp vectơ trống, không có loader hoặc strategy. Nút người dùng nhấp chuột lần đầu tiên gọi là "khởi tạo" function (= firstTimeOnly()) rằng:

• lập một loader và strategy đến lớp vector

• bây giờ mà một loader tồn tại, cuộc gọi khác "lọc" chức năng (= changeFilter()) mà
  resets lọc CQL của bộ nạp và tải các tính năng

• nay là "lọc" chức năng được gắn liền với các nút và gọi
  với mỗi lần nhấp. Chức năng "khởi tạo" đã phục vụ mục đích
  và tự thoát khỏi nút.

Đây là mã của tôi

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

này được dựa vào erilem's code cho bộ lọc CQL đặt lại và nếu tôi sử dụng chỉ là mã của mình hoạt động tốt. Nhưng nếu tôi muốn bắt đầu với một lớp trống và chỉnh sửa nó như ở trên, tôi chẳng nhận được gì cả. Mã của tôi không có lỗi. Nhưng, nếu tôi nhấp vào nút tôi không nhận được gì.

Vui lòng hướng dẫn tôi cách khắc phục sự cố này. Hoặc có lẽ nó là một overkill và bạn đề nghị một cái gì đó thông minh hơn.

Cảm ơn

CẬP NHẬT

Nếu tôi đặt

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

vào cuối của changeFilter tôi nhận được chức năng nạp. Vì vậy, tôi đoán lần đầu tiên tôi nhấp vào nút, firstTimeOnly thực sự đặt trình tải và gọi changeFilter. Vì vậy, bộ nạp là có, nhưng không hoạt động? Bất kỳ giúp đỡ?

Answer 1

Nếu không gặp sự cố tiềm ẩn với Openlayers, vấn đề tôi thấy là removeEventListener chỉ hoạt động để xóa người nghe đã được đặt bằng addEventListener. Vì bạn đã ràng buộc onclick một cách rõ ràng trong HTML, cách để hủy liên kết nó sẽ bằng cách thực hiện document.getElementById("magicButton").onclick = null.

Điều đó nói rằng tôi sẽ thay đổi ví dụ của bạn để một nơi nào đó trong mã của bạn bạn đặt trình xử lý sự kiện bằng cách sử dụng addEventListener.

Ví dụ:

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

Và thoát khỏi onclick trong HTML.

Đồng thời xem xét lưu vào bộ nhớ cache tham chiếu đến magicButton để bạn không phải liên tục gọi getElementById.

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