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

问题描述

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

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

---

解决思路

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

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

2. 优化地图的 viewControl 参数

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

修改后发现并不生效

3. 调整 devicePixelRatio

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

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

发现有一配置：

   initOptions.devicePixelRatio = Math.ceil(
      Math.max( window.devicePixelRatio,scaleRef.value.width, scaleRef.value.height)
    )

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

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

修改后生效√：

 initOptions.devicePixelRatio = Math.ceil(
    Math.max( scaleRef.value.width, scaleRef.value.height)
)
const chart = echarts.init(initOptions);

---🐒