Openlayers中使用Overlay实现点击要素显示html内容弹窗并且动态更改弹窗内容

- 日理万妓 2023-10-11 17:05 31阅读 0赞

## 场景 ##

Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动：

[Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客\_openlayers 点击要素弹窗][Openlayers_Overlay_BADAO_LIUMANG_QIZHI_-CSDN_openlayers]

在上面实现的效果如下

![5a1fd4ab35174b40b92cbda2b1de7c8d.gif][]

怎样让弹窗的内容在弹窗打开的情况下动态改变其内容。

![2af55e720e604a57826e5c7ae658bcfd.gif][]

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客-C\#,架构之路,SpringBoot领域博主][BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、首先给overlay的内容的html中的标签添加id属性

content.innerHTML = `
                     公众号：
                     霸道的程序猿`;

比如说这里给第二个p元素添加id属性。

2、然后在定时器获取接收到后台数据后的回调方法中更改该元素的内容

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

3、部分核心代码

// 获取到弹框的节点DOM
         var 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 = `
                     公众号：
                     霸道的程序猿`;
                 _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);
             //添加feture
             this.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.x
             var dy = second.y - first.y
             var rotation = Math.atan2(dy, dx)
             return rotation
         }

[Openlayers_Overlay_BADAO_LIUMANG_QIZHI_-CSDN_openlayers]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122201273
[5a1fd4ab35174b40b92cbda2b1de7c8d.gif]: https://img-blog.csdnimg.cn/5a1fd4ab35174b40b92cbda2b1de7c8d.gif
[2af55e720e604a57826e5c7ae658bcfd.gif]: https://img-blog.csdnimg.cn/2af55e720e604a57826e5c7ae658bcfd.gif
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi