<!DOCTYPE html>
|
<html lang="zh-CN">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>Cesium斜面航线规划工具（3D控制器版）</title>
|
<script src="./Build/Cesium.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
<style>
|
@import url(./Build/Widgets/widgets.css);
|
|
/* 基础样式保持不变，移除原div控制器样式 */
|
.header {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
padding: 15px 20px;
|
background: rgba(0, 0, 0, 0.7);
|
z-index: 100;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
|
}
|
|
.title {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
}
|
|
.title h1 {
|
font-size: 1.6rem;
|
font-weight: 600;
|
background: linear-gradient(45deg, #4facfe, #00f2fe);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
}
|
|
.title i {
|
font-size: 1.6rem;
|
color: #00f2fe;
|
}
|
|
.controls {
|
display: flex;
|
gap: 12px;
|
}
|
|
.control-btn {
|
background: rgba(30, 30, 60, 0.8);
|
border: 2px solid #4facfe;
|
color: white;
|
padding: 8px 15px;
|
border-radius: 25px;
|
font-weight: 600;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
font-size: 0.9rem;
|
}
|
|
.control-btn:hover {
|
background: rgba(60, 100, 180, 0.9);
|
transform: translateY(-2px);
|
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
|
}
|
|
.instructions {
|
position: absolute;
|
bottom: 15px;
|
left: 15px;
|
background: rgba(0, 0, 0, 0.7);
|
border-radius: 12px;
|
padding: 15px;
|
width: 300px;
|
z-index: 100;
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
|
backdrop-filter: blur(8px);
|
border: 1px solid rgba(79, 172, 254, 0.3);
|
}
|
|
.instructions h2 {
|
font-size: 1.1rem;
|
margin-bottom: 12px;
|
color: #4facfe;
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
|
.instructions ul {
|
list-style-type: none;
|
padding-left: 8px;
|
}
|
|
.instructions li {
|
margin-bottom: 10px;
|
padding-left: 25px;
|
position: relative;
|
line-height: 1.4;
|
font-size: 0.9rem;
|
}
|
|
.instructions li:before {
|
content: "•";
|
position: absolute;
|
left: 8px;
|
color: #00f2fe;
|
font-size: 1.1rem;
|
}
|
|
.status-bar {
|
position: absolute;
|
bottom: 15px;
|
right: 15px;
|
background: rgba(0, 0, 0, 0.7);
|
border-radius: 12px;
|
padding: 12px 18px;
|
z-index: 100;
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
|
backdrop-filter: blur(8px);
|
border: 1px solid rgba(255, 200, 0, 0.3);
|
}
|
|
.status-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.status-label {
|
font-size: 0.85rem;
|
color: #aaa;
|
margin-bottom: 4px;
|
}
|
|
.status-value {
|
font-size: 1rem;
|
font-weight: 600;
|
color: #FFC800;
|
}
|
|
.tooltip {
|
position: absolute;
|
background: rgba(0, 0, 0, 0.85);
|
color: white;
|
padding: 6px 12px;
|
border-radius: 8px;
|
font-size: 0.85rem;
|
z-index: 1000;
|
pointer-events: none;
|
opacity: 0;
|
transition: opacity 0.3s;
|
border: 1px solid #4facfe;
|
max-width: 230px;
|
text-align: center;
|
backdrop-filter: blur(5px);
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="header">
|
<div class="title">
|
<i class="fas fa-plane-departure"></i>
|
<h1>Cesium斜面航线规划工具</h1>
|
</div>
|
<div class="controls">
|
<button id="resetAll" class="control-btn"><i class="fas fa-trash-alt"></i>重置场景</button>
|
</div>
|
</div>
|
|
<div class="instructions">
|
<h2><i class="fas fa-info-circle"></i>操作指南</h2>
|
<ul>
|
<li>点击地图创建A点（起点）</li>
|
<li>点击地图创建B点（终点）形成基准线</li>
|
<li>移动鼠标绕B点旋转确定斜面方向</li>
|
<li>点击创建C点，自动生成矩形斜面</li>
|
<li>点击白色控制点可调整斜面形状</li>
|
<li>拖拽场景中的<strong>环形/三色轴</strong>旋转斜面（局部坐标系）</li>
|
<li>按下Shift键可进行精确旋转（10°步进）</li>
|
</ul>
|
</div>
|
|
<div class="status-bar">
|
<div class="status-item">
|
<div class="status-label">当前模式</div>
|
<div id="currentMode" class="status-value">点击创建A点</div>
|
</div>
|
<div class="status-item">
|
<div class="status-label">高度差</div>
|
<div id="heightDiff" class="status-value">0 m</div>
|
</div>
|
<div class="status-item">
|
<div class="status-label">斜面角度</div>
|
<div id="surfaceAngle" class="status-value">0°</div>
|
</div>
|
</div>
|
|
<div id="cesiumContainer"></div>
|
|
<div class="tooltip" id="tooltip"></div>
|
|
<script>
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNjYzOTI5NC0yM2QyLTQyOTgtYWM5OS1lM2MwNTYwMGEzMjciLCJpZCI6ODQ1MjYsImlhdCI6MTY0NjM1ODM5OX0.BzsVR7Lt9RhsCia-R7E64KunaAME0HGD7Sv2-xF-RIQ'
|
|
// 初始化Cesium Viewer
|
const viewer = new Cesium.Viewer('cesiumContainer', {
|
terrain: Cesium.Terrain.fromWorldTerrain(),
|
infoBox: false,
|
baseLayerPicker: false,
|
animation: false,
|
timeline: false,
|
fullscreenButton: false,
|
geocoder: false,
|
homeButton: false,
|
sceneModePicker: false,
|
selectionIndicator: false,
|
navigationHelpButton: false,
|
navigationInstructionsInitiallyVisible: false
|
})
|
|
// 设置初始位置（北京国贸）
|
viewer.camera.setView({
|
destination: Cesium.Cartesian3.fromDegrees(116.403874, 39.914889, 1000),
|
orientation: {
|
heading: Cesium.Math.toRadians(0),
|
pitch: Cesium.Math.toRadians(-45),
|
roll: 0
|
}
|
})
|
|
// 状态变量
|
let currentState = 'addPointA' // 状态：addPointA, addPointB, rotate, addPointC, edit
|
let pointA = null // A点（起点）
|
let pointB = null // B点（终点）
|
let pointC = null // C点（斜面方向）
|
let pointD = null // D点（自动计算）
|
let surfaceEntity = null // 斜面实体
|
let controlPoints = [] // 白色控制点
|
let ringEntity = null // 环形控制器（3D）
|
let xAxisEntity = null // X轴（红）
|
let yAxisEntity = null // Y轴（绿）
|
let zAxisEntity = null // Z轴（蓝）
|
let isDragging = false // 是否正在拖拽控制器
|
let dragType = null // 拖拽类型：'ring'（环形）、'x'（X轴）、'y'（Y轴）、'z'（Z轴）
|
let startMousePos = null // 拖拽起始鼠标位置
|
let initialRotationMatrix = null // 初始旋转矩阵（用于局部坐标系）
|
|
// DOM元素
|
const currentModeEl = document.getElementById('currentMode')
|
const heightDiffEl = document.getElementById('heightDiff')
|
const surfaceAngleEl = document.getElementById('surfaceAngle')
|
const tooltipEl = document.getElementById('tooltip')
|
|
// ------------------------------ 核心函数：计算斜面局部坐标系 ------------------------------
|
function getLocalCoordinateSystem () {
|
if (!pointA || !pointB || !pointC || !pointD) return null
|
|
// 1. 斜面中心（世界坐标）
|
const center = Cesium.Cartesian3.midpoint(
|
Cesium.Cartesian3.midpoint(pointA, pointB, new Cesium.Cartesian3()),
|
Cesium.Cartesian3.midpoint(pointC, pointD, new Cesium.Cartesian3()),
|
new Cesium.Cartesian3()
|
)
|
|
// 2. 局部轴方向（基于斜面）
|
const vecAB = Cesium.Cartesian3.subtract(pointB, pointA, new Cesium.Cartesian3()) // AB向量（X轴方向）
|
const vecAD = Cesium.Cartesian3.subtract(pointD, pointA, new Cesium.Cartesian3()) // AD向量（Y轴方向）
|
const vecZ = Cesium.Cartesian3.cross(vecAB, vecAD, new Cesium.Cartesian3()) // 法线（Z轴方向）
|
Cesium.Cartesian3.normalize(vecZ, vecZ)
|
|
const vecX = Cesium.Cartesian3.normalize(vecAB, new Cesium.Cartesian3()) // 局部X轴（沿AB方向）
|
const vecY = Cesium.Cartesian3.cross(vecZ, vecX, new Cesium.Cartesian3()) // 局部Y轴（垂直于X和Z）
|
Cesium.Cartesian3.normalize(vecY, vecY)
|
|
return {
|
center: center,
|
vecX: vecX,
|
vecY: vecY,
|
vecZ: vecZ
|
}
|
}
|
|
// ------------------------------ 核心函数：更新3D控制器（环形+轴） ------------------------------
|
function updateController () {
|
const localSys = getLocalCoordinateSystem()
|
if (!localSys) return
|
|
const { center, vecX, vecY, vecZ } = localSys
|
|
// 1. 计算控制器大小（随相机距离缩放）
|
const cameraDistance = Cesium.Cartesian3.distance(viewer.camera.position, center)
|
const scale = Math.max(0.01, cameraDistance * 0.0001) // 缩放系数（避免过小）
|
const ringRadius = scale * 10 // 环形半径
|
const axisLength = scale * 5 // 轴长度
|
|
// 2. 创建/更新环形控制器（Z轴环形）
|
if (!ringEntity) {
|
ringEntity = viewer.entities.add({
|
position: center,
|
cylinder: {
|
length: scale * 0.1, // 环形厚度（极薄）
|
topRadius: ringRadius,
|
bottomRadius: ringRadius,
|
material: Cesium.Color.WHITE.withAlpha(0.3), // 半透明白色
|
outline: true,
|
outlineColor: Cesium.Color.BLACK,
|
up: vecZ // 环形平面垂直于Z轴（法线方向）
|
}
|
})
|
} else {
|
ringEntity.position = center
|
ringEntity.cylinder.topRadius = ringRadius
|
ringEntity.cylinder.bottomRadius = ringRadius
|
ringEntity.cylinder.up = vecZ
|
}
|
|
// 3. 创建/更新X轴（红）：沿局部X轴方向
|
if (!xAxisEntity) {
|
xAxisEntity = viewer.entities.add({
|
position: center,
|
arrow: {
|
direction: vecX,
|
length: axisLength,
|
material: Cesium.Color.RED,
|
headLength: scale * 1,
|
headWidth: scale * 1
|
}
|
})
|
} else {
|
xAxisEntity.position = center
|
xAxisEntity.arrow.direction = vecX
|
xAxisEntity.arrow.length = axisLength
|
}
|
|
// 4. 创建/更新Y轴（绿）：沿局部Y轴方向
|
if (!yAxisEntity) {
|
yAxisEntity = viewer.entities.add({
|
position: center,
|
arrow: {
|
direction: vecY,
|
length: axisLength,
|
material: Cesium.Color.GREEN,
|
headLength: scale * 1,
|
headWidth: scale * 1
|
}
|
})
|
} else {
|
yAxisEntity.position = center
|
yAxisEntity.arrow.direction = vecY
|
yAxisEntity.arrow.length = axisLength
|
}
|
|
// 5. 创建/更新Z轴（蓝）：沿局部Z轴方向（法线）
|
if (!zAxisEntity) {
|
zAxisEntity = viewer.entities.add({
|
position: center,
|
arrow: {
|
direction: vecZ,
|
length: axisLength,
|
material: Cesium.Color.BLUE,
|
headLength: scale * 1,
|
headWidth: scale * 1
|
}
|
})
|
} else {
|
zAxisEntity.position = center
|
zAxisEntity.arrow.direction = vecZ
|
zAxisEntity.arrow.length = axisLength
|
}
|
}
|
|
// ------------------------------ 核心函数：更新斜面 ------------------------------
|
function updateSurface () {
|
if (!pointA || !pointB || !pointC) return
|
|
// 1. 计算D点（矩形第四个顶点）
|
pointD = Cesium.Cartesian3.add(
|
pointA,
|
Cesium.Cartesian3.subtract(pointC, pointB, new Cesium.Cartesian3()),
|
new Cesium.Cartesian3()
|
)
|
|
// 2. 创建/更新3D斜面（非贴地）
|
if (!surfaceEntity) {
|
surfaceEntity = viewer.entities.add({
|
polygon: {
|
hierarchy: new Cesium.CallbackProperty(() =>
|
new Cesium.PolygonHierarchy([pointA, pointB, pointC, pointD])
|
, false),
|
material: Cesium.Color.fromBytes(0, 150, 255, 100), // 蓝色半透明
|
outline: true,
|
outlineColor: Cesium.Color.WHITE,
|
perPositionHeight: true // 每个点使用自身高度
|
}
|
})
|
}
|
|
// 3. 创建/更新白色控制点（可拖拽调整斜面）
|
if (controlPoints.length === 0) {
|
controlPoints = [pointA, pointB, pointC, pointD].map((pos, index) =>
|
viewer.entities.add({
|
position: pos,
|
point: {
|
pixelSize: 12,
|
color: Cesium.Color.WHITE,
|
outlineWidth: 2
|
},
|
label: {
|
text: `${String.fromCharCode(65 + index)}点`, // A/B/C/D点标签
|
fillColor: Cesium.Color.WHITE,
|
outlineWidth: 2,
|
scale: 0.8
|
},
|
properties: { index: index } // 标记点索引
|
})
|
)
|
} else {
|
// 更新控制点位置
|
controlPoints[0].position = pointA
|
controlPoints[1].position = pointB
|
controlPoints[2].position = pointC
|
controlPoints[3].position = pointD
|
}
|
|
// 4. 更新3D控制器（环形+轴）
|
updateController()
|
|
// 5. 更新状态显示（高度差、斜面角度）
|
updateStatus()
|
}
|
|
// ------------------------------ 核心函数：绕局部轴旋转斜面 ------------------------------
|
function rotateSurface (angle, axis, localSys) {
|
if (!localSys) return
|
|
const { center, vecX, vecY, vecZ } = localSys
|
let rotationMatrix = Cesium.Matrix3.IDENTITY
|
|
// 1. 根据轴选择旋转矩阵（局部坐标系）
|
switch (axis) {
|
case 'x':
|
rotationMatrix = Cesium.Matrix3.fromAxisAngle(vecX, angle, new Cesium.Matrix3())
|
break
|
case 'y':
|
rotationMatrix = Cesium.Matrix3.fromAxisAngle(vecY, angle, new Cesium.Matrix3())
|
break
|
case 'z':
|
default:
|
rotationMatrix = Cesium.Matrix3.fromAxisAngle(vecZ, angle, new Cesium.Matrix3())
|
break
|
}
|
|
// 2. 旋转逻辑：平移→旋转→平移回原点
|
const translateToOrigin = Cesium.Matrix4.fromTranslation(Cesium.Cartesian3.negate(center, new Cesium.Cartesian3()), new Cesium.Matrix4())
|
const rotate = Cesium.Matrix4.fromRotation(rotationMatrix, new Cesium.Matrix4())
|
const translateBack = Cesium.Matrix4.fromTranslation(center, new Cesium.Matrix4())
|
const transformMatrix = Cesium.Matrix4.multiply(translateBack, Cesium.Matrix4.multiply(rotate, translateToOrigin, new Cesium.Matrix4()), new Cesium.Matrix4())
|
|
// 3. 应用旋转到所有顶点
|
const rotatePoint = (point) => Cesium.Matrix4.multiplyByPoint(transformMatrix, point, new Cesium.Cartesian3())
|
pointA = rotatePoint(pointA)
|
pointB = rotatePoint(pointB)
|
pointC = rotatePoint(pointC)
|
pointD = rotatePoint(pointD)
|
|
// 4. 更新斜面和控制器
|
updateSurface()
|
}
|
|
// ------------------------------ 辅助函数：更新状态显示 ------------------------------
|
function updateStatus () {
|
if (!pointA || !pointB) return
|
|
// 1. 计算高度差（A和B的高度差）
|
const heightDiff = Math.abs(pointA.z - pointB.z)
|
heightDiffEl.textContent = `${Math.round(heightDiff)} m`
|
|
// 2. 计算斜面角度（高度差/水平距离的反正切）
|
const horizontalDist = Cesium.Cartesian3.distance(
|
new Cesium.Cartesian3(pointA.x, pointA.y, 0),
|
new Cesium.Cartesian3(pointB.x, pointB.y, 0)
|
)
|
const angle = horizontalDist > 0
|
? Math.atan2(heightDiff, horizontalDist) * (180 / Math.PI)
|
: 0
|
surfaceAngleEl.textContent = `${Math.round(angle)}°`
|
}
|
|
// ------------------------------ 交互逻辑：鼠标点击创建点 ------------------------------
|
viewer.screenSpaceEventHandler.setInputAction((event) => {
|
const cartesian = viewer.scene.pickPosition(event.position)
|
if (!cartesian) return
|
|
// 1. 检查是否点击了白色控制点（进入编辑模式）
|
const picked = viewer.scene.pick(event.position)
|
if (picked && picked.id && picked.id.point) {
|
currentState = 'edit'
|
currentModeEl.textContent = "编辑模式：拖拽控制点或控制器"
|
return
|
}
|
|
// 2. 根据状态创建点
|
switch (currentState) {
|
case 'addPointA':
|
// 创建A点（绿色）
|
pointA = cartesian
|
currentState = 'addPointB'
|
currentModeEl.textContent = "点击创建B点（终点）"
|
break
|
|
case 'addPointB':
|
// 创建B点（红色）
|
pointB = cartesian
|
currentState = 'rotate'
|
currentModeEl.textContent = "移动鼠标绕B点旋转（确定斜面方向）"
|
break
|
|
case 'rotate':
|
// 创建C点（蓝色），生成斜面
|
pointC = cartesian
|
currentState = 'edit'
|
currentModeEl.textContent = "编辑模式：拖拽控制点或控制器"
|
updateSurface() // 生成3D斜面
|
break
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
|
// ------------------------------ 交互逻辑：鼠标拖拽调整控制点 ------------------------------
|
viewer.screenSpaceEventHandler.setInputAction((event) => {
|
const cartesian = viewer.scene.pickPosition(event.endPosition)
|
if (!cartesian || currentState !== 'edit') return
|
|
// 检查是否拖拽了白色控制点
|
const picked = viewer.scene.pick(event.endPosition)
|
if (picked && picked.id && picked.id.point) {
|
const index = picked.id.properties.index.getValue()
|
// 更新对应点的位置
|
if (index === 0) pointA = cartesian
|
if (index === 1) pointB = cartesian
|
if (index === 2) pointC = cartesian
|
if (index === 3) pointD = cartesian
|
// 更新斜面
|
updateSurface()
|
}
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
|
// ------------------------------ 交互逻辑：3D控制器拖拽旋转 ------------------------------
|
// 1. 鼠标按下（开始拖拽）
|
viewer.screenSpaceEventHandler.setInputAction((event) => {
|
const picked = viewer.scene.pick(event.position)
|
if (!picked || !picked.id) return
|
|
// 检查是否点击了控制器（环形或轴）
|
if (picked.id === ringEntity) {
|
dragType = 'ring' // 拖拽环形（绕Z轴旋转）
|
} else if (picked.id === xAxisEntity) {
|
dragType = 'x' // 拖拽X轴（绕X轴旋转）
|
} else if (picked.id === yAxisEntity) {
|
dragType = 'y' // 拖拽Y轴（绕Y轴旋转）
|
} else if (picked.id === zAxisEntity) {
|
dragType = 'z' // 拖拽Z轴（绕Z轴旋转）
|
} else {
|
return
|
}
|
|
isDragging = true
|
startMousePos = event.position
|
initialRotationMatrix = Cesium.Matrix3.clone(getLocalCoordinateSystem()?.rotationMatrix || Cesium.Matrix3.IDENTITY)
|
}, Cesium.ScreenSpaceEventType.LEFT_DOWN)
|
|
// 2. 鼠标移动（处理拖拽）
|
viewer.screenSpaceEventHandler.setInputAction((event) => {
|
if (!isDragging || !dragType) return
|
|
const localSys = getLocalCoordinateSystem()
|
if (!localSys) return
|
|
// 计算鼠标偏移量（控制旋转灵敏度）
|
const deltaX = event.position.x - startMousePos.x
|
const deltaY = event.position.y - startMousePos.y
|
const sensitivity = 0.005 // 旋转灵敏度（越小越慢）
|
let angle = 0
|
|
// 根据拖拽类型计算旋转角度
|
switch (dragType) {
|
case 'ring':
|
// 环形拖拽：绕Z轴旋转（deltaX控制左右旋转）
|
angle = Cesium.Math.toRadians(deltaX * sensitivity)
|
break
|
case 'x':
|
// X轴拖拽：绕X轴旋转（deltaY控制上下旋转）
|
angle = Cesium.Math.toRadians(deltaY * sensitivity)
|
break
|
case 'y':
|
// Y轴拖拽：绕Y轴旋转（deltaX控制左右旋转）
|
angle = Cesium.Math.toRadians(deltaX * sensitivity)
|
break
|
case 'z':
|
// Z轴拖拽：绕Z轴旋转（deltaY控制上下旋转）
|
angle = Cesium.Math.toRadians(deltaY * sensitivity)
|
break
|
}
|
|
// 精确旋转（按下Shift键时，10°步进）
|
if (event.modifiers & Cesium.KeyboardEventModifier.SHIFT) {
|
angle = Cesium.Math.toRadians(Math.round(angle * (180 / Math.PI) / 10) * 10)
|
}
|
|
// 应用旋转
|
rotateSurface(angle, dragType, localSys)
|
startMousePos = event.position // 更新起始位置
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
|
// 3. 鼠标松开（结束拖拽）
|
viewer.screenSpaceEventHandler.setInputAction(() => {
|
isDragging = false
|
dragType = null
|
}, Cesium.ScreenSpaceEventType.LEFT_UP)
|
|
// ------------------------------ 交互逻辑：重置场景 ------------------------------
|
document.getElementById('resetAll').addEventListener('click', () => {
|
viewer.entities.removeAll()
|
currentState = 'addPointA'
|
pointA = pointB = pointC = pointD = null
|
surfaceEntity = null
|
controlPoints = []
|
ringEntity = null
|
xAxisEntity = null
|
yAxisEntity = null
|
zAxisEntity = null
|
currentModeEl.textContent = "点击创建A点"
|
heightDiffEl.textContent = "0 m"
|
surfaceAngleEl.textContent = "0°"
|
})
|
|
// ------------------------------ 辅助逻辑：显示鼠标高度提示 ------------------------------
|
viewer.screenSpaceEventHandler.setInputAction((event) => {
|
const cartesian = viewer.scene.pickPosition(event.endPosition)
|
if (!cartesian) return
|
|
// 转换为地理坐标（获取高度）
|
const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
|
const height = Math.round(cartographic.height)
|
// 显示提示框
|
tooltipEl.textContent = `高度：${height} m`
|
tooltipEl.style.left = `${event.endPosition.x + 10}px`
|
tooltipEl.style.top = `${event.endPosition.y + 10}px`
|
tooltipEl.style.opacity = 1
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
|
// 鼠标移出画布时隐藏提示框
|
viewer.screenSpaceEventHandler.setInputAction(() => {
|
tooltipEl.style.opacity = 0
|
}, Cesium.ScreenSpaceEventType.MOUSE_OUT);
|
</script>
|
</body>
|
|
</html>
|
