場景

Openlayers中使用Overlay實現點擊要素彈窗并且彈窗隨之移動：

Openlayers中使用Overlay實現點擊要素彈窗并且彈窗隨之移動_BADAO_LIUMANG_QIZHI的博客-CSDN博客_openlayers 點擊要素彈窗

在上面實現的效果如下

?

怎樣讓彈窗的內容在彈窗打開的情況下動態改變其內容。

?

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,架構之路,SpringBoot領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、首先給overlay的內容的html中的標簽添加id屬性

??????????????? content.innerHTML = `<p>公眾號：</p><p id="badao">霸道的程序猿</p>`;

比如說這里給第二個p元素添加id屬性。

2、然后在定時器獲取接收到后臺數據后的回調方法中更改該元素的內容

??????????? if(document.getElementById("badao")){document.getElementById("badao").innerHTML = "霸道的程序猿-"+index;}

3、部分核心代碼

?????? // 獲取到彈框的節點DOMvar container = document.getElementById("popup");var content = document.getElementById("popup-content");var closer = document.getElementById("popup-closer");//彈窗關閉事件closer.onclick = function () {_that.overlay.setPosition(undefined);closer.blur();isShowDialog = false;return false;};// 創建一個彈窗 Overlay 對象var overlay = new ol.Overlay({element: container, //綁定 Overlay 對象和 DOM 對象的autoPan: true, // 定義彈出窗口在邊緣點擊時候可能不完整 設置自動平移效果autoPanAnimation: {duration: 250 //自動平移效果的動畫時間 9毫秒}});map.addOverlay(overlay);//控制是否顯示彈窗var isShowDialog = false;let _that = this;map.on('singleclick', function (evt) {let coordinate = evt.coordinate// 點擊尺 （這里是尺(米)，并不是經緯度）;var feature = map.forEachFeatureAtPixel(evt.pixel, (feature) => {return feature;});if (feature) { //捕捉到要素content.innerHTML = `<p>公眾號：</p><p id="badao">霸道的程序猿</p>`;_that.overlay.setPosition(coordinate); //把 overlay 顯示到指定的 x,y坐標isShowDialog = true;} else {console.log("沒有元素");}});//調用打點方法this.drawPoint();/*** 圖標文字打點* */function drawPoint() {this.wrnameData.forEach((item, index) => {var feature = new ol.Feature({geometry: new ol.geom.Point([Number(item.x), Number(item.y)])})let style = new ol.style.Style({image: new ol.style.Icon({scale: 0.8,src: './icon/house.png',anchor: [0.48, 0.52]}),text: new ol.style.Text({font: 'normal 12px 黑體',// // 對其方式textAlign: 'center',// 基準線textBaseline: 'middle',offsetY: -35,offsetX: 0,backgroundFill: new ol.style.Stroke({color: 'rgba(0,0,255,0.7)',}),// 文本填充樣式fill: new ol.style.Fill({color: 'rgba(236,218,20,1)'}),padding: [5, 5, 5, 5],text: `${item.wrname}`,})})feature.setStyle(style);this.pointLayer.getSource().addFeature(feature);});}//定時器循環模擬定位效果var index = 0;setInterval(() => {if(document.getElementById("badao")){document.getElementById("badao").innerHTML = "霸道的程序猿-"+index;}?????//坐標數據到頭了 就重新開始if (index > this.positionData.length - 2) {index = 0;}//定義角度var rotation = 0;//如果是最后一個點if (index == this.positionData.length - 1) {rotation = setAngle(this.positionData[index], this.positionData[index]);} else {rotation = setAngle(this.positionData[index], this.positionData[index + 1]);}//根據索引獲取數據var item = this.positionData[index];//清除上次的if (this.positonSource) {this.positonSource.clear();}var feature = new ol.Feature({geometry: new ol.geom.Point([Number(item.x), Number(item.y)])});var style = new ol.style.Style({image: new ol.style.Icon({scale: 0.8,src: './icon/car.png',anchor: [0.48, 0.52],//設置旋轉角度rotation: -rotation,}),text: new ol.style.Text({font: 'normal 12px 黑體',// // 對其方式textAlign: 'center',// 基準線textBaseline: 'middle',offsetY: -35,offsetX: 0,backgroundFill: new ol.style.Stroke({color: 'rgba(0,0,255,0.7)',}),// 文本填充樣式fill: new ol.style.Fill({color: 'rgba(236,218,20,1)'}),padding: [5, 5, 5, 5],text: `${item.carNumber}`,})});//設置樣式feature.setStyle(style);//添加feturethis.positonSource.addFeature(feature)setTimeout(() => {if (isShowDialog) {this.overlay.setPosition([Number(item.x), Number(item.y)]);}}, 0);//移到下個點index++;}, 1000);// 點位轉角function setAngle(first, second) {var dx = second.x - first.xvar dy = second.y - first.yvar rotation = Math.atan2(dy, dx)return rotation}

總結

以上是生活随笔為你收集整理的Openlayers中使用Overlay实现点击要素显示html内容弹窗并且动态更改弹窗内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。