添加覆盖物和清除
创建覆盖物
js
import { fromLonLat } from 'ol/proj'
import Overlay from 'ol/Overlay'
// 创建覆盖物
// point：坐标点
createMarker (point) {
point = point.map(item => {
item = fromLonLat(item, 'EPSG:4326')
return item
})
for (let i = 0; i < point.length; i++) {
const element = document.createElement('div')
element.setAttribute('class', `popup popup-${i + 1}`)
element.setAttribute('data-text', `${i + 1}`)
element.innerText = `${i + 1}`
const overlay = {
id: 'mapMark',
element,
position: point[i],
positioning: 'bottom-center',
insertFirst: false,
offset: [0, -6]
}
this.map.addOverlay(new Overlay(overlay))
}
},
覆盖物样式
css
/deep/ .popup {
color: #fff;
position: relative;
display: flex;
align-items: center;
justify-content: center;
&:after {
display: block;
position: absolute;
content: '';
width: 24px;
height: 24px;
background-color: #ed2727;
border-radius: 70px 70px 0 70px;
transform: rotate(45deg);
z-index: -1;
}
}
清除覆盖物
js
removeMark () {
this.map.getOverlays().clear()
},