OpenLayers封装popup
首先创建一个Vue文件,正常的文件即可,展示的东西以Vue语法展示
<template>
<div id="popup" class="ol-popup">
<div class="pophead" style="width: 100%; height: 20px">
<div
id="popup-title"
style="
font: bold 15px sans-serif;
align: left;
position: absolute;
top: 5px;
left: 8px;
color: #000000;
"
></div>
<a
href="#"
id="popup-closer"
class="ol-popup-closer"
style="color: #8e908c"
></a>
</div>
<div id="popup-content" style="padding: 10px; min-width: 500px">
</div>
</div>
<template>
let element = document.getElementById("popup");
let closer = document.getElementById("popup-closer");
makeOverLayer(element, closer, res.point);
import Overlay from "ol/Overlay";
export default class LayerManager {
constructor(map) {
this.map = map
this.olOverlay = null
}
makeOverLayer(element, closer,point) {
this.olOverlay = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [-10, -20]
});
closer.onclick = () => {
this.olOverlay.setPosition(undefined)
this.map.removeOverlay(this.olOverlay);
closer.blur()
return false
}
this.map.addOverlay(this.olOverlay)
this.olOverlay.setPosition(point)
}
}
* {
padding: 0;
margin: 0;
list-style: none;
}
.ol-popup {
position: absolute;
background-color: #57606f;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -240px;
color: #f1f2f6;
}
.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: #57606f;
border-width: 10px;
left: 50%;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 50%;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
transition: 0.5s;
}
.popup-content {
width: 100%;
display: flex;
flex-direction: column;
font-size: 14px;
}
.ol-popup-closer:after {
content: "✖";
color: #f1f2f6;
}
.ol-popup-closer:hover {
transform: rotate(360deg);
}
总结:把popup的dom结构传递到一个函数里,通过overlay即可展示