Compare commits
No commits in common. '6221bca0c03ead46f377a367d81209b97382d835' and '32c024787038847a4c1a204a35248ca852fa48c6' have entirely different histories.
6221bca0c0
...
32c0247870
@ -1,26 +0,0 @@
|
|||||||
/*
|
|
||||||
* @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 //图片高
|
|
||||||
}
|
|
||||||
@ -1,160 +0,0 @@
|
|||||||
/*
|
|
||||||
* @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,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
/*
|
|
||||||
* @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