openlayers 地图上加图标_openlayers 添加标记点击弹窗 定位图标闪烁

//矢量标注样式设置函数，设置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

});

// 弹窗显示

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;

overlay.setPosition(coodinate);

coodinate = [coodinate[0].toFixed(2), coodinate[1].toFixed(2)]

content.innerHTML = "

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

";

kpst._this.addOverlay(overlay);

});

});

// 弹窗关闭按钮

if (popupCloser) {

popupCloser.addEventListener('click', function () {

overlay.setPosition(undefined);

});

}

// 定位图标显示

function showDot(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");

kpst._this.point = point_overlay

}

kpst._this.markOverlay = overlay

kpst._this.showDot = showDot