Appearance
概述
通过案例综合掌握多个事件操作,比如:LEFT_DOWN,LEFT_UP,MOUSE_MOVE等。
javascript
let isDrawing = false // 是否正在绘制
let startPosition // 起点(Cartesian3)
let endPosition // 终点(Cartesian3)
let rectangleEntity // 方框实体
const startDraw = () => {
isDrawing = true
const controller = viewer.scene.screenSpaceCameraController
controller.enableZoom = false // 禁止缩放
controller.enableRotate = false // 禁止拖拽
controller.enableTilt = false // 禁止倾斜
}
const stopDraw = () => {
isDrawing = false
const controller = viewer.scene.screenSpaceCameraController
controller.enableZoom = true // 禁止缩放
controller.enableRotate = true // 禁止拖拽
controller.enableTilt = true // 禁止倾斜
}
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
handler.setInputAction(function (e) {
if (!isDrawing) return
const cartesian = viewer.scene.pickPosition(e.position)
if (!cartesian) return
startPosition = cartesian
// 创建方框实体
rectangleEntity = viewer.entities.add({
rectangle: {
coordinates: new Cesium.CallbackProperty(() => {
if (!startPosition || !endPosition) return null
const rect = Cesium.Rectangle.fromCartesianArray([
startPosition,
endPosition,
])
return rect
}, false),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.RED,
outlineWidth: 2,
},
})
}, Cesium.ScreenSpaceEventType.LEFT_DOWN)
handler.setInputAction(function (e) {
if (!isDrawing || !startPosition) return
const cartesian = viewer.scene.pickPosition(e.endPosition)
if (!cartesian) return
endPosition = cartesian
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
handler.setInputAction(function (e) {
if (!isDrawing || !startPosition || !endPosition) return
// 计算最终矩形坐标
const finalRect = Cesium.Rectangle.fromCartesianArray([
startPosition,
endPosition,
])
// 替换为固定坐标(不再使用 CallbackProperty)
rectangleEntity.rectangle.coordinates = finalRect
// 清空状态,准备下次绘制
startPosition = undefined
endPosition = undefined
rectangleEntity = undefined
}, Cesium.ScreenSpaceEventType.LEFT_UP)