环境vue3.0 ,地图为公用组件，将添加图标标记的方法放在公共地图的初始化方法里
同一时间弹窗和定位标识都只有一个，因而我把弹窗和定位标记的dom预先写好放到了页面
//矢量标注样式设置函数，设置image为图标ol.style.Icon
function createLabelStyle(feature, icon, scale, opacity) {
return (new ol.style.Style({
image: new ol.style.Icon({
opacity: opacity,
src: icon,
scale: scale // 标注图标大小
}),
text: new ol.style.Text({
textAlign: "center", // 位置
textBaseline: "middle", // 基准线
font: "normal 12px 微软雅黑", // 文字样式
text: feature.get("name"),
fill: new ol.style.Fill({
// 文本填充样式（即文字颜色)
color: "#333"
}),
stroke: new ol.style.Stroke({
color: "#Fff",
width: 1
})
})
}));
}
// 添加标注
function draw(arr, icon, scale, opacity) {
var me = this;
/*********************显示地标**************************/
// 设置标识范围
var maxX = 99;
var minX = 78;
var maxY = 36;
var minY = 26;
//创建空的矢量容器
var vectorSource = new ol.source.Vector({});
// 设置要素点
for (let i = 1; i <= arr.length; i++) {
let t1 = Math.random() * (maxX - minX + 1) + minX;
let t2 = Math.random() * (maxY - minY + 1) + minY;
//创建图标特性
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([t1, t2], "XY"),
name: arr[i - 1]
});
//设置点要素样式
iconFeature.setStyle(
createLabelStyle(iconFeature, icon, scale, opacity)
);
//将图标特性添加进矢量中
vectorSource.addFeature(iconFeature);
}
//创建矢量层
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: createLabelStyle(iconFeature, icon, scale, opacity)
});
kpst._this.rvl = vectorLayer
// kpst._this.removeLayer(vectorLayer);
// kpst._this.addLayer(vectorLayer);
}
// 标志方法 挂载到地图对象
kpst._this.draw = draw
// 将给 为的Feature
kpst._this.createLabelStyle = createLabelStyle
// 设置标识文字
var arr = ["s0", "s1", "s2", "s3", "s4", "s5", "s6", "s7", "s8", "s9"];
// 设置标识图标
var src = "https://openlayers.org/en/latest/examples/data/icon.png";
var scale = 0.5;
var opacity = 0.5;
// 将图标放到地图对象
draw(arr, src, scale, opacity);
/*********************显示弹出层**************************/
var container = document.getElementById("popup");
var content = document.getElementById("popup-content");
var popupCloser = document.getElementById("popup-closer");
var overlay = new ol.Overlay({
element: container,
autoPan: true
});
// 图标hover渲染
function showHover(t, coordinate) {
var tip = document.getElementById('tip');
tip.style.display = 'block'
tip.innerText = t
var t_overlay = new ol.Overlay({
element: tip,
positioning: 'center-center'
});
t_overlay.setPosition(coordinate);
kpst._this.addOverlay(t_overlay)
}
// 标记hover效果
kpst._this.on('pointermove', function (e) {
var pixel = kpst._this.getEventPixel(e.originalEvent);
var coordinate = kpst._this.getEventCoordinate(e.originalEvent);
var feature = kpst._this.forEachFeatureAtPixel(pixel, function (feature) {
// showHover(feature.get('name'), coordinate)
return feature;
})
})
// 弹窗显示
function showPop(coodinate) {
if (container) {
overlay.setPosition(coodinate);
coodinate = [coodinate[0].toFixed(2), coodinate[1].toFixed(2)]
content.innerHTML = "<p>你点击的坐标为：" + coodinate + "</p>";
kpst._this.addOverlay(overlay);
}
}
// 将弹窗显示方法挂载到地图对象
kpst._this.showPop = showPop
// 点击弹窗
kpst._this.on('click', function (e) {
var pixel = kpst._this.getEventPixel(e.originalEvent);
kpst._this.forEachFeatureAtPixel(pixel, function (feature) {
var coodinate = e.coordinate;
showPop(coodinate)
});
});
// 弹窗关闭按钮
if (popupCloser) {
popupCloser.addEventListener('click', function () {
overlay.setPosition(undefined);
});
}
// 定位图标显示
function showDot(coordinate) {//coordinate为坐标值
// 动态创建这个div，并将这个div作为overlay的Element，添加到地图中
// var point_div = document.createElement('div');
// point_div.id = "dot";
// point_div.style.width = '10px'
// point_div.style.height = '10px'
// point_div.style.background = 'red'
var point_div = document.getElementById('dot');
point_div.style.display = 'block'
var point_overlay = new ol.Overlay({
element: point_div,
positioning: 'center-center'
});
point_overlay.setPosition(coordinate);
point_overlay.setPositioning("center-center"); //与positioning: 'center-center' 作用同 使圆点的中心与坐标重合
}
kpst._this.markOverlay = overlay
kpst._this.showDot = showDot
调用方法，渲染图标标记
// 图标移除
map.removeLayer(map.rvl);
// 图标的添加
map.addLayer(map.rvl);
// 定位到拉萨并弹窗 点闪烁
map.showDot([91.1, 29.41]);
map.showPop([91.1, 29.41]);
map.removeOverlay(map.point);
map.addOverlay(map.point);
map.getView().setCenter([91.15, 29]); //使定位点为地图中心
弹窗 圆点 hover html
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
<div id="dot"></div>
<div class="icon-hover" id="tip"></div>
样式
.ol-popup {
position: absolute;
background-color: #eeeeeee3;
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
// bottom: 30px;
left: -50px;
min-width: 280px;
}
.ol-popup:after,
.ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: #eeeeee;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
}
#dot{
height:16px;
width:16px;
border-radius: 25px;
background: rgba(255, 0, 0, 0.9);
transform: scale(0);
animation: myfirst 1s;
animation-iteration-count: infinite;
display: none;
}
@keyframes myfirst{
to{
transform: scale(2);
background: rgba(0, 0, 0, 0);
}
}
#tip{
width: 20px;
height: 20px;
background-color:rgba(0, 195, 255, 0.87);
color: #fff;
display: none;
font-size: 12px;
text-align: center;
}