удалить слой в OpenLayers

Question

Я работаю с OpenLayers.добавление векторного слоя на флажок нажмите с латунной линией.но я пытаюсь удалить этот слой с такими же широтой и широтой.но не работает.

Любая помощь будет оценена.

var map;
var mapLat = 29.566;
var mapLng = -98.376;

var mapDefaultZoom = 17;

function initialize_map() {
  map = new ol.Map({
    target: "map",
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM({
          url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
        })
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([mapLng, mapLat]),
      zoom: mapDefaultZoom
    })
  });
}

function add_map_point(action, lat, lng) {

  var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
      })]
    }),
    style: new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        anchorXUnits: "fraction",
        anchorYUnits: "fraction",
        src: "https://img.icons8.com/officexs/16/000000/filled-flag.png"
      })
    })
  });

  if (action === 1) {
    map.addLayer(vectorLayer);
  } else {
    map.removeLayer(vectorLayer);
  }
}

Answer 1

Когда вы вызываете функцию add_map_point(), эта функция всегда создает новый экземпляр vectorLayer.Теперь, когда вы удаляете слой, он снова создает новый экземпляр, но не добавленный на вашу карту.

Поэтому вместо того, чтобы делать это, определите vectorLayer один раз и при изменении значения checkbox, основываясь на флажкезначение применяется ваше условие для добавления / удаления слоя.

Вы можете удалить слой двумя способами: -

1. Один из способов, вы можете напрямую передать vectorLayer, как вы определили вfirst.

   map.removeLayer(vectorLayer);
   

2. Вторым способом вы можете установить имя вашего vector-layer и после этого вы можете удалить, получив имя векторного слоя.

   map.getLayers().forEach(layer => {
     if (layer.get('name') && layer.get('name') == 'flag_vectorLayer'){
         map.removeLayer(layer)
     }
   });
   

Пожалуйста, под рабочим фрагментом кода.

КОД SNIPPET

var map,
  mapLat = 22.719568,
  mapLng = 75.857727,
  mapDefaultZoom = 17,
  vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([75.85734861628751, 22.72062520082595], 'EPSG:4326', 'EPSG:3857')),
      })]
    }),
    style: new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        anchorXUnits: "fraction",
        anchorYUnits: "fraction",
        src: "//img.icons8.com/officexs/16/000000/filled-flag.png"
      })
    })
  });

vectorLayer.set('name', 'flag_vectorLayer');

map = new ol.Map({
  target: "map",
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({
        url: "//a.tile.openstreetmap.org/{z}/{x}/{y}.png"
      })
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([mapLng, mapLat]),
    zoom: mapDefaultZoom
  })
});

function add_map_point(evt) {
  if (evt.checked) {
    map.addLayer(vectorLayer);
  } else {
    map.removeLayer(vectorLayer);
  }
}

#map {
  height: 100%;
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<title>OpenLayers example</title>
<div><input type="checkbox" onchange="add_map_point(this)" />Add/Remove point</div>

<div id="map"></div>