は、WFSは

Question

がここに私のシナリオである第二の時間をフィルタリング設定できません。ページがロードされ、マップは空のベクターレイヤーで読み込まれます。だからこそ、機能はない。ユーザがボタンをクリックすると、CQLフィルタはCQL設定に従って機能をロードします。これを実装する

私の方法論。私は空のベクトル層を設定しました。loaderまたはstrategyはありません。

• はloader今loaderは、コールが存在することベクター層

• からstrategyを設定：ユーザが最初にクリックボタンは、「初期化」機能（= firstTimeOnly()）それを呼び出し
  が

• 今「フィルタリング」機能がボタンに取り付けられ、を呼び出さローダのCQLフィルタ及び負荷の機能をリセットすることを別の「フィルタリング」機能（= changeFilter()）クリックするたびに10 「初期化」機能は、その目的
  を務め、ボタンから自分自身を切り離します。ここで

私のコードは、これは、CQLフィルタのリセットのためにerilem's 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); 
} 

です。しかし、空のレイヤーから始めて上記のように編集したい場合は、何も得られません。私のコードはエラーを出さない。しかし、ボタンをクリックすると何も得られません。

どのようにこの問題を解決するために私をadvideしてください。あるいは、その過酷さと、あなたはもっとスマートなものを提案します。

おかげ

UPDATE

を私はローダ機能を取得changeFilterの終わりに

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

を置く場合。最初のボタンをクリックすると、firstTimeOnlyは実際にローダーを設定し、changeFilterを呼び出します。だから、ローダーはありますが動作しませんか？どんな助け？

Answer 1

Openlayersで潜在的な問題が発生することなく、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");