在OpenLayers中移除图层

Question

我正在使用OpenLayers。当选中复选框时，使用lat lng添加矢量图层。但是我试图使用相同的lat和lng删除该图层，但没有生效。

任何帮助将不胜感激。

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

- Amir Hossain

Answer 1

当你调用add_map_point()函数时，该函数总是创建一个新的vectorLayer实例。现在当你删除图层时，它又会创建一个新实例，但是这个实例没有添加到你的地图中。

因此，与其这样做，不如一次性定义好vectorLayer，然后根据复选框的值应用相应的条件来添加/删除图层。

您可以通过两种方式删除图层：

1. One way you can directly pass vectorLayer as you defined in first.

   map.removeLayer(vectorLayer);
   

2. Second way you can set name of your vector-layer and after that you can remove the by getting vector layer name.

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

请看下方的代码片段： 代码片段

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>

- Narendra Jadhav

---

非常感谢您的帮助，我已经添加了唯一的层名称并通过该层名称进行了删除。 - Amir Hossain