基于openlayer4打点，点击点位弹出窗
<!DOCTYPE html>
<html>
<head>
<title>打点位、点击点位弹出信息</title>
<!-- <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css"> -->
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<!-- openlayers:地图控件 -->
<script src="js/openlayers/v4.3.3-dist/ol.js"></script>
<!-- openlayers CSS 文件 -->
<link rel="stylesheet" href="js/openlayers/v4.3.3-dist/ol.css" type="text/css" />
<!-- 弹出窗样式 -->
<link rel="stylesheet" href="js/OLMap/map-pop.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content" style="width: 360px; height: 210px;"></div>
</div>
<script>
// 初始给的中心点坐标。
var centerX = 117.3626;
var centerY = 32.9184;
// 我们需要一个vector的layer来放置图标
var layer = new ol.layer.Vector({
source : new ol.source.Vector()
})
var map = new ol.Map({
layers : [ new ol.layer.Tile({
// 加载互联网地图
source : new ol.source.OSM()
}), layer ],
target : 'map',
view : new ol.View({
projection : 'EPSG:4326',
center : [ 117.204883, 31.840285 ],
zoom : 10
})
});
var lnglats = [
[117.204883, 31.840285],
[117.2616140654, 31.8626171434],
[117.2870114613, 31.8588879936],
[117.2822851546, 31.8862905440]
];
// 创建一个Feature，并设置好在地图上的位置
var anchor = new ol.Feature({
geometry : new ol.geom.Point(lnglats[0])
});
// 设置样式，在样式中就可以设置图标
anchor.setStyle(new ol.style.Style({
image : new ol.style.Icon({
src : 'img/1_03.png'
}),
//anchor: [0.5, 1] // 设置图标位置
}));
// 添加到之前的创建的layer中去
layer.getSource().addFeature(anchor);
// 弹出窗容器DIV
var container = document.getElementById("popup");
// 弹出窗内容DIV
var content = document.getElementById("popup-content");
// 弹出窗关闭
var popupCloser = document.getElementById("popup-closer");
var overlay = new ol.Overlay({
//设置弹出框的容器
element : container,
//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
autoPan : true,
autoPanAnimation : {
duration : 250
//当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
}
});
// openlayer4只有针对整个地图事件监听，可以通过以下方式达到对feature监听，也可对feature自定义点击事件。
map.on('click', function(e) {
//在点击时获取像素区域
var pixel = map.getEventPixel(e.originalEvent);
map.forEachFeatureAtPixel(pixel, function(feature) {
//coodinate存放了点击时的坐标信息
var coodinate = e.coordinate;
console.log(coodinate);
//设置弹出框内容，可以HTML自定义
content.innerHTML = coodinate;
//设置overlay的显示位置
overlay.setPosition(coodinate);
//显示overlay
map.addOverlay(overlay);
});
});
popupCloser.addEventListener('click', function() {
overlay.setPosition(undefined);
});
/**
* 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
*/
map.on('pointermove', function (e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
})
</script>
</script>
</body>
</html>弹出窗样式：
.ol-popup {
position: absolute;
background-color: rgba(1,61,85,.7);
-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 #013d55;
bottom: 12px;
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: "✖";
color: #c3c3c3;
}转载自：https://blog.csdn.net/qq_27186245/article/details/82227234
