如何使用openlayers 5中的復選框刪除地圖上的圖層？

Question

我需要幫助使用 openlayers 5 刪除地圖上的圖層。 我已經使用 checkbox 在地圖上添加了圖層。 我想要的是，如果選中圖層的復選框，圖層將出現在地圖上，如果再次取消選中該復選框，圖層將從地圖中刪除。 我已經嘗試了以下代碼，該代碼在地圖上添加了圖層但沒有刪除它。

     var checkbase = $('#main-side input')
  $(checkbase).change(function(){
   let checked = $(this)

   let checkedVal = $(this).val();
    test = new ol.layer.Image({
      source: new ol.source.ImageWMS({
        url: "http://3.16.123.168:8080/geoserver/wms?",
        params: {
          LAYERS: `twmp:${checkedVal} `
        },
        ratio: 1,
        serverType: "geoserver",
        crossOrigin: "anonymous"
      })
    });

    if (checked.is(':checked')) {
        map.addLayer(test);
    } else {
         map.removeLayer(test);

    }

  })

我為此嘗試了幾種方法，例如 map.removeLayer 和 map.dispose，如果未選中復選框，則刪除圖層但不起作用。

Answer 1

在刪除舊值之前，不應將test設置為新層。 你的代碼應該是這樣的

  var test;
  var checkbase = $('#main-side input')
  $(checkbase).change(function(){
   let checked = $(this)

   let checkedVal = $(this).val();

    if (checked.is(':checked')) {
        test = new ol.layer.Image({
          source: new ol.source.ImageWMS({
            url: "http://3.16.123.168:8080/geoserver/wms?",
            params: {
              LAYERS: `twmp:${checkedVal} `
            },
            ratio: 1,
            serverType: "geoserver",
            crossOrigin: "anonymous"
          })
        });
        map.addLayer(test);
    } else {
         map.removeLayer(test);

    }

  })