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

this.on(this._types.WHEEL, this._mouseWheelHandler, this) 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 * Gets the mouse information for the mouse event
* *
*/ */
_getMouseInfo(position) { _getMouseInfo(position) {
let adjustedPosition = this._adjustPosition(position)
let scene = this._viewer.scene let scene = this._viewer.scene
let target = scene.pick(position)
let target = scene.pick(adjustedPosition)
let cartesian = undefined let cartesian = undefined
let surfaceCartesian = undefined let surfaceCartesian = undefined
let wgs84Position = undefined let wgs84Position = undefined
let wgs84SurfacePosition = undefined let wgs84SurfacePosition = undefined
if (scene.pickPositionSupported) { if (scene.pickPositionSupported) {
cartesian = scene.pickPosition(position)
cartesian = scene.pickPosition(adjustedPosition)
} }
if (cartesian) { if (cartesian) {
let c = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian) let c = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian)
scene.mode === Cesium.SceneMode.SCENE3D && scene.mode === Cesium.SceneMode.SCENE3D &&
!(this._viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) !(this._viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider)
) { ) {
let ray = scene.camera.getPickRay(position)
let ray = scene.camera.getPickRay(adjustedPosition)
surfaceCartesian = scene.globe.pick(ray, scene) surfaceCartesian = scene.globe.pick(ray, scene)
} else { } else {
surfaceCartesian = scene.camera.pickEllipsoid( surfaceCartesian = scene.camera.pickEllipsoid(
position,
adjustedPosition,
Cesium.Ellipsoid.WGS84 Cesium.Ellipsoid.WGS84
) )
} }


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

Laddar…
Avbryt
Spara