当前位置：首页 > news >正文

vue3 + ts + cesium：绘制自由曲线（polyline）

news 2025/5/11 5:09:44

本文主要实现最基础的绘制自由曲线。

实现效果：

（1）长按鼠标左键开始绘制；

（2）抬起鼠标左键结束绘制。

1. components / CesiumViewer / hooks / drawPolyline.ts

import * as Cesium from "cesium";
import {disableDefaultScreenSpaceEventHandlers,enableDefaultScreenSpaceEventHandlers
} from "@/components/CesiumViewer/hooks/utils";export const drawCurve = () => {const handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas)let positions: any = [] // 存储当前绘制的线条的位置（临时线条的位置）// 长按左键 —— 开始绘制handler.setInputAction((event: any) => {const cartesian = window.viewer.camera.pickEllipsoid(event.position, window.viewer.scene.globe.ellipsoid)if (Cesium.defined(cartesian)) {// window.viewer.entities.add({//     position: cartesian,//     point: {//         color: Cesium.Color.YELLOW,//         pixelSize: 10//     }// })// 移动鼠标 —— 实时绘制线条handler.setInputAction((movement: any) => {disableDefaultScreenSpaceEventHandlers() // 禁止屏幕移动，开始绘制const position = window.viewer.camera.pickEllipsoid(movement.endPosition, window.viewer.scene.globe.ellipsoid)positions.push(position)if (positions.length > 1) {window.viewer.entities.add({ // 临时线条，实时绘制效果polyline: {positions: new Cesium.CallbackProperty(() => {return positions}, false),width: 5, /* 线的宽度 */// 普通实线material: Cesium.Color.fromCssColorString('#ff0000'), /* 线的颜色 *//*// 虚线material: new Cesium.PolylineDashMaterialProperty({color: Cesium.Color.fromCssColorString('#ff0000'),// gapColor: Cesium.Color.TRANSPARENT, /!* 间隔颜色 *!/dashLength: 20 /!* 短划线长度 *!/}),*//*// 发光线条material: new Cesium.PolylineGlowMaterialProperty({glowPower: 0.3,color: Cesium.Color.fromCssColorString('#ff0000')}),*/clampToGround: true, /* 贴地 */}})}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)}}, Cesium.ScreenSpaceEventType.LEFT_DOWN)// 抬起左键 —— 结束绘制handler.setInputAction(() => {handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE) // 移除鼠标移动事件，停止绘制handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN) // 移除左键长按事件，结束绘制enableDefaultScreenSpaceEventHandlers() // 允许屏幕移动}, Cesium.ScreenSpaceEventType.LEFT_UP)
}

2. components / CesiumViewer / hooks / utils.ts

// 保持地球不动
export function disableDefaultScreenSpaceEventHandlers() {window.viewer.scene.screenSpaceCameraController.enableRotate = false // 禁止旋转window.viewer.scene.screenSpaceCameraController.enableTranslate = false // 禁止平移window.viewer.scene.screenSpaceCameraController.enableZoom = false // 禁止缩放window.viewer.scene.screenSpaceCameraController.enableTilt = false // 禁止倾斜window.viewer.scene.screenSpaceCameraController.enableLook = false // 禁止观察（自由视角查看）
}// 允许地球移动
export function enableDefaultScreenSpaceEventHandlers() {window.viewer.scene.screenSpaceCameraController.enableRotate = truewindow.viewer.scene.screenSpaceCameraController.enableTranslate = truewindow.viewer.scene.screenSpaceCameraController.enableZoom = truewindow.viewer.scene.screenSpaceCameraController.enableTilt = truewindow.viewer.scene.screenSpaceCameraController.enableLook = true
}

查看全文

http://www.mrgr.cn/news/41701.html