/* * @Author: cbwu 504-wuchengbo@htsdfp.com * @Date: 2024-03-27 08:43:44 * @LastEditors: cbwu * @LastEditTime: 2024-04-13 10:46:58 * @Description: 绘制Polyline类 */ import { Viewer, ScreenSpaceEventHandler, Cartesian3, Color, ScreenSpaceEventType, Entity, CallbackProperty, PolylineDashMaterialProperty, } from 'cesium' import { cartesian2ToCartesian3 } from '@/utils/map/coordinate' // import { PointEntity, PolylineEntity } from '@/utils/map/geometry' import { PolylineEntity } from '../geometry/polylineEntity' import { PointEntity } from '@/utils/map/geometry/pointEntity' import EditGeometry from '@/utils/map/draw/editGeometry' type EntityOptions = { id?: string name?: string show?: boolean pixelSize?: number color?: Color fillColor?: Color fill?: boolean width?: number outlineWidth?: number } export default class CreatePolyline { viewer: Viewer handler: ScreenSpaceEventHandler polyline: PolylineEntity | null dashLine: Entity | null trackingLine: Entity | null trackingLinePositions: Cartesian3[] = [] controlPoints: Entity[] | null modifyPoint: any = null clickedGeometry: Entity | null = null moveSelectedPoint: PointEntity | null = null positions: Cartesian3[] = [] bMove: boolean = false bLongClick: boolean = false clickTimeout: any // layer: CustomDataSource defaultStyle: EntityOptions = { // id: 'Polyline' + String(PolylineEntity.id), // name: 'Polyline' + String(PolylineEntity.id + 1), show: true, width: 2, color: Color.GREEN, } constructor(viewer: Viewer, options?: EntityOptions) { this.viewer = viewer this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas) this.polyline = null this.trackingLine = null this.dashLine = null this.controlPoints = [] this.defaultStyle = { ...this.defaultStyle, ...options } } // 开始绘制 public start() { // 左单击加点 this.handler.setInputAction( this.leftClickCallBack, ScreenSpaceEventType.LEFT_CLICK, ) // 移动动态绘制 this.handler.setInputAction( this.moveCallBack, ScreenSpaceEventType.MOUSE_MOVE, ) // 左双击结束 this.handler.setInputAction( this.leftDoubleClickCallBack, ScreenSpaceEventType.LEFT_DOUBLE_CLICK, ) // 右击回退上一步 this.handler.setInputAction( this.rightClickCallBack, ScreenSpaceEventType.RIGHT_CLICK, ) } public end() { this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK) } //左单击回调事件 private leftClickCallBack = ( event: ScreenSpaceEventHandler.PositionedEvent, ) => { const pickedObject = this.viewer.scene.pick(event.position) // console.log(pickedObject) if (pickedObject) { //点击同一位置,返回 if ( pickedObject.id.id === this.polyline?.controlPointsID[this.positions.length - 1] ) { return // console.log('********click the same point') } } const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position) if (cartesian3 != undefined) { if (!this.polyline) { this.polyline = new PolylineEntity(this.positions) this.dashLine = this.createTrackingLine(this.positions) this.viewer.entities.add(this.dashLine) this.viewer.dataSources.add(this.polyline) } this.polyline.addPoint(cartesian3) this.trackingLinePositions[0] = cartesian3 this.bMove = true this.viewer.scene.requestRender() //刷新 } } // 移动回调事件 private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => { if (this.bMove) { const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition) if (cartesian3 != undefined) { //更新追踪线坐标 this.trackingLinePositions[1] = cartesian3 if (!this.trackingLine) { //创建追踪线对象 this.trackingLine = this.createTrackingLine( this.trackingLinePositions, ) this.viewer.entities.add(this.trackingLine) } } this.viewer.scene.requestRender() //刷新 } } // 左双击回调事件 private leftDoubleClickCallBack = ( event: ScreenSpaceEventHandler.PositionedEvent, ) => { // 清除可能已经设置的单击定时器 // clearTimeout(this.clickTimeout) if (!this.polyline) return console.log('**************************** double click') this.bMove = false const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position) if (cartesian3 != undefined) { // 移除追踪线 if (!this.trackingLine) { this.viewer.entities.remove(this.trackingLine!) } } this.clearEvent() console.log('end:' + this.positions.length.toString()) console.log(this.positions) //结束绘制进入编辑模式 this.polyline.removeControlPoints() const editTool = new EditGeometry(this.viewer, this.polyline.geometry!) editTool.start() } // 右击回调事件 private rightClickCallBack = () => { if (!this.controlPoints) return if (this.controlPoints.length > 1) { const lastPoint = this.positions.pop() this.positions[this.positions.length - 1] = lastPoint! this.viewer.entities.remove(this.controlPoints.pop() as Entity) } } clearEvent() { this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK) this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE) this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK) } //创建追踪线 createTrackingLine(positions: Cartesian3[]) { return new Entity({ polyline: { positions: new CallbackProperty(() => { return positions }, false), width: 2, material: new PolylineDashMaterialProperty({ color: Color.GREEN, dashLength: 15, //短划线长度 }), clampToGround: true, }, }) } }