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