openlayers 实现根据点击地图得到坐标进行地图标注,并且删除之前的标识
时间: 2024-03-24 21:39:13 浏览: 110
好的,我了解您的问题。首先,您需要使用 OpenLayers 的交互功能来实现点击地图获取坐标。然后,您可以在获取坐标后使用 OpenLayers 的 Overlay 功能添加标注,并且在下一次点击时删除之前的标注。
以下是一个使用 OpenLayers 6 实现该功能的示例代码:
```javascript
// 初始化地图
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([0, 0]),
zoom: 2
})
});
// 添加交互功能
var draw;
function addInteraction() {
draw = new ol.interaction.Draw({
type: 'Point',
source: new ol.source.Vector(),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.5)',
width: 1
})
})
})
});
map.addInteraction(draw);
draw.on('drawend', function(event) {
var feature = event.feature;
var coordinates = feature.getGeometry().getCoordinates();
addOverlay(coordinates);
});
}
// 添加标注
var overlay;
function addOverlay(coordinates) {
// 删除之前的标注
if (overlay) {
map.removeOverlay(overlay);
}
var element = document.createElement('div');
element.className = 'marker';
var marker = new ol.Overlay({
element: element,
positioning: 'bottom-center',
offset: [0, -15],
position: coordinates
});
map.addOverlay(marker);
overlay = marker;
}
// 初始化交互功能
addInteraction();
```
您需要在 HTML 文件中添加一个 id 为 `map` 的元素,并且在 CSS 文件中定义 `.marker` 类的样式。例如:
```html
<div id="map"></div>
```
```css
.marker {
background-color: #ffcc33;
border: 2px solid #fff;
border-radius: 50%;
width: 10px;
height: 10px;
}
```
希望这个示例代码能够帮助您实现根据点击地图得到坐标进行地图标注,并且删除之前的标识。
阅读全文