[英]OpenLayers remove current marker before adding new
I'm trying to develop web application with tag location feature using openlayers.我正在尝试使用 openlayers 开发具有标签位置功能的 Web 应用程序。 I want to add maximum one marker to map when it is clicked.
我想在单击时添加最多一个标记来映射。 When user clicked on map for the second times, the previous marker will be deleted.
当用户第二次点击地图时,之前的标记将被删除。 But, I can't find appropriate way to remove the marker before add the new one.
但是,在添加新标记之前,我找不到合适的方法来删除标记。 Remove added marker before adding new marker
在添加新标记之前删除添加的标记
I know this question is already asked, but I have the same problem in a different code I tried everything from there and nothing worked.我知道这个问题已经被问过了,但是我在不同的代码中遇到了同样的问题,我从那里尝试了所有方法,但没有任何效果。
here's my code, I hope you can find anything to help.这是我的代码,希望你能找到任何帮助。
<script type="text/javascript">
var layers = [new ol.layer.Tile({ source: new ol.source.OSM() })];
var map = new ol.Map({
target: 'map',
view: new ol.View({
zoom: 5,
center: [166326, 5992663]
}),
interactions: ol.interaction.defaults({ altShiftDragRotate: false, pinchRotate: false }),
layers: layers
});
var search = new ol.control.SearchPhoton({
lang: "fr",
reverse: true,
position: true
});
map.addControl(search);
search.on('select', function (e) {
const a = e.coordinate[0];
let b = e.coordinate[1];
map.getView().animate({
center: e.coordinate,
zoom: Math.max(map.getView().getZoom(), 16)
});
map.getLayers().forEach(layer => {
if (layer.get('name') && layer.get('name') == 'markers') {
map.removeLayer(layer)
}
});
var markers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png' // => https://app.uploadcare.com/projects/c05bbeb5e1a61e862903/files/7110cd57-b0ee-4833-bcd1-ff0343dd01cc/?limit=100&ordering=-datetime_uploaded
})
})
});
map.addLayer(markers);
var marker = new ol.Feature(new ol.geom.Point(e.coordinate));
markers.getSource().addFeature(marker);
//console.log(markers);
});
</script>
To find a layer with a property value you need to assign it when the layer is created要查找具有属性值的图层,您需要在创建图层时对其进行分配
var markers = new ol.layer.Vector({
properties: {name: 'markers'},
source: new ol.source.Vector(),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png' // => https://app.uploadcare.com/projects/c05bbeb5e1a61e862903/files/7110cd57-b0ee-4833-bcd1-ff0343dd01cc/?limit=100&ordering=-datetime_uploaded
})
})
});
It would be easier to use a global variable for the layer为图层使用全局变量会更容易
var markers;
search.on('select', function (e) {
const a = e.coordinate[0];
let b = e.coordinate[1];
map.getView().animate({
center: e.coordinate,
zoom: Math.max(map.getView().getZoom(), 16)
});
if (markers) {
map.removeLayer(markers)
}
markers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png' // => https://app.uploadcare.com/projects/c05bbeb5e1a61e862903/files/7110cd57-b0ee-4833-bcd1-ff0343dd01cc/?limit=100&ordering=-datetime_uploaded
})
})
});
map.addLayer(markers);
var marker = new ol.Feature(new ol.geom.Point(e.coordinate));
markers.getSource().addFeature(marker);
//console.log(markers);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.