OpenLayers弹窗闪烁问题

  问题:OpenLayers在做预警(gif图片)的弹窗时,鼠标移入gif,图片一直闪烁。

  过程:当点数据要用gif显示的时候,就不能用加载ol.Feature()的方式了,而是借助于ol.Overlay,将图片作为元素放到ol.Overlay中,作为要素的显示方式。但是还要在这个基础上实现鼠标移到gif上弹窗显示信息(我们都知道ol.Overlay大部分是用来做弹窗显示信息的),这个弹窗还要用到ol.Overlay,我借助了第三方ol-ext里面的ol.Overlay.Popup(从名字中也能知道这个弹窗是借用了ol.Overlay,然后自己改造了,所以可以把它当做ol.Overlay一样用),问题就是在ol.Overlay.Popup上再加ol.Overlay.Popup会有问题,基本会有闪烁,偶尔不闪烁。

  原因:当两个ol.Overlay.Popup叠加到一起时就会有问题,具体的原因不想深究了,大概率是因为冒泡问题。

  解决方法:首先要避免两个overlay叠加到一起,所以我们要设置一下偏移参数;第二就是阻止冒泡,设置 stopEvent: false;第三改一下这个参数:insertFirst: false

  参考代码:      

复制代码
let warn_overlay = new ol.Overlay.Popup(
                            {
                                popupClass: "tooltips",
                                stopEvent: false,
                                closeBox: false,
                                positioning: 'center-center',
                                autoPan: false,
                                autoPanAnimation: { duration: 250 }
                            });
要素overlay
复制代码
复制代码
 1  //预警弹框
 2     PopUp_overlay0 = new ol.Overlay.Popup({
 3         className: "popup_overlay",
 4         popupClass: "yellowtips", //"tooltips", "warning" "black" "default", "tips", "shadow",
 5         stopEvent: false,
 6         closeBox: false,
 7         //onshow: function () { console.log("You opened the box"); },
 8         //onclose: function () { console.log("You close the box"); },
 9         positioning: 'center-left',
10         //offsetBox: [0, -10, 0, 0],
11         offset: [5, 10],
12         insertFirst: false,
13         autoPan: true,
14         autoPanAnimation: { duration: 250 }
15     });
弹窗overlay
复制代码

 

参考文章:Openlayers Overlay使用心得

     OpenLayers教程之弹窗(叠置层)

            

posted @   Youse的二分口粮地  阅读(848)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· Vue3状态管理终极指南:Pinia保姆级教程
历史上的今天:
2018-04-27 c# 字符串转为数字
点击右上角即可分享
微信分享提示