openlayers3线段添加闪烁_openlayers 添加标记点击弹窗 定位图标闪烁

环境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 = "

你点击的坐标为：" + coodinate + "

";

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

样式

.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;

}