2017-03-09 26 views
2

私は、PostGIS、Geoserver、Leafletを使ってWebマップを構築しました。しかし、私は間違いなくユーザ入力を受け入れ、表示されたWMSレイヤを更新するcql_filterを適用しています。静的なcql_filterでマップが正しくロードされます。私の層のための私のジャバスクリプト)は以下の通りですと関数MYMAP(に収容されている:リーフレットcql_filterユーザ入力

var contours = L.tileLayer.wms('http://gis01-dbn:8080/geoserver/Inyaninga_243-198/wms', { 
      layers: 'Inyaninga_243-198:contours_3857', 
      format: 'image/png', 
      transparent: true, 
     }); 

contours.setParams({CQL_FILTER:"elevation = 100"}); 

私はその後、前述のフィルタパラメータを上書きして更新する更新cql_filterとして渡す機能を作成しました:

function updateParams() { 
    var x = document.getElementById("myInput").value; 
    var filter = "elevation = '" + x + "'"; 
    return contours.setParams({CQL_FILTER:filter}); 
} 

私のHTMLはまだ私はそれに応じて動作させることはできません、ユーザー入力を受け入れ、cql_filterにそれを適用することを意図されて作成したフォームを持っています

<body> 
    <form> 
     Elevation(m):<br> 
     <input type="text" id="myInput"> 
     <input type="button" value="Elevation" onclick="updateParams()"> 
    </form> 
    <div id="map" class="map"</div> 
    <script type="text/javascript"> 
     myMap(); 
    </script> 
</body> 

私は非常に新しいANていますこれは最初の試みですが、おそらく何か不足していますか?適切な方向への助けがあれば幸いです。

+0

もう少しデバッグする必要があります。 'updateParams()'がいつ実行されるのか、変更されたときに 'filter'がどのように見えるかを見るために' console.log() 'をいくつか入れてください。ブラウザの開発者ツールのネットワークインスペクタを使用して、要求されている画像のURLを確認してください。 – IvanSanchez

+0

ありがとうIvanさん、Firefoxデバッグファイルをチェックしてエラーが表示されました。関数がリンクされているボタンをクリックすると、 'ReferenceError:updateParamsが定義されていません'。 – CamMuller

答えて

0

私は最終的にこれを修正することができ、ボタンを操作するフィルタを得ました。

私はvar輪郭をmyMap()関数から移動し、HTMLのスクリプトセクション内に配置する必要がありました。最もクリーンな方法ではなく、私が働くことができるオプションだけです。

私はそれが別の関数内で関数を呼び出す問題であると推測しています。