feat: 新增Polygon绘制类。
parent
1f5c7a3244
commit
4f2823f073
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* @Author: zhaipx
|
||||
* @Date: {2024/4/11}
|
||||
* @Description:
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
@ -0,0 +1,160 @@
|
||||
/*
|
||||
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
||||
* @Date: 2024-04-11 13:53:40
|
||||
* @LastEditors: cbwu
|
||||
* @LastEditTime: 2024-04-12 15:18:40
|
||||
* @Description: 绘制多边形
|
||||
*/
|
||||
import {
|
||||
Viewer,
|
||||
ScreenSpaceEventHandler,
|
||||
Cartesian3,
|
||||
Color,
|
||||
ScreenSpaceEventType,
|
||||
Entity,
|
||||
CallbackProperty,
|
||||
PolylineDashMaterialProperty,
|
||||
} from 'cesium'
|
||||
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
|
||||
import { PolygonEntity } from '../geometry/polygonEntity'
|
||||
import { PointEntity } from '@/utils/map/geometry/pointEntity'
|
||||
import EditGeometry from '@/utils/map/draw/editGeometry'
|
||||
|
||||
export class DrawPolygon {
|
||||
viewer: Viewer
|
||||
handler: ScreenSpaceEventHandler
|
||||
polygon: PolygonEntity | null
|
||||
positions: Cartesian3[] = []
|
||||
trackingLine: Entity | null
|
||||
trackingLinePositions: Cartesian3[] = []
|
||||
bMove: boolean = false
|
||||
bLongClick: boolean = false
|
||||
constructor(viewer: Viewer) {
|
||||
this.viewer = viewer
|
||||
this.handler = new ScreenSpaceEventHandler(viewer.scene.canvas)
|
||||
this.polygon = null
|
||||
this.trackingLine = null
|
||||
}
|
||||
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,
|
||||
)
|
||||
}
|
||||
//左单击回调事件
|
||||
private leftClickCallBack = (
|
||||
event: ScreenSpaceEventHandler.PositionedEvent,
|
||||
) => {
|
||||
const pickedObject = this.viewer.scene.pick(event.position)
|
||||
// console.log(pickedObject)
|
||||
if (pickedObject) {
|
||||
//点击同一位置，返回
|
||||
if (
|
||||
pickedObject.id.id ===
|
||||
this.polygon?.controlPointsID[this.positions.length - 1]
|
||||
) {
|
||||
console.log('********click the same point')
|
||||
return
|
||||
}
|
||||
}
|
||||
console.log('****************leftClick!')
|
||||
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
|
||||
if (cartesian3 != undefined) {
|
||||
if (this.positions.length <= 2) {
|
||||
this.positions.push(cartesian3)
|
||||
this.trackingLinePositions.push(cartesian3)
|
||||
} else {
|
||||
this.polygon!.modifyPoint(cartesian3, -1)
|
||||
this.polygon!.showControlPoint(-1, true)
|
||||
//多创建一个点，用于鼠标移动实时变化
|
||||
this.polygon!.addPoint(cartesian3, -1)
|
||||
this.polygon!.showControlPoint(-1, false)
|
||||
|
||||
this.trackingLinePositions[2] = 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) {
|
||||
if (this.positions.length === 1) {
|
||||
//更新追踪线坐标
|
||||
this.trackingLinePositions[1] = cartesian3
|
||||
// this.positions[1] = cartesian3
|
||||
if (!this.trackingLine) {
|
||||
//创建追踪线对象
|
||||
this.trackingLine = this.createTrackingLine(
|
||||
this.trackingLinePositions,
|
||||
)
|
||||
this.viewer.entities.add(this.trackingLine)
|
||||
}
|
||||
}
|
||||
if (this.positions.length === 2) {
|
||||
//移除追踪直线
|
||||
if (this.trackingLine) {
|
||||
this.viewer.entities.remove(this.trackingLine)
|
||||
}
|
||||
this.positions.push(cartesian3)
|
||||
console.log(
|
||||
'*********PositionsLength:' + this.positions.length.toString(),
|
||||
)
|
||||
//创建多边形
|
||||
if (!this.polygon) {
|
||||
this.polygon = new PolygonEntity(this.positions)
|
||||
this.viewer.dataSources.add(this.polygon)
|
||||
// 实时移动不显示控制点
|
||||
this.polygon.showControlPoint(-1, false)
|
||||
}
|
||||
}
|
||||
//实时改变多边形
|
||||
if (this.positions.length >= 3) {
|
||||
this.polygon!.modifyPoint(cartesian3, -1)
|
||||
}
|
||||
|
||||
this.viewer.scene.requestRender() //刷新
|
||||
}
|
||||
}
|
||||
}
|
||||
//左双击回调事件
|
||||
private leftDoubleClickCallBack = (
|
||||
event: ScreenSpaceEventHandler.PositionedEvent,
|
||||
) => {
|
||||
if (!this.polygon) return
|
||||
console.log('**************************** double click')
|
||||
this.bMove = false
|
||||
//移除多余的点
|
||||
this.polygon.removePoint(-1)
|
||||
this.polygon.removePoint(-1)
|
||||
}
|
||||
//创建追踪线
|
||||
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,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue