Bläddra i källkod

Update MouseEvent.js

处理鼠标事件,修复外部容器使用了transform: scale后鼠标点位置不正确的问题,以及不同设备上因DPI不同导致的显示问题
tags/4.0.0
lee 1 år sedan
förälder
incheckning
d0b138d581
Inget konto är kopplat till bidragsgivarens mejladress
1 ändrade filer med 31 tillägg och 5 borttagningar
  1. 31
    5
      src/modules/event/type/MouseEvent.js

+ 31
- 5
src/modules/event/type/MouseEvent.js Visa fil

@@ -51,6 +51,31 @@ class MouseEvent extends Event {
this.on(this._types.WHEEL, this._mouseWheelHandler, this)
}

/**
* 调整位置,将视图位置从像素坐标转换为归一化设备独立像素坐标。
* 这个函数用于处理不同设备上因DPI不同导致的显示问题,确保在高DPI设备上也能正确显示。
*
* @param {Object} position - 像素坐标,包含x和y属性。
* @returns {Cesium.Cartesian2} - 归一化设备独立像素坐标。
*/
_adjustPosition(position) {
// 获取容器的矩形信息,包括宽度和高度。
const containerRect = this._viewer.container.getBoundingClientRect()
// 计算容器的缩放因子,用于处理响应式布局或自适应大小的容器。
const scaleX = containerRect.width / this._viewer.container.offsetWidth
const scaleY = containerRect.height / this._viewer.container.offsetHeight

// 获取设备的像素比,用于处理高DPI设备的显示问题。
const dpiScale = window.devicePixelRatio

// 将像素坐标转换为归一化设备独立像素坐标,同时考虑了容器的缩放和设备的DPI。
const x = (position.x - containerRect.left) / scaleX / dpiScale
const y = (position.y - containerRect.top) / scaleY / dpiScale

// 返回转换后的坐标。
return new Cesium.Cartesian2(x, y)
}
/**
*
* Gets the mouse information for the mouse event
@@ -59,14 +84,15 @@ class MouseEvent extends Event {
*
*/
_getMouseInfo(position) {
let adjustedPosition = this._adjustPosition(position)
let scene = this._viewer.scene
let target = scene.pick(position)
let target = scene.pick(adjustedPosition)
let cartesian = undefined
let surfaceCartesian = undefined
let wgs84Position = undefined
let wgs84SurfacePosition = undefined
if (scene.pickPositionSupported) {
cartesian = scene.pickPosition(position)
cartesian = scene.pickPosition(adjustedPosition)
}
if (cartesian) {
let c = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian)
@@ -82,11 +108,11 @@ class MouseEvent extends Event {
scene.mode === Cesium.SceneMode.SCENE3D &&
!(this._viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider)
) {
let ray = scene.camera.getPickRay(position)
let ray = scene.camera.getPickRay(adjustedPosition)
surfaceCartesian = scene.globe.pick(ray, scene)
} else {
surfaceCartesian = scene.camera.pickEllipsoid(
position,
adjustedPosition,
Cesium.Ellipsoid.WGS84
)
}
@@ -103,7 +129,7 @@ class MouseEvent extends Event {

return {
target: target,
windowPosition: position,
windowPosition: adjustedPosition,
position: cartesian,
wgs84Position: wgs84Position,
surfacePosition: surfaceCartesian,

Laddar…
Avbryt
Spara