場(chǎng)景

Openlayers中使用Overlay實(shí)現(xiàn)點(diǎn)擊要素彈窗并且彈窗隨之移動(dòng)：

Openlayers中使用Overlay實(shí)現(xiàn)點(diǎn)擊要素彈窗并且彈窗隨之移動(dòng)_BADAO_LIUMANG_QIZHI的博客-CSDN博客_openlayers 點(diǎn)擊要素彈窗

在上面實(shí)現(xiàn)的效果如下

?

怎樣讓彈窗的內(nèi)容在彈窗打開(kāi)的情況下動(dòng)態(tài)改變其內(nèi)容。

?

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,架構(gòu)之路,SpringBoot領(lǐng)域博主
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

1、首先給overlay的內(nèi)容的html中的標(biāo)簽添加id屬性

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

比如說(shuō)這里給第二個(gè)p元素添加id屬性。

2、然后在定時(shí)器獲取接收到后臺(tái)數(shù)據(jù)后的回調(diào)方法中更改該元素的內(nèi)容

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

3、部分核心代碼

?????? // 獲取到彈框的節(jié)點(diǎn)DOMvar container = document.getElementById("popup");var content = document.getElementById("popup-content");var closer = document.getElementById("popup-closer");//彈窗關(guān)閉事件closer.onclick = function () {_that.overlay.setPosition(undefined);closer.blur();isShowDialog = false;return false;};// 創(chuàng)建一個(gè)彈窗 Overlay 對(duì)象var overlay = new ol.Overlay({element: container, //綁定 Overlay 對(duì)象和 DOM 對(duì)象的autoPan: true, // 定義彈出窗口在邊緣點(diǎn)擊時(shí)候可能不完整 設(shè)置自動(dòng)平移效果autoPanAnimation: {duration: 250 //自動(dòng)平移效果的動(dòng)畫(huà)時(shí)間 9毫秒}});map.addOverlay(overlay);//控制是否顯示彈窗var isShowDialog = false;let _that = this;map.on('singleclick', function (evt) {let coordinate = evt.coordinate// 點(diǎn)擊尺 （這里是尺(米)，并不是經(jīng)緯度）;var feature = map.forEachFeatureAtPixel(evt.pixel, (feature) => {return feature;});if (feature) { //捕捉到要素content.innerHTML = `<p>公眾號(hào)：</p><p id="badao">霸道的程序猿</p>`;_that.overlay.setPosition(coordinate); //把 overlay 顯示到指定的 x,y坐標(biāo)isShowDialog = true;} else {console.log("沒(méi)有元素");}});//調(diào)用打點(diǎn)方法this.drawPoint();/*** 圖標(biāo)文字打點(diǎn)* */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 黑體',// // 對(duì)其方式textAlign: 'center',// 基準(zhǔn)線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);});}//定時(shí)器循環(huán)模擬定位效果var index = 0;setInterval(() => {if(document.getElementById("badao")){document.getElementById("badao").innerHTML = "霸道的程序猿-"+index;}?????//坐標(biāo)數(shù)據(jù)到頭了 就重新開(kāi)始if (index > this.positionData.length - 2) {index = 0;}//定義角度var rotation = 0;//如果是最后一個(gè)點(diǎn)if (index == this.positionData.length - 1) {rotation = setAngle(this.positionData[index], this.positionData[index]);} else {rotation = setAngle(this.positionData[index], this.positionData[index + 1]);}//根據(jù)索引獲取數(shù)據(jù)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],//設(shè)置旋轉(zhuǎn)角度rotation: -rotation,}),text: new ol.style.Text({font: 'normal 12px 黑體',// // 對(duì)其方式textAlign: 'center',// 基準(zhǔn)線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}`,})});//設(shè)置樣式feature.setStyle(style);//添加feturethis.positonSource.addFeature(feature)setTimeout(() => {if (isShowDialog) {this.overlay.setPosition([Number(item.x), Number(item.y)]);}}, 0);//移到下個(gè)點(diǎn)index++;}, 1000);// 點(diǎn)位轉(zhuǎn)角function setAngle(first, second) {var dx = second.x - first.xvar dy = second.y - first.yvar rotation = Math.atan2(dy, dx)return rotation}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。