描述：在使用openlayers作为地图前端展示层的时候，用户经常需要点击具体某个feature之后弹出该feature的具体信息，因此封装一个弹出层组件作为公共组件，样式统一，调用简单。代码如下：
1、 组件封装
Popup.js
//点击后高亮下方的feature 并且弹出popup信息做展示Popup = function (map) { this.map = map; //添加一个popup的div var div = document.createElement("div"); div.id = 'popup'; div.className = 'ol-popup'; div.innerHTML = `<a href="#" id="popup_closer" class="ol-popup-closer"></a> <div id="popup_content"></div>`; document.body.appendChild(div); var overlay = new ol.Overlay({ element: div, autoPan: true, autoPanAnimation: { duration: 250 }, offset: [2, -35] // 根据项目实际情况调整 }); map.addOverlay(overlay); //扔到map里 后面方便调用 this.popup = overlay; document.getElementById('popup_closer').onclick = function () { overlay.setPosition(undefined); //$('#popup_closer').blur(); return false; };}/** * 泡泡显示信息 * @param _info 气泡内容 * @param _position 气泡显示的位置 [lon,lat] */Popup.prototype.tooltip = function (_info, _position) { //设置popup的内容 document.getElementById('popup_content').innerHTML = _info; //设置popup的位置 this.popup.setPosition(_position);}
样式popup.css
.ol-popup {
position: absolute;
background-color: white;
-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;
font: italic bold 12px ;
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: white;
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: "✖";
}
2、点击地图后弹出当前鼠标的点击位置信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>openlayers-popup</title>
<link rel="stylesheet" href="ol.css" type="text/css">
<link rel="stylesheet" href="popup.css" type="text/css">
<style>
.map {
height: 500px;
width: 100%;
}
</style>
<script src="ol.js" type="text/javascript"></script>
<script src="popup.js" type="text/javascript"></script>
</head>
<body>
<h2>openlayers popup 工具封装测试 </h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
target: 'map',
layers:[osm],
view: new ol.View({
center: [ 120, 30],
zoom: 10,
projection: 'EPSG:4326'
})
});
var popup = new Popup(map);
//下面对鼠标点击时间进行监听
map.on('click', function(evt) {
var position = map.getEventCoordinate(evt.originalEvent);
popup.tooltip(position , position);
});
</script>
</body>
</html>
================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================
