Skip to content

概述

通过案例综合掌握多个事件操作,比如: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)
/