OpenLayers封装popup

OpenLayers封装popup

首先创建一个Vue文件，正常的文件即可，展示的东西以Vue语法展示

• html

<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>

• js

let element = document.getElementById("popup");
let closer = document.getElementById("popup-closer");
makeOverLayer(element, closer, res.point);//Vue中dom结构   vue中关闭图标dom  要展示的坐标点

• 类封装

import Overlay from "ol/Overlay";
export default class LayerManager {
    //map 传递过来的Map地图对象
    constructor(map) {
           this.map = map
 
        this.olOverlay = null
        
    }
makeOverLayer(element, closer,point) {
 
        this.olOverlay = new Overlay({
            element: element,//传递的Dom结构
            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)//显示坐标点
    }
}

• css

* {
  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即可展示