本文主要实现最基础的绘制自由曲线。
实现效果:
(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 = true
window.viewer.scene.screenSpaceCameraController.enableTranslate = true
window.viewer.scene.screenSpaceCameraController.enableZoom = true
window.viewer.scene.screenSpaceCameraController.enableTilt = true
window.viewer.scene.screenSpaceCameraController.enableLook = true
}