Popup 不兼容火狐浏览器

[shining-data]

问题描述

event里feature字段的信息为null，获取不到该点的属性信息。 这个是在谷歌浏览器下的情况。

重现链接

No response

重现步骤

function addPopup(e) {

const str = `<div >${e.feature.name}</div>`;
const popup = new Popup({
    offsets: [0, 0],
    closeButton: true,
    closeOnClick: true,
    maxWidth: '300px'
})
    .setLnglat(e.lngLat)
    .setHTML(str);
scene.addPopup(popup);

}

预期行为

可以正常显示，在几个主流浏览器上

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[github-actions[bot]]

hi @shining-data, welcome!

[github-actions[bot]]

Hi @shining-data, Please star this repo if you find it useful! Thanks :star:! 你好～ @shining-data 🌟 如果这个仓库对你有帮助，可以给我们点个star支持一下～你的支持对我们来说是最大的鼓励，感谢你的支持与点赞 🌟

[lvisei]

@heiyexing see 1 see

[manbuxinghe]

遇见同样问题，click点击事件和mousemove鼠标移入事件 event里feature字段的信息为null，获取不到该点的属性信息。 官网上https://l7.antv.antgroup.com/zh/examples/component/popup/#popup2 同样会出现相同问题； 相同谷歌浏览器，相同版本版本 126.0.6478.115（正式版本） （64 位），有的电脑就可以正常显示部分电脑出现如上错误， 出现错误电脑换其他浏览器event里feature字段的信息为null，也无法正常显示

[lvisei]

firefox 上测试可以拿到数据，给个复现案例

[shining-data]

firefox 上测试可以拿到数据，给个复现案例

我是用经纬度做的打点，然后再鼠标悬浮展示

[lvisei]

有的电脑可以有的电脑不可以，不可以的电脑，谷歌、火狐、Edge、360浏览器、event里feature字段的信息为null

@shining-data @manbuxinghe 没有设备，我这边 MAC 上 谷歌、火狐、Edge 上都是可以的，可以在 codesanbox 复现一下具体的代码。

有时间的话，可以用自己有问题的设备，查找一下问题在哪里，可以直接复制这个仓库的代码到本地，欢迎为开源项目贡献力量。

[manbuxinghe]

@lvisei @shining-data 报错截图：

用的官网上的例子 https://l7.antv.antgroup.com/zh/examples/component/popup/#popup2 有的电脑可以，有的电脑不可以，不可以的电脑，谷歌、火狐、Edge、360浏览器、event里feature字段的信息为null

[lvisei]

报错截图

没有任何报错，也看不出来啥，为什么你这 maker 还是黑色的

[lvisei]

相同谷歌浏览器，相同版本版本 126.0.6478.115（正式版本） （64 位），有的电脑就可以正常显示部分电脑出现如上错误， 出现错误电脑换其他浏览器event里feature字段的信息为null，也无法正常显示

在有问题的电脑上测试，加一个 renderer 配置试试

const scene = new Scene({
        renderer: 'regl'
        ...
});

[shining-data]

相同谷歌浏览器，相同版本版本 126.0.6478.115（正式版本） （64 位），有的电脑就可以正常显示部分电脑出现如上错误， 出现错误电脑换其他浏览器event里feature字段的信息为null，也无法正常显示

在有问题的电脑上测试，加一个 renderer 配置试试

const scene = new Scene({
      renderer: 'regl'
      ...
});

可以了

[lvisei]

可以了

访问这个网站https://browserleaks.com/webgl，点击右上角截图，像这样上传一下有问题电脑的 WebGL 报告信息

[manbuxinghe]

@lvisei @shining-data 加上renderer: 'regl' 解决了感谢

[manbuxinghe]

可以了

访问这个网站https://browserleaks.com/webgl，点击右上角截图，像这样上传一下有问题电脑的 WebGL 报告信息

event里feature字段的信息为null的设备信息