目录

解决 ECharts Map3D 在高分辨率大屏下鼠标与地图位置错位的问题

问题描述

在使用 ECharts Map3D 时,地图在 1920x1080 分辨率下显示正常,但在高分辨率屏幕(客户现场大屏)上出现以下问题:

  1. 鼠标位置错位:鼠标指针与地图交互位置不匹配,点击或悬停时无法正确触发事件。
  2. 地图渲染错位:地图显示比例失调,位置偏移或显示不完整。

解决思路

1. 复现,因客户现场的大屏不好直接调试,我们采用浏览器的设备调试模式

修改设备模式为responsive,调整一样的尺寸

2. 优化地图的 viewControl 参数

javascript 复制代码
geo3D: {
    viewControl: {
        distance: 120, // 调整视角距离
        center: [0, 0, 0], // 调整地图中心点
        alpha: 40, // 调整俯视角度
        beta: 0 // 调整旋转角度
    }
}

修改后发现并不生效

3. 调整 devicePixelRatio

ECharts 提供了 devicePixelRatio 参数,用于适配不同分辨率的屏幕。可以在初始化 ECharts 实例时手动设置该参数,确保渲染比例正确。

我们的大屏做了fit模式的自适应,根据屏幕宽高比和大屏的宽高比自动计算缩放比例

发现有一配置:

js 复制代码
   initOptions.devicePixelRatio = Math.ceil(
      Math.max( window.devicePixelRatio,scaleRef.value.width, scaleRef.value.height)
    )

window.devicePixelRatio 是浏览器提供的属性,用于返回当前显示设备的物理像素与 CSS 像素的比例,通常用于处理高分辨率屏幕的适配问题。

找到问题所在 ,代码里设置了跟大屏的window.devicePixelRatio作比较,导致地图组件容器缩放了,但是渲染的地图的位置还是window.devicePixelRatio尺寸,导致位置定位错误

修改后生效√:

javascript 复制代码
 initOptions.devicePixelRatio = Math.ceil(
    Math.max( scaleRef.value.width, scaleRef.value.height)
)
const chart = echarts.init(initOptions);

---🐒

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
知否技术1 小时前
JavaScript中的闭包真的过时了?其实Vue和React中都有用到!
前端·javascript
Bruce_Liuxiaowei1 小时前
基于Flask的防火墙知识库Web应用技术解析
前端·python·flask
zhu_zhu_xia1 小时前
vue3中ref和reactive的差异分析
前端·javascript·vue.js
拉不动的猪1 小时前
刷刷题45 (白嫖xxx面试题1)
前端·javascript·面试
幼儿园技术家1 小时前
使用SPA单页面跟MPA多页面的优缺点?
前端
还是鼠鼠1 小时前
认识 Express.js:Node.js 最流行的 Web 框架
开发语言·前端·javascript·vscode·node.js·json·express
60岁咯2 小时前
VSCode插件开发九:扩展中接入Copilot AI
前端·javascript·visual studio code
excel2 小时前
webpack 核心编译器 第二节
前端
拉不动的猪2 小时前
electron的渲染进程与渲染进程之间的通信
前端·javascript·面试
冴羽2 小时前
SvelteKit 最新中文文档教程(12)—— 高级路由
前端·javascript·svelte