JavaScript - オン オフ スイッチ - レイヤーの追加または削除

okwaves2024-01-25  11

レイヤーを削除する必要があります。私のコードでは、レイヤーを削除するのではなく、何度も追加しています。

これは私のチェックボックスです。

<label class="checkbox-inline">Boundary<input type="checkbox" id="layer1" onclick="firstlayer()"></label>

これが私の JS 部分です

layer1.onclick = function () {
  
  var boundary = new TileLayer({
    source: new TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      params: {'LAYERS': 'HGMUAE:boundary', 'TILED': true},
      serverType: 'geoserver',
      // Countries have transparency, so do not fade tiles:
      transition: 0,
    }),
  })
  
  map.addLayer(boundary)
  
};



function firstlayer() {
    if (document.getElementById("layer1").checked) {
        boundary.setVisibility(true);
    } else {
        boundary.setVisibility(false);
    }
}

何をすればよいでしょうか? オンオフスイッチが必要です。 よろしくお願いいたします

TileLayer とは何か、そしてそれが何を返すかについて、より多くの情報を含めるべきだと思います

– ドミニク

2020 年 9 月 3 日、11:18

boundary は、匿名クリック ハンドラー関数のローカル変数です。変数 (タイル) の値は、firstLayer で使用できる必要があります。その方法についてサポートが必要ですか?

– トラクター

2020 年 9 月 3 日 11:33

はい、お願いします...実際には、ボタンのチェックを外したときにレイヤーを削除しようとしています

– ファルーク・ブハリ

2020 年 9 月 3 日 11:56



------------------------

JavaScript のlayer1 は、ID が「layer1」の入力要素であると仮定します。 onclick プロパティを匿名関数に設定すると、HTML で定義された onclick ハンドラーが置き換えられるため、クリックを繰り返すと新しいタイルが作成されます。

一連のクリック アクションを解決するには、次のようなアルゴリズム設計が考えられます。

click: if( layer has not been created)
            create layer
            store layer object (in variable boundary)
            add to map
            record that its visible (in checkbox value)
       else if (layer is visible)
            delete/remove from map
            record that is not visible
       else ( layer has been created and is not visible)
            add layer in variable boundary to map
            record that it is visible.

このほとんどは 1 つの関数として記述できますが、コーディングする前に考慮する必要がある前提条件と問題がいくつかあります。

マップからタイルを削除する機能はありますか? 3 回目のクリック アクションは、タイルを再作成せずにマップに再インストールすることになっていますか? 「変化」は起こるでしょうか?イベントは「クリック」よりも優れています。チェックボックスを使用するときは? リロードできますこのページでは、チェックボックスがリロード前の値に設定されていますか? (例: Firefox では、ページの読み込み時にフォームまたはフォーム要素を明示的にリセットする必要がありますか?)

「クリック」などを使用して一連のイベントが動作するように、コードをモックアップすることをお勧めします。イベントを確認し、変更できるかどうか、または「change」を使用して変更する必要があるかどうかを確認します。本番環境でのイベント。

アイデアをよりよく説明するのに役立ついくつかの概念コード:

function firstLayer(event) {
    var boundary = new Tile ( /* arguments */);
    map.addLayer(boundary);
    var visible = true; // this.checked should be the same

    this.onclick = function() {
        if( visible) {
             map.removeLayer( boundary);
        }
        else {
             map.addLayer( boundary);
        }
     };
}

0

総合生活情報サイト - OKWAVES
総合生活情報サイト - OKWAVES
生活総合情報サイトokwaves(オールアバウト)。その道のプロ(専門家)が、日常生活をより豊かに快適にするノウハウから業界の最新動向、読み物コラムまで、多彩なコンテンツを発信。