openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本)

 addPopup() { // 使用变量存储弹窗所需的 DOM 对象 var container = document.getElementById("popup"); var closer = document.getElementById("popup-closer"); var content = document.getElementById("popup-content"); // 创建一个弹窗 Overlay 对象 this.overlay = new Overlay({ element: container, //绑定 Overlay 对象和 DOM 对象的 autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果 autoPanAnimation: { duration: 250 //自动平移效果的动画时间 9毫秒） } }); // 将弹窗添加到 map 地图中 this.map.addOverlay(this.overlay); let _that = this; /** * 为弹窗添加一个响应关闭的函数 */ closer.onclick = function() { _that.overlay.setPosition(undefined); closer.blur(); return false; }; /** * 添加单击map 响应函数来处理弹窗动作 */ this.map.on("singleclick", function(evt) { console.log(evt.coordinate); let coordinate = transform( evt.coordinate, "EPSG:3857", "EPSG:4326" ); // 点击尺 （这里是尺(米)，并不是经纬度）; let hdms = toStringHDMS(toLonLat(evt.coordinate)); // 转换为经纬度显示 content.inner万博manbetx平台 = ` 
你点击了这里：
经纬度：
 ${hdms}  
 
坐标：
X：${coordinate[0]}    Y: ${coordinate[1]}`; _that.overlay.setPosition(evt.coordinate); //把 overlay 显示到指定的 x,y坐标 }); } 

 addMarker() { var marker = new Overlay({ position: fromLonLat([104.043505, 30.58165]), positioning: "center-center", element: document.getElementById("marker"), stopEvent: false }); this.map.addOverlay(marker); }, 

 addText() { var textInfo = new Overlay({ position: fromLonLat([104.043505, 30.58165]), offset: [20, -20], element: document.getElementById("textInfo") }); this.map.addOverlay(textInfo); },