因为传统项目是html开发，不像ol5.0版本以后模块化开发了，然后官方文档实例都是以模块化代码的样子来呈现，所以传统实例代码不好找，这找到一个就先记下，实现分为以下几步
在HTML中添加一个div，用于显示弹出框
我写在了map地图标签内了，反正不影响
html
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
css
.ol-popup {
position: absolute;
background-color: #eeeeee;
-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;
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: "✖";
}
在js中获取HTML元素
var container = document.getElementById("popup"); //最外层包含所有元素的div
var content = document.getElementById("popup-content"); //显示弹出框具体内容的div
var popupCloser = document.getElementById("popup-closer"); //弹出框的关闭按钮，是一个a标签
创建一个Overlay，就是弹出框的实例对象
var overlay = new ol.Overlay({
//设置弹出框的容器
element: container,
//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
autoPan: true
});
最后就是相关事件
map.on('click',function(e){
//在点击时获取像素区域
var pixel = map.getEventPixel(e.originalEvent);
map.forEachFeatureAtPixel(pixel,function(feature){
//coodinate存放了点击时的坐标信息
var coodinate = e.coordinate;
//设置弹出框内容，可以HTML自定义
content.innerHTML = "<p>你点击的坐标为：" + coodinate + "</p>";
//设置overlay的显示位置
overlay.setPosition(coodinate);
//显示overlay
map.addOverlay(overlay);
});
});
popupCloser.addEventListener('click',function(){
overlay.setPosition(undefined);
});
完整实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示弹出框-福州鼓楼</title>
<link rel="stylesheet" type="text/css" href="../ol.css" />
<link rel="icon" type="image/x-icon" href="http://openlayers.org/assets/theme/img/favicon.ico" />
<style type="text/css">
.ol-popup {
position: absolute;
background-color: #eeeeee;
-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;
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: "✖";
}
</style>
</head>
<body>
<div id="map">
</div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</body>
<script src="../ol.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
/*********************显示地图**************************/
var pos = ol.proj.get('EPSG:3857');
var map = new ol.Map({
//地图容器div的ID
target: 'map',
//地图容器中加载的图层
layers: [],
view: new ol.View({
//设置地图投影坐标系
projection: pos,
center: [13276805.940731, 3008561.497087],
zoom: 19
}),
});
var mlayer = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://map.test.acmsmu.cn/geowebcache/service/wms',
params: {
'LAYERS': 'fzgl',
'FORMAT': 'image/png',
'SRS': 'EPSG:3857'
},
tileGrid: new ol.tilegrid.TileGrid({
resolutions: [156543.0339, 78271.51696, 39135.75848, 19567.87924, 9783.939621, 4891.96981, 2445.984905, 1222.992453, 611.496226, 305.748113, 152.874057, 76.437028, 38.218514, 19.109257, 9.554629, 4.777314, 2.388657, 1.194329, 0.597164, 0.298582],
origin: [-20037508.3427892, 20037508.3430388]
})
})
})
/*********************显示弹出层**************************/
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
});
map.on('click',function(e){
var pixel = map.getEventPixel(e.originalEvent);
console.log(pixel);
map.forEachFeatureAtPixel(pixel,function(feature){
//console.log(feature);
//return feature;
var coodinate = e.coordinate;
content.innerHTML = "<p>你点击的坐标为：" + coodinate + "</p>";
overlay.setPosition(coodinate);
map.addOverlay(overlay);
});
});
popupCloser.addEventListener('click',function(){
overlay.setPosition(undefined);
});
/*********************显示地标**************************/
var maxX = 13281566;
var minX = 13273419;
var maxY = 3008492;
var minY = 3008104;
//设置icon
//创建空的矢量容器
var vectorSource = new ol.source.Vector({});
for (var i = 1; i <= 10; i++) {
var t1 = Math.random() * (maxX - minX + 1) + minX;
var t2 = Math.random() * (maxY - minY + 1) + minY;
//创建图标特性
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([t1, t2], "XY"),
name: "my Icon",
});
//将图标特性添加进矢量中
vectorSource.addFeature(iconFeature);
//console.log(t1+" "+t2);
}
//创建图标样式
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
opacity: 0.75,
src: "https://openlayers.org/en/latest/examples/data/icon.png"
}),
});
//创建图标层
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: iconStyle
});
map.addLayer(mlayer);
map.addLayer(vectorLayer);
</script>
</html>
