переключатель вкл выкл - добавление или удаление слоя

#javascript #html #radio-button

#javascript #HTML #переключатель

Вопрос:

Мне нужно удалить мой слой. Мой код добавляет слой снова и снова вместо удаления.

Это мой флажок.

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

Что делать?
Мне нужен переключатель включения-выключения.
Пожалуйста, руководство, заранее спасибо

1. Я думаю, вам следует включить больше информации о том, что TileLayer есть и что он возвращает

2. boundary является локальной переменной в функции анонимного обработчика кликов. Значение переменной (плитки) должно быть доступно в firstLayer . Вам нужна помощь в том, как это сделать?

3. Да, пожалуйста… На самом деле я пытаюсь удалить слой, когда я снял флажок с кнопки

Ответ №1:

Я предполагаю, layer1 что в JavaScript есть элемент ввода с идентификатором «layer1». Присвоение его onclick свойству значения анонимной функции заменяет onclick обработчик, определенный в HTML, поэтому повторный щелчок создает новую плитку.

Чтобы разрешить последовательность действий по щелчку, дизайн алгоритма может напоминать:

 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.

Хотя большая часть этого может быть записана как одна функция, есть несколько предположений и проблем, которые следует рассмотреть перед кодированием:

есть ли функция для удаления плитки с карты?
предполагается ли, что действие третьего щелчка повторно установит плитку на карте без ее воссоздания?
будет ли событие «изменить» лучше, чем «щелкнуть» при использовании флажков?
может ли перезагрузка страницы установить флажок на значение, которое он имел до перезагрузки? (например, в Firefox вам нужно явно сбросить форму или элементы формы при загрузке страницы?)

Я предлагаю создать некоторый код, чтобы заставить последовательность событий работать, используя, скажем, события «щелчка», и посмотреть, можно ли это изменить или нужно изменить, чтобы использовать события «изменения» в производстве.

Некоторый концептуальный код, который может помочь лучше объяснить идею:

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