OpenLayers弹窗闪烁问题

2020-04-27 09:54:19 阅读：366 来源： 互联网

标签：ol false Overlay overlay Popup 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教程之弹窗（叠置层）

标签：ol,false,Overlay,overlay,Popup,OpenLayers,闪烁,弹窗
来源： https://www.cnblogs.com/youzi-xuchongyou/p/12784670.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

OpenLayers弹窗闪烁问题