javascript - 删除 OpenLayers 中的图层

Question

我正在使用 OpenLayers。使用 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);
  }
}

Answer 1

当您调用 add_map_point() 函数时，该函数总是创建 vectorLayer 的新实例。现在，当您删除图层时，它会再次创建新实例，但不会添加到您的 map 中。

因此，当您的 checkbox 值更改时，而不是一次定义 vectorLayer，而是根据复选框值应用您添加/删除层的条件。

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

1. 一种方法可以直接传递您在第一个定义中定义的 vectorLayer。

   map.removeLayer(vectorLayer);
   

2. 第二种方法可以设置vector-layer 的名称，之后您可以通过获取矢量图层名称来删除。

   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>