commit
6221bca0c0
@ -0,0 +1,26 @@
|
||||
/*
|
||||
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
||||
* @Date: 2024-04-13 10:36:06
|
||||
* @LastEditors: cbwu
|
||||
* @LastEditTime: 2024-04-13 11:14:53
|
||||
* @Description:
|
||||
*/
|
||||
import { Color, Cartesian2 } from 'cesium'
|
||||
export interface EntityOptions {
|
||||
id?: string
|
||||
name?: string
|
||||
show?: boolean
|
||||
pixelSize?: number //点大小
|
||||
outlineColor?: Color //轮廓线颜色
|
||||
color?: Color //点颜色
|
||||
fillColor?: Color //填充颜色
|
||||
fill?: boolean //是否填充
|
||||
width?: number //线宽
|
||||
outlineWidth?: number
|
||||
text?: string //标注内容
|
||||
font?: string //字体
|
||||
pixelOffset?: Cartesian2 //偏移量
|
||||
image?: string //图片url
|
||||
imageWidth?: number //图片宽
|
||||
imageHeight?: number //图片高
|
||||
}
|
||||
@ -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,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
/*
|
||||
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
||||
* @Date: 2024-04-11 09:26:56
|
||||
* @LastEditors: cbwu
|
||||
* @LastEditTime: 2024-04-13 10:45:27
|
||||
* @Description: 封装的Polygon对象
|
||||
*/
|
||||
import {
|
||||
Entity,
|
||||
Cartesian3,
|
||||
Color,
|
||||
CallbackProperty,
|
||||
PolygonHierarchy,
|
||||
} from 'cesium'
|
||||
import { BaseGeometry } from './baseGeometry'
|
||||
import { EntityOptions } from '@/types/entityoptions'
|
||||
export class PolygonEntity extends BaseGeometry {
|
||||
static ID: number = 0
|
||||
// positions: Cartesian3[] = []
|
||||
controlPointsID: string[] = []
|
||||
options: EntityOptions = {
|
||||
id: 'Polygon' + String(PolygonEntity.ID),
|
||||
name: 'Polygon' + String(PolygonEntity.ID + 1),
|
||||
show: true,
|
||||
width: 2,
|
||||
color: Color.RED,
|
||||
fillColor: Color.RED.withAlpha(0.5),
|
||||
fill: true,
|
||||
}
|
||||
constructor(ptArr: Cartesian3[], options?: EntityOptions) {
|
||||
super()
|
||||
this.positions = ptArr
|
||||
this.options = { ...this.options, ...options }
|
||||
this.geometry = new Entity({
|
||||
show: this.options.show,
|
||||
name: this.options.name,
|
||||
polygon: {
|
||||
hierarchy: new CallbackProperty(() => {
|
||||
return new PolygonHierarchy(this.positions)
|
||||
}, false),
|
||||
material: this.options.fillColor, //填充颜色
|
||||
fill: this.options.fill, //是否填充
|
||||
outline: true,
|
||||
// outlineWidth: this.options.width, //线宽
|
||||
outlineColor: this.options.color, //线颜色
|
||||
},
|
||||
})
|
||||
this.entities.add(this.geometry)
|
||||
// 添加控制点
|
||||
ptArr.forEach((pt, index) => {
|
||||
this.createControlPoint(pt, index)
|
||||
})
|
||||
|
||||
PolygonEntity.ID++
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue