删除 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的方法，如您在第一个中定义的那样。

   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>