refactor: 拆分几何对象类的可选配置项类型接口定义
parent
4f2823f073
commit
ade03bc747
@ -1,9 +1,9 @@
|
|||||||
{
|
{
|
||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"semi": false,
|
"semi": false,
|
||||||
"bracketSpacing": true,
|
"bracketSpacing": true,
|
||||||
"htmlWhitespaceSensitivity": "ignore",
|
"htmlWhitespaceSensitivity": "ignore",
|
||||||
"endOfLine": "auto",
|
"endOfLine": "lf",
|
||||||
"trailingComma": "all",
|
"trailingComma": "all",
|
||||||
"tabWidth": 2
|
"tabWidth": 2
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,26 @@
|
|||||||
|
/*
|
||||||
|
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
||||||
|
* @Date: 2024-04-13 10:36:06
|
||||||
|
* @LastEditors: cbwu
|
||||||
|
* @LastEditTime: 2024-04-13 10:56:26
|
||||||
|
* @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
|
||||||
|
imageWidth?: number
|
||||||
|
imageHeight?: number
|
||||||
|
}
|
||||||
@ -1,11 +1,11 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
||||||
* @Date: 2024-04-10 11:21:35
|
* @Date: 2024-04-10 11:21:35
|
||||||
* @LastEditors: cbwu
|
* @LastEditors: cbwu
|
||||||
* @LastEditTime: 2024-04-10 11:29:01
|
* @LastEditTime: 2024-04-10 11:29:01
|
||||||
* @Description: 获取静态资源文件
|
* @Description: 获取静态资源文件
|
||||||
*/
|
*/
|
||||||
// 获取地图assets静态资源
|
// 获取地图assets静态资源
|
||||||
export const getMapAssetsFile = (url: string) => {
|
export const getMapAssetsFile = (url: string) => {
|
||||||
return new URL(`../assets/map/${url}`, import.meta.url).href
|
return new URL(`../assets/map/${url}`, import.meta.url).href
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,20 +1,20 @@
|
|||||||
// 场景相机相关操作
|
// 场景相机相关操作
|
||||||
import { Viewer, Cartesian3, Math } from 'cesium'
|
import { Viewer, Cartesian3, Math } from 'cesium'
|
||||||
/**
|
/**
|
||||||
* 将三维球定位到中国
|
* 将三维球定位到中国
|
||||||
* @param viewer :Viewer对象
|
* @param viewer :Viewer对象
|
||||||
*/
|
*/
|
||||||
function flyToChina(viewer: Viewer) {
|
function flyToChina(viewer: Viewer) {
|
||||||
viewer.camera.flyTo({
|
viewer.camera.flyTo({
|
||||||
destination: Cartesian3.fromDegrees(103.84, 31.15, 10350000),
|
destination: Cartesian3.fromDegrees(103.84, 31.15, 10350000),
|
||||||
orientation: {
|
orientation: {
|
||||||
heading: Math.toRadians(0),
|
heading: Math.toRadians(0),
|
||||||
pitch: Math.toRadians(-90),
|
pitch: Math.toRadians(-90),
|
||||||
roll: Math.toRadians(0),
|
roll: Math.toRadians(0),
|
||||||
},
|
},
|
||||||
complete: function callback() {
|
complete: function callback() {
|
||||||
// 定位完成之后的回调函数
|
// 定位完成之后的回调函数
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
export { flyToChina }
|
export { flyToChina }
|
||||||
|
|||||||
@ -1,50 +1,50 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
||||||
* @Date: 2024-03-22 09:11:54
|
* @Date: 2024-03-22 09:11:54
|
||||||
* @LastEditors: cbwu
|
* @LastEditors: cbwu
|
||||||
* @LastEditTime: 2024-04-01 09:21:17
|
* @LastEditTime: 2024-04-13 10:49:36
|
||||||
* @Description: 坐标系转化
|
* @Description: 坐标系转化
|
||||||
*/
|
*/
|
||||||
import { Cartesian2, Viewer, Math, Cartographic, Cartesian3 } from 'cesium'
|
import { Cartesian2, Viewer, Math, Cartographic, Cartesian3 } from 'cesium'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 屏幕坐标转笛卡尔坐标
|
* 屏幕坐标转笛卡尔坐标
|
||||||
* @param viewer
|
* @param viewer
|
||||||
* @param windowPosition :屏幕二维坐标
|
* @param windowPosition :屏幕二维坐标
|
||||||
* @returns :笛卡尔坐标
|
* @returns :笛卡尔坐标
|
||||||
*/
|
*/
|
||||||
function cartesian2ToCartesian3(viewer: Viewer, windowPosition: Cartesian2) {
|
function cartesian2ToCartesian3(viewer: Viewer, windowPosition: Cartesian2) {
|
||||||
const ray = viewer.camera.getPickRay(windowPosition)
|
const ray = viewer.camera.getPickRay(windowPosition)
|
||||||
if (ray != undefined) {
|
if (ray != undefined) {
|
||||||
return viewer.scene.globe.pick(ray, viewer.scene)
|
return viewer.scene.globe.pick(ray, viewer.scene)
|
||||||
} else return undefined
|
} else return undefined
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 屏幕坐标转地理坐标
|
* 屏幕坐标转地理坐标
|
||||||
* @param viewer
|
* @param viewer
|
||||||
* @param windowPosition :屏幕坐标
|
* @param windowPosition :屏幕坐标
|
||||||
* @returns :WGS84坐标
|
* @returns :WGS84坐标
|
||||||
*/
|
*/
|
||||||
function cartesian2ToWGS84(viewer: Viewer, windowPosition: Cartesian2) {
|
function cartesian2ToWGS84(viewer: Viewer, windowPosition: Cartesian2) {
|
||||||
const cartesian3 = cartesian2ToCartesian3(viewer, windowPosition)
|
const cartesian3 = cartesian2ToCartesian3(viewer, windowPosition)
|
||||||
if (cartesian3 != undefined) {
|
if (cartesian3 != undefined) {
|
||||||
return cartesian3ToWGS84(cartesian3)
|
return cartesian3ToWGS84(cartesian3)
|
||||||
} else return []
|
} else return []
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 笛卡尔坐标转WGS84坐标
|
* 笛卡尔坐标转WGS84坐标
|
||||||
* @param pos 笛卡尔坐标
|
* @param pos 笛卡尔坐标
|
||||||
* @returns 经纬度坐标
|
* @returns 经纬度坐标
|
||||||
*/
|
*/
|
||||||
function cartesian3ToWGS84(pos: Cartesian3) {
|
function cartesian3ToWGS84(pos: Cartesian3) {
|
||||||
if (pos) {
|
if (pos) {
|
||||||
const cartographic = Cartographic.fromCartesian(pos)
|
const cartographic = Cartographic.fromCartesian(pos)
|
||||||
const lon = Math.toDegrees(cartographic.longitude) // 经度
|
const lon = Math.toDegrees(cartographic.longitude) // 经度
|
||||||
const lat = Math.toDegrees(cartographic.latitude) // 纬度
|
const lat = Math.toDegrees(cartographic.latitude) // 纬度
|
||||||
const alt = cartographic.height // 高度
|
const alt = cartographic.height // 高度
|
||||||
return [lon, lat, alt]
|
return [lon, lat, alt]
|
||||||
}
|
}
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
|
|
||||||
export { cartesian2ToCartesian3, cartesian2ToWGS84, cartesian3ToWGS84 }
|
export { cartesian2ToCartesian3, cartesian2ToWGS84, cartesian3ToWGS84 }
|
||||||
|
|||||||
@ -1,50 +1,50 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
||||||
* @Date: 2024-03-27 09:51:04
|
* @Date: 2024-03-27 09:51:04
|
||||||
* @LastEditors: cbwu
|
* @LastEditors: cbwu
|
||||||
* @LastEditTime: 2024-04-10 15:54:02
|
* @LastEditTime: 2024-04-13 10:46:43
|
||||||
* @Description: 绘制点类
|
* @Description: 绘制点类
|
||||||
*/
|
*/
|
||||||
import {
|
import {
|
||||||
Viewer,
|
Viewer,
|
||||||
ScreenSpaceEventHandler,
|
ScreenSpaceEventHandler,
|
||||||
Cartesian3,
|
Cartesian3,
|
||||||
Color,
|
Color,
|
||||||
ScreenSpaceEventType,
|
ScreenSpaceEventType,
|
||||||
Entity,
|
Entity,
|
||||||
DataSource,
|
DataSource,
|
||||||
} from 'cesium'
|
} from 'cesium'
|
||||||
import { BillBoard } from '../geometry/billboard'
|
import { BillBoard } from '../geometry/billboard'
|
||||||
import { cartesian2ToCartesian3 } from '../coordinate'
|
import { cartesian2ToCartesian3 } from '../coordinate'
|
||||||
export default class DrawPoint {
|
export default class DrawPoint {
|
||||||
viewer: Viewer
|
viewer: Viewer
|
||||||
handler: ScreenSpaceEventHandler
|
handler: ScreenSpaceEventHandler
|
||||||
markerLayer: DataSource
|
markerLayer: DataSource
|
||||||
constructor(viewer: Viewer) {
|
constructor(viewer: Viewer) {
|
||||||
this.viewer = viewer
|
this.viewer = viewer
|
||||||
this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
||||||
this.markerLayer = viewer.dataSources.getByName('Marker')[0]
|
this.markerLayer = viewer.dataSources.getByName('Marker')[0]
|
||||||
}
|
}
|
||||||
//开始绘制
|
//开始绘制
|
||||||
public start() {
|
public start() {
|
||||||
this.handler.setInputAction(
|
this.handler.setInputAction(
|
||||||
this.leftClickCallBack,
|
this.leftClickCallBack,
|
||||||
ScreenSpaceEventType.LEFT_CLICK,
|
ScreenSpaceEventType.LEFT_CLICK,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
//结束绘制
|
//结束绘制
|
||||||
public end() {
|
public end() {
|
||||||
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
|
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
|
||||||
this.handler.destroy()
|
this.handler.destroy()
|
||||||
}
|
}
|
||||||
//左键Click事件
|
//左键Click事件
|
||||||
private leftClickCallBack = (
|
private leftClickCallBack = (
|
||||||
event: ScreenSpaceEventHandler.PositionedEvent,
|
event: ScreenSpaceEventHandler.PositionedEvent,
|
||||||
) => {
|
) => {
|
||||||
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
|
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
|
||||||
if (cartesian3) {
|
if (cartesian3) {
|
||||||
this.markerLayer.entities.add(new BillBoard(cartesian3))
|
this.markerLayer.entities.add(new BillBoard(cartesian3))
|
||||||
this.viewer.scene.requestRender()
|
this.viewer.scene.requestRender()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,197 +1,197 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
||||||
* @Date: 2024-03-27 08:43:44
|
* @Date: 2024-03-27 08:43:44
|
||||||
* @LastEditors: cbwu
|
* @LastEditors: cbwu
|
||||||
* @LastEditTime: 2024-04-12 09:06:27
|
* @LastEditTime: 2024-04-13 10:46:58
|
||||||
* @Description: 绘制Polyline类
|
* @Description: 绘制Polyline类
|
||||||
*/
|
*/
|
||||||
import {
|
import {
|
||||||
Viewer,
|
Viewer,
|
||||||
ScreenSpaceEventHandler,
|
ScreenSpaceEventHandler,
|
||||||
Cartesian3,
|
Cartesian3,
|
||||||
Color,
|
Color,
|
||||||
ScreenSpaceEventType,
|
ScreenSpaceEventType,
|
||||||
Entity,
|
Entity,
|
||||||
CallbackProperty,
|
CallbackProperty,
|
||||||
PolylineDashMaterialProperty,
|
PolylineDashMaterialProperty,
|
||||||
} from 'cesium'
|
} from 'cesium'
|
||||||
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
|
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
|
||||||
// import { PointEntity, PolylineEntity } from '@/utils/map/geometry'
|
// import { PointEntity, PolylineEntity } from '@/utils/map/geometry'
|
||||||
import { PolylineEntity } from '../geometry/polylineEntity'
|
import { PolylineEntity } from '../geometry/polylineEntity'
|
||||||
import { PointEntity } from '@/utils/map/geometry/pointEntity'
|
import { PointEntity } from '@/utils/map/geometry/pointEntity'
|
||||||
import EditGeometry from '@/utils/map/draw/editGeometry'
|
import EditGeometry from '@/utils/map/draw/editGeometry'
|
||||||
type EntityOptions = {
|
type EntityOptions = {
|
||||||
id?: string
|
id?: string
|
||||||
name?: string
|
name?: string
|
||||||
show?: boolean
|
show?: boolean
|
||||||
pixelSize?: number
|
pixelSize?: number
|
||||||
color?: Color
|
color?: Color
|
||||||
fillColor?: Color
|
fillColor?: Color
|
||||||
fill?: boolean
|
fill?: boolean
|
||||||
width?: number
|
width?: number
|
||||||
outlineWidth?: number
|
outlineWidth?: number
|
||||||
}
|
}
|
||||||
export default class CreatePolyline {
|
export default class CreatePolyline {
|
||||||
viewer: Viewer
|
viewer: Viewer
|
||||||
handler: ScreenSpaceEventHandler
|
handler: ScreenSpaceEventHandler
|
||||||
polyline: PolylineEntity | null
|
polyline: PolylineEntity | null
|
||||||
dashLine: Entity | null
|
dashLine: Entity | null
|
||||||
trackingLine: Entity | null
|
trackingLine: Entity | null
|
||||||
trackingLinePositions: Cartesian3[] = []
|
trackingLinePositions: Cartesian3[] = []
|
||||||
controlPoints: Entity[] | null
|
controlPoints: Entity[] | null
|
||||||
modifyPoint: any = null
|
modifyPoint: any = null
|
||||||
clickedGeometry: Entity | null = null
|
clickedGeometry: Entity | null = null
|
||||||
moveSelectedPoint: PointEntity | null = null
|
moveSelectedPoint: PointEntity | null = null
|
||||||
positions: Cartesian3[] = []
|
positions: Cartesian3[] = []
|
||||||
bMove: boolean = false
|
bMove: boolean = false
|
||||||
bLongClick: boolean = false
|
bLongClick: boolean = false
|
||||||
clickTimeout: any
|
clickTimeout: any
|
||||||
// layer: CustomDataSource
|
// layer: CustomDataSource
|
||||||
defaultStyle: EntityOptions = {
|
defaultStyle: EntityOptions = {
|
||||||
// id: 'Polyline' + String(PolylineEntity.id),
|
// id: 'Polyline' + String(PolylineEntity.id),
|
||||||
// name: 'Polyline' + String(PolylineEntity.id + 1),
|
// name: 'Polyline' + String(PolylineEntity.id + 1),
|
||||||
show: true,
|
show: true,
|
||||||
width: 2,
|
width: 2,
|
||||||
color: Color.GREEN,
|
color: Color.GREEN,
|
||||||
}
|
}
|
||||||
constructor(viewer: Viewer, options?: EntityOptions) {
|
constructor(viewer: Viewer, options?: EntityOptions) {
|
||||||
this.viewer = viewer
|
this.viewer = viewer
|
||||||
this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
||||||
this.polyline = null
|
this.polyline = null
|
||||||
this.trackingLine = null
|
this.trackingLine = null
|
||||||
this.dashLine = null
|
this.dashLine = null
|
||||||
|
|
||||||
this.controlPoints = []
|
this.controlPoints = []
|
||||||
this.defaultStyle = { ...this.defaultStyle, ...options }
|
this.defaultStyle = { ...this.defaultStyle, ...options }
|
||||||
}
|
}
|
||||||
// 开始绘制
|
// 开始绘制
|
||||||
public start() {
|
public start() {
|
||||||
// 左单击加点
|
// 左单击加点
|
||||||
this.handler.setInputAction(
|
this.handler.setInputAction(
|
||||||
this.leftClickCallBack,
|
this.leftClickCallBack,
|
||||||
ScreenSpaceEventType.LEFT_CLICK,
|
ScreenSpaceEventType.LEFT_CLICK,
|
||||||
)
|
)
|
||||||
// 移动动态绘制
|
// 移动动态绘制
|
||||||
this.handler.setInputAction(
|
this.handler.setInputAction(
|
||||||
this.moveCallBack,
|
this.moveCallBack,
|
||||||
ScreenSpaceEventType.MOUSE_MOVE,
|
ScreenSpaceEventType.MOUSE_MOVE,
|
||||||
)
|
)
|
||||||
// 左双击结束
|
// 左双击结束
|
||||||
this.handler.setInputAction(
|
this.handler.setInputAction(
|
||||||
this.leftDoubleClickCallBack,
|
this.leftDoubleClickCallBack,
|
||||||
ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
|
ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
|
||||||
)
|
)
|
||||||
// 右击回退上一步
|
// 右击回退上一步
|
||||||
this.handler.setInputAction(
|
this.handler.setInputAction(
|
||||||
this.rightClickCallBack,
|
this.rightClickCallBack,
|
||||||
ScreenSpaceEventType.RIGHT_CLICK,
|
ScreenSpaceEventType.RIGHT_CLICK,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
public end() {
|
public end() {
|
||||||
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
|
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
|
||||||
}
|
}
|
||||||
//左单击回调事件
|
//左单击回调事件
|
||||||
private leftClickCallBack = (
|
private leftClickCallBack = (
|
||||||
event: ScreenSpaceEventHandler.PositionedEvent,
|
event: ScreenSpaceEventHandler.PositionedEvent,
|
||||||
) => {
|
) => {
|
||||||
const pickedObject = this.viewer.scene.pick(event.position)
|
const pickedObject = this.viewer.scene.pick(event.position)
|
||||||
// console.log(pickedObject)
|
// console.log(pickedObject)
|
||||||
if (pickedObject) {
|
if (pickedObject) {
|
||||||
//点击同一位置，返回
|
//点击同一位置，返回
|
||||||
if (
|
if (
|
||||||
pickedObject.id.id ===
|
pickedObject.id.id ===
|
||||||
this.polyline?.controlPointsID[this.positions.length - 1]
|
this.polyline?.controlPointsID[this.positions.length - 1]
|
||||||
) {
|
) {
|
||||||
return
|
return
|
||||||
// console.log('********click the same point')
|
// console.log('********click the same point')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
|
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
|
||||||
if (cartesian3 != undefined) {
|
if (cartesian3 != undefined) {
|
||||||
if (!this.polyline) {
|
if (!this.polyline) {
|
||||||
this.polyline = new PolylineEntity(this.positions)
|
this.polyline = new PolylineEntity(this.positions)
|
||||||
this.dashLine = this.createTrackingLine(this.positions)
|
this.dashLine = this.createTrackingLine(this.positions)
|
||||||
this.viewer.entities.add(this.dashLine)
|
this.viewer.entities.add(this.dashLine)
|
||||||
this.viewer.dataSources.add(this.polyline)
|
this.viewer.dataSources.add(this.polyline)
|
||||||
}
|
}
|
||||||
this.polyline.addPoint(cartesian3)
|
this.polyline.addPoint(cartesian3)
|
||||||
this.trackingLinePositions[0] = cartesian3
|
this.trackingLinePositions[0] = cartesian3
|
||||||
this.bMove = true
|
this.bMove = true
|
||||||
|
|
||||||
this.viewer.scene.requestRender() //刷新
|
this.viewer.scene.requestRender() //刷新
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 移动回调事件
|
// 移动回调事件
|
||||||
private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
|
private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
|
||||||
if (this.bMove) {
|
if (this.bMove) {
|
||||||
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
|
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
|
||||||
if (cartesian3 != undefined) {
|
if (cartesian3 != undefined) {
|
||||||
//更新追踪线坐标
|
//更新追踪线坐标
|
||||||
this.trackingLinePositions[1] = cartesian3
|
this.trackingLinePositions[1] = cartesian3
|
||||||
if (!this.trackingLine) {
|
if (!this.trackingLine) {
|
||||||
//创建追踪线对象
|
//创建追踪线对象
|
||||||
this.trackingLine = this.createTrackingLine(
|
this.trackingLine = this.createTrackingLine(
|
||||||
this.trackingLinePositions,
|
this.trackingLinePositions,
|
||||||
)
|
)
|
||||||
this.viewer.entities.add(this.trackingLine)
|
this.viewer.entities.add(this.trackingLine)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.viewer.scene.requestRender() //刷新
|
this.viewer.scene.requestRender() //刷新
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 左双击回调事件
|
// 左双击回调事件
|
||||||
private leftDoubleClickCallBack = (
|
private leftDoubleClickCallBack = (
|
||||||
event: ScreenSpaceEventHandler.PositionedEvent,
|
event: ScreenSpaceEventHandler.PositionedEvent,
|
||||||
) => {
|
) => {
|
||||||
// 清除可能已经设置的单击定时器
|
// 清除可能已经设置的单击定时器
|
||||||
// clearTimeout(this.clickTimeout)
|
// clearTimeout(this.clickTimeout)
|
||||||
if (!this.polyline) return
|
if (!this.polyline) return
|
||||||
console.log('**************************** double click')
|
console.log('**************************** double click')
|
||||||
this.bMove = false
|
this.bMove = false
|
||||||
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
|
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
|
||||||
if (cartesian3 != undefined) {
|
if (cartesian3 != undefined) {
|
||||||
// 移除追踪线
|
// 移除追踪线
|
||||||
if (!this.trackingLine) {
|
if (!this.trackingLine) {
|
||||||
this.viewer.entities.remove(this.trackingLine!)
|
this.viewer.entities.remove(this.trackingLine!)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.clearEvent()
|
this.clearEvent()
|
||||||
console.log('end:' + this.positions.length.toString())
|
console.log('end:' + this.positions.length.toString())
|
||||||
console.log(this.positions)
|
console.log(this.positions)
|
||||||
//结束绘制进入编辑模式
|
//结束绘制进入编辑模式
|
||||||
this.polyline.removeControlPoints()
|
this.polyline.removeControlPoints()
|
||||||
const editTool = new EditGeometry(this.viewer, this.polyline.geometry!)
|
const editTool = new EditGeometry(this.viewer, this.polyline.geometry!)
|
||||||
editTool.start()
|
editTool.start()
|
||||||
}
|
}
|
||||||
// 右击回调事件
|
// 右击回调事件
|
||||||
private rightClickCallBack = () => {
|
private rightClickCallBack = () => {
|
||||||
if (!this.controlPoints) return
|
if (!this.controlPoints) return
|
||||||
if (this.controlPoints.length > 1) {
|
if (this.controlPoints.length > 1) {
|
||||||
const lastPoint = this.positions.pop()
|
const lastPoint = this.positions.pop()
|
||||||
this.positions[this.positions.length - 1] = lastPoint!
|
this.positions[this.positions.length - 1] = lastPoint!
|
||||||
this.viewer.entities.remove(this.controlPoints.pop() as Entity)
|
this.viewer.entities.remove(this.controlPoints.pop() as Entity)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
clearEvent() {
|
clearEvent() {
|
||||||
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
|
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
|
||||||
this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE)
|
this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE)
|
||||||
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
|
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
|
||||||
}
|
}
|
||||||
//创建追踪线
|
//创建追踪线
|
||||||
createTrackingLine(positions: Cartesian3[]) {
|
createTrackingLine(positions: Cartesian3[]) {
|
||||||
return new Entity({
|
return new Entity({
|
||||||
polyline: {
|
polyline: {
|
||||||
positions: new CallbackProperty(() => {
|
positions: new CallbackProperty(() => {
|
||||||
return positions
|
return positions
|
||||||
}, false),
|
}, false),
|
||||||
width: 2,
|
width: 2,
|
||||||
material: new PolylineDashMaterialProperty({
|
material: new PolylineDashMaterialProperty({
|
||||||
color: Color.GREEN,
|
color: Color.GREEN,
|
||||||
dashLength: 15, //短划线长度
|
dashLength: 15, //短划线长度
|
||||||
}),
|
}),
|
||||||
clampToGround: true,
|
clampToGround: true,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,249 +1,249 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
||||||
* @Date: 2024-03-27 11:06:45
|
* @Date: 2024-03-27 11:06:45
|
||||||
* @LastEditors: cbwu
|
* @LastEditors: cbwu
|
||||||
* @LastEditTime: 2024-04-02 11:05:20
|
* @LastEditTime: 2024-04-13 10:47:09
|
||||||
* @Description: 编辑几何体类。操作逻辑
|
* @Description: 编辑几何体类。操作逻辑
|
||||||
*/
|
*/
|
||||||
import {
|
import {
|
||||||
Viewer,
|
Viewer,
|
||||||
ScreenSpaceEventHandler,
|
ScreenSpaceEventHandler,
|
||||||
PointGraphics,
|
PointGraphics,
|
||||||
PolylineGraphics,
|
PolylineGraphics,
|
||||||
Cartesian3,
|
Cartesian3,
|
||||||
ConstantProperty,
|
ConstantProperty,
|
||||||
ScreenSpaceEventType,
|
ScreenSpaceEventType,
|
||||||
Entity,
|
Entity,
|
||||||
ConstantPositionProperty,
|
ConstantPositionProperty,
|
||||||
defined,
|
defined,
|
||||||
} from 'cesium'
|
} from 'cesium'
|
||||||
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
|
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
|
||||||
import { getClosestPoint, isOnLineSegment } from '@/utils/map/geocomputation'
|
import { getClosestPoint, isOnLineSegment } from '@/utils/map/geocomputation'
|
||||||
import { PointEntity } from '@/utils/map/geometry/pointEntity'
|
import { PointEntity } from '@/utils/map/geometry/pointEntity'
|
||||||
export default class EditGeometry {
|
export default class EditGeometry {
|
||||||
viewer: Viewer
|
viewer: Viewer
|
||||||
editHandler: ScreenSpaceEventHandler
|
editHandler: ScreenSpaceEventHandler
|
||||||
geometry: Entity //要编辑的几何对象
|
geometry: Entity //要编辑的几何对象
|
||||||
oldPositions: Cartesian3[] = [] //存储未修改前的坐标
|
oldPositions: Cartesian3[] = [] //存储未修改前的坐标
|
||||||
positions: Cartesian3[] = [] //要编辑的几个对象坐标
|
positions: Cartesian3[] = [] //要编辑的几个对象坐标
|
||||||
controlPointsID: string[] = []
|
controlPointsID: string[] = []
|
||||||
controlPoint: PointEntity | null = null
|
controlPoint: PointEntity | null = null
|
||||||
clickedGeometry: Entity | null = null
|
clickedGeometry: Entity | null = null
|
||||||
clickDownPosition: Cartesian3 | null = null
|
clickDownPosition: Cartesian3 | null = null
|
||||||
moveSelectedPoint: PointEntity | null = null
|
moveSelectedPoint: PointEntity | null = null
|
||||||
bDrag: boolean = false //拖动标识
|
bDrag: boolean = false //拖动标识
|
||||||
bLongClick: boolean = false //长按标识
|
bLongClick: boolean = false //长按标识
|
||||||
clickTimeout: any
|
clickTimeout: any
|
||||||
|
|
||||||
constructor(viewer: Viewer, editGeometry: Entity) {
|
constructor(viewer: Viewer, editGeometry: Entity) {
|
||||||
this.viewer = viewer
|
this.viewer = viewer
|
||||||
this.editHandler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
this.editHandler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
||||||
this.geometry = editGeometry
|
this.geometry = editGeometry
|
||||||
this.positions = editGeometry.polyline?.positions?.getValue(
|
this.positions = editGeometry.polyline?.positions?.getValue(
|
||||||
this.viewer.clock.currentTime,
|
this.viewer.clock.currentTime,
|
||||||
)
|
)
|
||||||
this.oldPositions = this.positions
|
this.oldPositions = this.positions
|
||||||
// 创建控制点
|
// 创建控制点
|
||||||
this.positions.forEach((value, index) => {
|
this.positions.forEach((value, index) => {
|
||||||
this.createPoint(value, index)
|
this.createPoint(value, index)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
public start() {
|
public start() {
|
||||||
this.editHandler.setInputAction(
|
this.editHandler.setInputAction(
|
||||||
this.leftDownClickCallBack,
|
this.leftDownClickCallBack,
|
||||||
ScreenSpaceEventType.LEFT_DOWN,
|
ScreenSpaceEventType.LEFT_DOWN,
|
||||||
)
|
)
|
||||||
this.editHandler.setInputAction(
|
this.editHandler.setInputAction(
|
||||||
this.moveCallBack,
|
this.moveCallBack,
|
||||||
ScreenSpaceEventType.MOUSE_MOVE,
|
ScreenSpaceEventType.MOUSE_MOVE,
|
||||||
)
|
)
|
||||||
this.editHandler.setInputAction(
|
this.editHandler.setInputAction(
|
||||||
this.leftUpClickCallBack,
|
this.leftUpClickCallBack,
|
||||||
ScreenSpaceEventType.LEFT_UP,
|
ScreenSpaceEventType.LEFT_UP,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
//左键点击回调
|
//左键点击回调
|
||||||
private leftClickCallBack = (
|
private leftClickCallBack = (
|
||||||
event: ScreenSpaceEventHandler.PositionedEvent,
|
event: ScreenSpaceEventHandler.PositionedEvent,
|
||||||
) => {
|
) => {
|
||||||
const pickedObject = this.viewer.scene.pick(event.position)
|
const pickedObject = this.viewer.scene.pick(event.position)
|
||||||
// 点中控制点
|
// 点中控制点
|
||||||
if (
|
if (
|
||||||
defined(pickedObject) &&
|
defined(pickedObject) &&
|
||||||
defined(pickedObject.id) &&
|
defined(pickedObject.id) &&
|
||||||
pickedObject.id.point instanceof PointGraphics
|
pickedObject.id.point instanceof PointGraphics
|
||||||
) {
|
) {
|
||||||
console.log('You clicked a point entity.')
|
console.log('You clicked a point entity.')
|
||||||
this.controlPoint = pickedObject.id
|
this.controlPoint = pickedObject.id
|
||||||
console.log(this.controlPoint?.subId)
|
console.log(this.controlPoint?.subId)
|
||||||
this.bDrag = true
|
this.bDrag = true
|
||||||
this.forbidDrawWorld(true)
|
this.forbidDrawWorld(true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//左键按下回调
|
//左键按下回调
|
||||||
private leftDownClickCallBack = (
|
private leftDownClickCallBack = (
|
||||||
event: ScreenSpaceEventHandler.PositionedEvent,
|
event: ScreenSpaceEventHandler.PositionedEvent,
|
||||||
) => {
|
) => {
|
||||||
// 清除可能已经设置的单击定时器
|
// 清除可能已经设置的单击定时器
|
||||||
clearTimeout(this.clickTimeout)
|
clearTimeout(this.clickTimeout)
|
||||||
// 判断是不是长按
|
// 判断是不是长按
|
||||||
this.clickTimeout = setTimeout(() => {
|
this.clickTimeout = setTimeout(() => {
|
||||||
this.bLongClick = true
|
this.bLongClick = true
|
||||||
}, 100)
|
}, 100)
|
||||||
const pickedObject = this.viewer.scene.pick(event.position)
|
const pickedObject = this.viewer.scene.pick(event.position)
|
||||||
//点中实体对象
|
//点中实体对象
|
||||||
if (defined(pickedObject) && defined(pickedObject.id)) {
|
if (defined(pickedObject) && defined(pickedObject.id)) {
|
||||||
// 记录点击的几何对象及位置
|
// 记录点击的几何对象及位置
|
||||||
this.clickedGeometry = pickedObject.id
|
this.clickedGeometry = pickedObject.id
|
||||||
this.clickDownPosition = this.viewer.scene.pickPosition(event.position)
|
this.clickDownPosition = this.viewer.scene.pickPosition(event.position)
|
||||||
// // 判断是否同一实体
|
// // 判断是否同一实体
|
||||||
// if (this.geometry != pickedObject.id) {
|
// if (this.geometry != pickedObject.id) {
|
||||||
// this.geometry = pickedObject.id
|
// this.geometry = pickedObject.id
|
||||||
// if (
|
// if (
|
||||||
// pickedObject instanceof PolylineGraphics &&
|
// pickedObject instanceof PolylineGraphics &&
|
||||||
// pickedObject.positions
|
// pickedObject.positions
|
||||||
// ) {
|
// ) {
|
||||||
// this.oldPositions = this.geometry!.polyline!.positions?.getValue(
|
// this.oldPositions = this.geometry!.polyline!.positions?.getValue(
|
||||||
// this.viewer.clock.currentTime,
|
// this.viewer.clock.currentTime,
|
||||||
// )
|
// )
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// 点中控制点
|
// 点中控制点
|
||||||
if (pickedObject.id.point instanceof PointGraphics) {
|
if (pickedObject.id.point instanceof PointGraphics) {
|
||||||
console.log('You clicked a point entity.')
|
console.log('You clicked a point entity.')
|
||||||
this.controlPoint = pickedObject.id
|
this.controlPoint = pickedObject.id
|
||||||
console.log(this.controlPoint?.subId)
|
console.log(this.controlPoint?.subId)
|
||||||
this.bDrag = true
|
this.bDrag = true
|
||||||
this.forbidDrawWorld(true)
|
this.forbidDrawWorld(true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//移动回调
|
//移动回调
|
||||||
private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
|
private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
|
||||||
const pickedObject = this.viewer.scene.pick(event.endPosition)
|
const pickedObject = this.viewer.scene.pick(event.endPosition)
|
||||||
// 悬停控制点放大
|
// 悬停控制点放大
|
||||||
if (
|
if (
|
||||||
pickedObject &&
|
pickedObject &&
|
||||||
pickedObject.id &&
|
pickedObject.id &&
|
||||||
pickedObject.id.point instanceof PointGraphics
|
pickedObject.id.point instanceof PointGraphics
|
||||||
) {
|
) {
|
||||||
if (pickedObject.id.point instanceof PointGraphics) {
|
if (pickedObject.id.point instanceof PointGraphics) {
|
||||||
if (
|
if (
|
||||||
this.moveSelectedPoint == null ||
|
this.moveSelectedPoint == null ||
|
||||||
this.moveSelectedPoint.id !== pickedObject.id.id
|
this.moveSelectedPoint.id !== pickedObject.id.id
|
||||||
) {
|
) {
|
||||||
this.moveSelectedPoint = pickedObject.id
|
this.moveSelectedPoint = pickedObject.id
|
||||||
this.moveSelectedPoint!.point!.pixelSize = new ConstantProperty(
|
this.moveSelectedPoint!.point!.pixelSize = new ConstantProperty(
|
||||||
this.moveSelectedPoint!.options.pixelSize! + 2,
|
this.moveSelectedPoint!.options.pixelSize! + 2,
|
||||||
)
|
)
|
||||||
// console.log(this.moveSelectedPoint)
|
// console.log(this.moveSelectedPoint)
|
||||||
}
|
}
|
||||||
this.viewer.scene.requestRender() //刷新
|
this.viewer.scene.requestRender() //刷新
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// 离开控制点恢复原始大小
|
// 离开控制点恢复原始大小
|
||||||
if (this.moveSelectedPoint) {
|
if (this.moveSelectedPoint) {
|
||||||
this.moveSelectedPoint!.point!.pixelSize = new ConstantProperty(
|
this.moveSelectedPoint!.point!.pixelSize = new ConstantProperty(
|
||||||
this.moveSelectedPoint!.options.pixelSize! - 2,
|
this.moveSelectedPoint!.options.pixelSize! - 2,
|
||||||
)
|
)
|
||||||
this.moveSelectedPoint = null
|
this.moveSelectedPoint = null
|
||||||
this.viewer.scene.requestRender() //刷新
|
this.viewer.scene.requestRender() //刷新
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!this.controlPoint || !this.bDrag) return
|
if (!this.controlPoint || !this.bDrag) return
|
||||||
console.log('************************left down')
|
console.log('************************left down')
|
||||||
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
|
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
|
||||||
if (cartesian3) {
|
if (cartesian3) {
|
||||||
// 修改节点坐标
|
// 修改节点坐标
|
||||||
this.modifyPoint(cartesian3, this.controlPoint.subId)
|
this.modifyPoint(cartesian3, this.controlPoint.subId)
|
||||||
// this.geometry?.modifyPoint(cartesian3, this.controlPoint.subId)
|
// this.geometry?.modifyPoint(cartesian3, this.controlPoint.subId)
|
||||||
this.viewer.scene.requestRender() //刷新
|
this.viewer.scene.requestRender() //刷新
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//左键松开回调
|
//左键松开回调
|
||||||
private leftUpClickCallBack = (
|
private leftUpClickCallBack = (
|
||||||
event: ScreenSpaceEventHandler.PositionedEvent,
|
event: ScreenSpaceEventHandler.PositionedEvent,
|
||||||
) => {
|
) => {
|
||||||
clearTimeout(this.clickTimeout)
|
clearTimeout(this.clickTimeout)
|
||||||
// 单击添加点
|
// 单击添加点
|
||||||
if (
|
if (
|
||||||
!this.bLongClick &&
|
!this.bLongClick &&
|
||||||
this.clickedGeometry?.polyline instanceof PolylineGraphics
|
this.clickedGeometry?.polyline instanceof PolylineGraphics
|
||||||
) {
|
) {
|
||||||
console.log('点中线，加点')
|
console.log('点中线，加点')
|
||||||
this.addPoint()
|
this.addPoint()
|
||||||
}
|
}
|
||||||
this.bLongClick = false
|
this.bLongClick = false
|
||||||
this.bDrag = false
|
this.bDrag = false
|
||||||
this.forbidDrawWorld(false)
|
this.forbidDrawWorld(false)
|
||||||
}
|
}
|
||||||
// 左键双击回调
|
// 左键双击回调
|
||||||
private leftDoubleClickCallBack = (
|
private leftDoubleClickCallBack = (
|
||||||
event: ScreenSpaceEventHandler.PositionedEvent,
|
event: ScreenSpaceEventHandler.PositionedEvent,
|
||||||
) => {
|
) => {
|
||||||
// this.geometry.
|
// this.geometry.
|
||||||
}
|
}
|
||||||
// Viewer操作控制
|
// Viewer操作控制
|
||||||
forbidDrawWorld(isForbid: boolean) {
|
forbidDrawWorld(isForbid: boolean) {
|
||||||
this.viewer.scene.screenSpaceCameraController.enableRotate = !isForbid
|
this.viewer.scene.screenSpaceCameraController.enableRotate = !isForbid
|
||||||
this.viewer.scene.screenSpaceCameraController.enableTilt = !isForbid
|
this.viewer.scene.screenSpaceCameraController.enableTilt = !isForbid
|
||||||
this.viewer.scene.screenSpaceCameraController.enableTranslate = !isForbid
|
this.viewer.scene.screenSpaceCameraController.enableTranslate = !isForbid
|
||||||
this.viewer.scene.screenSpaceCameraController.enableInputs = !isForbid
|
this.viewer.scene.screenSpaceCameraController.enableInputs = !isForbid
|
||||||
}
|
}
|
||||||
// 添加点
|
// 添加点
|
||||||
addPoint() {
|
addPoint() {
|
||||||
for (let i = 0; i < this.positions.length - 1; ++i) {
|
for (let i = 0; i < this.positions.length - 1; ++i) {
|
||||||
if (
|
if (
|
||||||
isOnLineSegment(
|
isOnLineSegment(
|
||||||
this.positions[i],
|
this.positions[i],
|
||||||
this.positions[i + 1],
|
this.positions[i + 1],
|
||||||
this.clickDownPosition!,
|
this.clickDownPosition!,
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
// 修改线坐标
|
// 修改线坐标
|
||||||
const pt = getClosestPoint(
|
const pt = getClosestPoint(
|
||||||
this.positions[i],
|
this.positions[i],
|
||||||
this.positions[i + 1],
|
this.positions[i + 1],
|
||||||
this.clickDownPosition!,
|
this.clickDownPosition!,
|
||||||
)
|
)
|
||||||
this.positions.splice(i + 1, 0, pt)
|
this.positions.splice(i + 1, 0, pt)
|
||||||
// 新建控制点
|
// 新建控制点
|
||||||
this.createPoint(pt, i + 1)
|
this.createPoint(pt, i + 1)
|
||||||
// 修改控制点的subid
|
// 修改控制点的subid
|
||||||
for (let index = i + 2; index < this.controlPointsID.length; ++index) {
|
for (let index = i + 2; index < this.controlPointsID.length; ++index) {
|
||||||
const point = this.geometry.entityCollection.getById(
|
const point = this.geometry.entityCollection.getById(
|
||||||
this.controlPointsID[index],
|
this.controlPointsID[index],
|
||||||
) as PointEntity
|
) as PointEntity
|
||||||
point!.subId = point!.subId + 1
|
point!.subId = point!.subId + 1
|
||||||
}
|
}
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 修改某点的坐标
|
* 修改某点的坐标
|
||||||
* @param pos 修改点的坐标
|
* @param pos 修改点的坐标
|
||||||
* @param index 修改点的位置
|
* @param index 修改点的位置
|
||||||
*/
|
*/
|
||||||
modifyPoint(pos: Cartesian3, index: number) {
|
modifyPoint(pos: Cartesian3, index: number) {
|
||||||
// 修改线坐标
|
// 修改线坐标
|
||||||
this.positions.splice(index, 1, pos)
|
this.positions.splice(index, 1, pos)
|
||||||
// 修改控制点坐标
|
// 修改控制点坐标
|
||||||
this.controlPoint!.position = new ConstantPositionProperty(pos)
|
this.controlPoint!.position = new ConstantPositionProperty(pos)
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 新加一个点
|
* 新加一个点
|
||||||
* @param pos 点的坐标
|
* @param pos 点的坐标
|
||||||
* @param index 插入的位置,0起步
|
* @param index 插入的位置,0起步
|
||||||
*/
|
*/
|
||||||
createPoint(pos: Cartesian3, index: number) {
|
createPoint(pos: Cartesian3, index: number) {
|
||||||
// if (this.geometry) {
|
// if (this.geometry) {
|
||||||
const point = new PointEntity(pos)
|
const point = new PointEntity(pos)
|
||||||
point.parent = this.geometry
|
point.parent = this.geometry
|
||||||
point.subId = index
|
point.subId = index
|
||||||
this.geometry.entityCollection.add(point)
|
this.geometry.entityCollection.add(point)
|
||||||
this.controlPointsID.splice(index, 0, point.id)
|
this.controlPointsID.splice(index, 0, point.id)
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,185 +1,185 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
||||||
* @Date: 2024-03-15 08:43:26
|
* @Date: 2024-03-15 08:43:26
|
||||||
* @LastEditors: cbwu
|
* @LastEditors: cbwu
|
||||||
* @LastEditTime: 2024-04-12 10:30:36
|
* @LastEditTime: 2024-04-13 10:49:27
|
||||||
* @FilePath: \GCSMap\src\utils\drawer.ts
|
* @FilePath: \GCSMap\src\utils\drawer.ts
|
||||||
* @Description: 矢量要素绘制工具类
|
* @Description: 矢量要素绘制工具类
|
||||||
*/
|
*/
|
||||||
import {
|
import {
|
||||||
Viewer,
|
Viewer,
|
||||||
ScreenSpaceEventHandler,
|
ScreenSpaceEventHandler,
|
||||||
ScreenSpaceEventType,
|
ScreenSpaceEventType,
|
||||||
CustomDataSource,
|
CustomDataSource,
|
||||||
Cartesian3,
|
Cartesian3,
|
||||||
CallbackProperty,
|
CallbackProperty,
|
||||||
PolygonHierarchy,
|
PolygonHierarchy,
|
||||||
Color,
|
Color,
|
||||||
} from 'cesium'
|
} from 'cesium'
|
||||||
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
|
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
|
||||||
import {
|
import {
|
||||||
PointEntity,
|
PointEntity,
|
||||||
PolylineEntity,
|
PolylineEntity,
|
||||||
PolygonEntity,
|
PolygonEntity,
|
||||||
} from '@/utils/map/geometry'
|
} from '@/utils/map/geometry'
|
||||||
class Drawer {
|
class Drawer {
|
||||||
viewer: Viewer
|
viewer: Viewer
|
||||||
type: string
|
type: string
|
||||||
handler: ScreenSpaceEventHandler
|
handler: ScreenSpaceEventHandler
|
||||||
layer: CustomDataSource
|
layer: CustomDataSource
|
||||||
polyline: PolylineEntity | null
|
polyline: PolylineEntity | null
|
||||||
polygon: PolygonEntity | null
|
polygon: PolygonEntity | null
|
||||||
positions: Cartesian3[] = []
|
positions: Cartesian3[] = []
|
||||||
n_Points: number
|
n_Points: number
|
||||||
bMove: boolean
|
bMove: boolean
|
||||||
clickTimeout: any
|
clickTimeout: any
|
||||||
constructor(viewer: Viewer, type: string) {
|
constructor(viewer: Viewer, type: string) {
|
||||||
this.viewer = viewer
|
this.viewer = viewer
|
||||||
this.type = type
|
this.type = type
|
||||||
this.handler = new ScreenSpaceEventHandler(this.viewer.canvas)
|
this.handler = new ScreenSpaceEventHandler(this.viewer.canvas)
|
||||||
this.polyline = null
|
this.polyline = null
|
||||||
this.polygon = null
|
this.polygon = null
|
||||||
this.n_Points = 0
|
this.n_Points = 0
|
||||||
this.bMove = false
|
this.bMove = false
|
||||||
this.positions = []
|
this.positions = []
|
||||||
this.clickTimeout = null
|
this.clickTimeout = null
|
||||||
if (viewer.dataSources.getByName(type).length === 0) {
|
if (viewer.dataSources.getByName(type).length === 0) {
|
||||||
this.layer = new CustomDataSource(type)
|
this.layer = new CustomDataSource(type)
|
||||||
viewer.dataSources.add(this.layer)
|
viewer.dataSources.add(this.layer)
|
||||||
} else {
|
} else {
|
||||||
this.layer = viewer.dataSources.getByName(type)[0]
|
this.layer = viewer.dataSources.getByName(type)[0]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 开始绘制
|
// 开始绘制
|
||||||
public start() {
|
public start() {
|
||||||
// 左单击加点
|
// 左单击加点
|
||||||
this.handler.setInputAction(
|
this.handler.setInputAction(
|
||||||
this.leftClickCallBack,
|
this.leftClickCallBack,
|
||||||
ScreenSpaceEventType.LEFT_CLICK,
|
ScreenSpaceEventType.LEFT_CLICK,
|
||||||
)
|
)
|
||||||
// 移动动态绘制
|
// 移动动态绘制
|
||||||
this.handler.setInputAction(
|
this.handler.setInputAction(
|
||||||
this.moveCallBack,
|
this.moveCallBack,
|
||||||
ScreenSpaceEventType.MOUSE_MOVE,
|
ScreenSpaceEventType.MOUSE_MOVE,
|
||||||
)
|
)
|
||||||
// 左双击结束
|
// 左双击结束
|
||||||
this.handler.setInputAction(
|
this.handler.setInputAction(
|
||||||
this.leftDoubleClickCallBack,
|
this.leftDoubleClickCallBack,
|
||||||
ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
|
ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
public end() {
|
public end() {
|
||||||
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
|
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
|
||||||
}
|
}
|
||||||
//左单击回调事件
|
//左单击回调事件
|
||||||
private leftClickCallBack = (
|
private leftClickCallBack = (
|
||||||
event: ScreenSpaceEventHandler.PositionedEvent,
|
event: ScreenSpaceEventHandler.PositionedEvent,
|
||||||
) => {
|
) => {
|
||||||
// 清除可能已经设置的单击定时器
|
// 清除可能已经设置的单击定时器
|
||||||
clearTimeout(this.clickTimeout)
|
clearTimeout(this.clickTimeout)
|
||||||
console.log('**************************** click')
|
console.log('**************************** click')
|
||||||
// 设置一个新的定时器，用于判断是单击还是双击
|
// 设置一个新的定时器，用于判断是单击还是双击
|
||||||
this.clickTimeout = setTimeout(() => {
|
this.clickTimeout = setTimeout(() => {
|
||||||
console.log('**************************** run')
|
console.log('**************************** run')
|
||||||
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
|
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
|
||||||
if (cartesian3 != undefined) {
|
if (cartesian3 != undefined) {
|
||||||
if (this.bMove) {
|
if (this.bMove) {
|
||||||
this.positions.pop()
|
this.positions.pop()
|
||||||
this.bMove = false
|
this.bMove = false
|
||||||
}
|
}
|
||||||
this.positions.push(cartesian3)
|
this.positions.push(cartesian3)
|
||||||
this.createGeometry(this.type)
|
this.createGeometry(this.type)
|
||||||
// 创建控制点
|
// 创建控制点
|
||||||
const point = new PointEntity(
|
const point = new PointEntity(
|
||||||
this.positions[this.positions.length - 1],
|
this.positions[this.positions.length - 1],
|
||||||
{
|
{
|
||||||
color: Color.WHITE,
|
color: Color.WHITE,
|
||||||
pixelSize: 6,
|
pixelSize: 6,
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
point.parent = this.polygon!
|
point.parent = this.polygon!
|
||||||
this.layer.entities.add(point)
|
this.layer.entities.add(point)
|
||||||
|
|
||||||
this.viewer.scene.requestRender() //刷新
|
this.viewer.scene.requestRender() //刷新
|
||||||
}
|
}
|
||||||
}, 100)
|
}, 100)
|
||||||
}
|
}
|
||||||
// 移动回调事件
|
// 移动回调事件
|
||||||
private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
|
private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
|
||||||
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
|
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
|
||||||
if (cartesian3 != undefined) {
|
if (cartesian3 != undefined) {
|
||||||
if (this.positions.length >= 1) {
|
if (this.positions.length >= 1) {
|
||||||
if (!this.bMove) {
|
if (!this.bMove) {
|
||||||
this.positions.push(cartesian3)
|
this.positions.push(cartesian3)
|
||||||
this.bMove = true
|
this.bMove = true
|
||||||
} else {
|
} else {
|
||||||
this.positions[this.positions.length - 1] = cartesian3
|
this.positions[this.positions.length - 1] = cartesian3
|
||||||
}
|
}
|
||||||
if (this.type === 'Polygon') {
|
if (this.type === 'Polygon') {
|
||||||
// 多边形创建临时线
|
// 多边形创建临时线
|
||||||
if (this.positions.length === 2) {
|
if (this.positions.length === 2) {
|
||||||
this.createGeometry('Polyline')
|
this.createGeometry('Polyline')
|
||||||
}
|
}
|
||||||
if (this.positions.length > 2) {
|
if (this.positions.length > 2) {
|
||||||
this.polyline!.show = false
|
this.polyline!.show = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.viewer.scene.requestRender() //刷新
|
this.viewer.scene.requestRender() //刷新
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 左双击回调事件
|
// 左双击回调事件
|
||||||
private leftDoubleClickCallBack = (
|
private leftDoubleClickCallBack = (
|
||||||
event: ScreenSpaceEventHandler.PositionedEvent,
|
event: ScreenSpaceEventHandler.PositionedEvent,
|
||||||
) => {
|
) => {
|
||||||
// 清除可能已经设置的单击定时器
|
// 清除可能已经设置的单击定时器
|
||||||
clearTimeout(this.clickTimeout)
|
clearTimeout(this.clickTimeout)
|
||||||
console.log('**************************** double click')
|
console.log('**************************** double click')
|
||||||
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
|
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
|
||||||
if (cartesian3 != undefined) {
|
if (cartesian3 != undefined) {
|
||||||
this.positions.pop()
|
this.positions.pop()
|
||||||
this.positions.push(cartesian3)
|
this.positions.push(cartesian3)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.clearEvent()
|
this.clearEvent()
|
||||||
console.log('end:' + this.positions.length.toString())
|
console.log('end:' + this.positions.length.toString())
|
||||||
console.log(this.positions)
|
console.log(this.positions)
|
||||||
}
|
}
|
||||||
clearEvent() {
|
clearEvent() {
|
||||||
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
|
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
|
||||||
this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE)
|
this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE)
|
||||||
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
|
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
|
||||||
}
|
}
|
||||||
// 创建几何体
|
// 创建几何体
|
||||||
createGeometry(type: string) {
|
createGeometry(type: string) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'Polyline':
|
case 'Polyline':
|
||||||
if (this.polyline == null) {
|
if (this.polyline == null) {
|
||||||
this.polyline = new PolylineEntity(
|
this.polyline = new PolylineEntity(
|
||||||
new CallbackProperty(() => {
|
new CallbackProperty(() => {
|
||||||
return this.positions
|
return this.positions
|
||||||
}, false),
|
}, false),
|
||||||
)
|
)
|
||||||
this.layer.entities.add(this.polyline)
|
this.layer.entities.add(this.polyline)
|
||||||
// this.viewer.entities.add(this.polyline)
|
// this.viewer.entities.add(this.polyline)
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
case 'Polygon':
|
case 'Polygon':
|
||||||
if (this.polygon == null) {
|
if (this.polygon == null) {
|
||||||
this.polygon = new PolygonEntity(
|
this.polygon = new PolygonEntity(
|
||||||
new CallbackProperty(() => {
|
new CallbackProperty(() => {
|
||||||
return new PolygonHierarchy(this.positions)
|
return new PolygonHierarchy(this.positions)
|
||||||
}, false),
|
}, false),
|
||||||
)
|
)
|
||||||
this.layer.entities.add(this.polygon)
|
this.layer.entities.add(this.polygon)
|
||||||
// this.viewer.entities.add(this.polygon)
|
// this.viewer.entities.add(this.polygon)
|
||||||
console.log('Polygon created!')
|
console.log('Polygon created!')
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Drawer }
|
export { Drawer }
|
||||||
|
|||||||
@ -1,36 +1,36 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
||||||
* @Date: 2024-04-10 08:53:12
|
* @Date: 2024-04-10 08:53:12
|
||||||
* @LastEditors: cbwu
|
* @LastEditors: cbwu
|
||||||
* @LastEditTime: 2024-04-11 09:09:38
|
* @LastEditTime: 2024-04-13 10:45:00
|
||||||
* @Description: 广告牌对象
|
* @Description: 广告牌对象
|
||||||
*/
|
*/
|
||||||
import { Entity, Cartesian3, Cartesian2, Color, HeightReference } from 'cesium'
|
import { Entity, Cartesian3, Cartesian2, Color, HeightReference } from 'cesium'
|
||||||
import { getMapAssetsFile } from '@/utils/getAssets'
|
import { getMapAssetsFile } from '@/utils/getAssets'
|
||||||
export class BillBoard extends Entity {
|
export class BillBoard extends Entity {
|
||||||
static ID: number = 0
|
static ID: number = 0
|
||||||
public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
|
public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
|
||||||
constructor(position: Cartesian3) {
|
constructor(position: Cartesian3) {
|
||||||
super({
|
super({
|
||||||
position: position,
|
position: position,
|
||||||
billboard: {
|
billboard: {
|
||||||
show: true,
|
show: true,
|
||||||
image: getMapAssetsFile('marker.svg'),
|
image: getMapAssetsFile('marker.svg'),
|
||||||
width: 32,
|
width: 32,
|
||||||
height: 32,
|
height: 32,
|
||||||
scale: 1,
|
scale: 1,
|
||||||
// 设置实体贴地
|
// 设置实体贴地
|
||||||
heightReference: HeightReference.CLAMP_TO_GROUND,
|
heightReference: HeightReference.CLAMP_TO_GROUND,
|
||||||
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 可能会提高在不同角度下的清晰度
|
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 可能会提高在不同角度下的清晰度
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
text: 'Maker1',
|
text: 'Maker1',
|
||||||
font: '32px sans-serif',
|
font: '32px sans-serif',
|
||||||
scale: 0.5,
|
scale: 0.5,
|
||||||
pixelOffset: new Cartesian2(45, -5),
|
pixelOffset: new Cartesian2(45, -5),
|
||||||
heightReference: HeightReference.CLAMP_TO_GROUND,
|
heightReference: HeightReference.CLAMP_TO_GROUND,
|
||||||
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 可能会提高在不同角度下的清晰度
|
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 可能会提高在不同角度下的清晰度
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,70 +1,56 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
||||||
* @Date: 2024-03-28 16:35:33
|
* @Date: 2024-03-28 16:35:33
|
||||||
* @LastEditors: cbwu
|
* @LastEditors: cbwu
|
||||||
* @LastEditTime: 2024-04-12 15:43:49
|
* @LastEditTime: 2024-04-13 10:46:19
|
||||||
* @Description: 封装的点几何类
|
* @Description: 封装的点几何类
|
||||||
*/
|
*/
|
||||||
import {
|
import {
|
||||||
Entity,
|
Entity,
|
||||||
Cartesian3,
|
Cartesian3,
|
||||||
Color,
|
Color,
|
||||||
PointGraphics,
|
PointGraphics,
|
||||||
PositionProperty,
|
PositionProperty,
|
||||||
LabelGraphics,
|
LabelGraphics,
|
||||||
Cartesian2,
|
Cartesian2,
|
||||||
CallbackProperty,
|
CallbackProperty,
|
||||||
Property,
|
Property,
|
||||||
} from 'cesium'
|
} from 'cesium'
|
||||||
type EntityOptions = {
|
import { EntityOptions } from '@/types/entityoptions'
|
||||||
id?: string
|
// 点
|
||||||
name?: string
|
class PointEntity extends Entity {
|
||||||
show?: boolean
|
static ID: number = 0
|
||||||
pixelSize?: number
|
public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
|
||||||
outlineColor?: Color
|
options: EntityOptions = {
|
||||||
color?: Color
|
id: 'Point' + String(PointEntity.ID),
|
||||||
fillColor?: Color
|
name: 'Point' + String(PointEntity.ID + 1),
|
||||||
fill?: boolean
|
show: true,
|
||||||
width?: number
|
pixelSize: 8,
|
||||||
outlineWidth?: number
|
color: Color.WHITE,
|
||||||
text?: string
|
outlineColor: Color.GREEN,
|
||||||
font?: string
|
outlineWidth: 0,
|
||||||
pixelOffset?: Cartesian2
|
}
|
||||||
}
|
constructor(position: Cartesian3, options?: EntityOptions) {
|
||||||
// 点
|
super({
|
||||||
class PointEntity extends Entity {
|
position: position,
|
||||||
static ID: number = 0
|
})
|
||||||
public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
|
this.options = { ...this.options, ...options }
|
||||||
options: EntityOptions = {
|
//点对象
|
||||||
id: 'Point' + String(PointEntity.ID),
|
this.point = new PointGraphics({
|
||||||
name: 'Point' + String(PointEntity.ID + 1),
|
pixelSize: this.options.pixelSize,
|
||||||
show: true,
|
color: this.options.color,
|
||||||
pixelSize: 8,
|
outlineColor: this.options.outlineColor,
|
||||||
color: Color.WHITE,
|
outlineWidth: this.options.outlineWidth,
|
||||||
outlineColor: Color.GREEN,
|
})
|
||||||
outlineWidth: 0,
|
// 标注对象
|
||||||
}
|
this.label = new LabelGraphics({
|
||||||
constructor(position: Cartesian3, options?: EntityOptions) {
|
text: this.options.text,
|
||||||
super({
|
font: this.options.font,
|
||||||
position: position,
|
pixelOffset: this.options.pixelOffset,
|
||||||
})
|
})
|
||||||
this.options = { ...this.options, ...options }
|
|
||||||
//点对象
|
PointEntity.ID++
|
||||||
this.point = new PointGraphics({
|
}
|
||||||
pixelSize: this.options.pixelSize,
|
}
|
||||||
color: this.options.color,
|
|
||||||
outlineColor: this.options.outlineColor,
|
export { PointEntity }
|
||||||
outlineWidth: this.options.outlineWidth,
|
|
||||||
})
|
|
||||||
// 标注对象
|
|
||||||
this.label = new LabelGraphics({
|
|
||||||
text: this.options.text,
|
|
||||||
font: this.options.font,
|
|
||||||
pixelOffset: this.options.pixelOffset,
|
|
||||||
})
|
|
||||||
|
|
||||||
PointEntity.ID++
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export { PointEntity, type EntityOptions }
|
|
||||||
|
|||||||
@ -1,56 +1,56 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
||||||
* @Date: 2024-04-11 09:26:56
|
* @Date: 2024-04-11 09:26:56
|
||||||
* @LastEditors: cbwu
|
* @LastEditors: cbwu
|
||||||
* @LastEditTime: 2024-04-12 15:34:45
|
* @LastEditTime: 2024-04-13 10:45:27
|
||||||
* @Description: 封装的Polygon对象
|
* @Description: 封装的Polygon对象
|
||||||
*/
|
*/
|
||||||
import {
|
import {
|
||||||
Entity,
|
Entity,
|
||||||
Cartesian3,
|
Cartesian3,
|
||||||
Color,
|
Color,
|
||||||
CallbackProperty,
|
CallbackProperty,
|
||||||
PolygonHierarchy,
|
PolygonHierarchy,
|
||||||
} from 'cesium'
|
} from 'cesium'
|
||||||
import { BaseGeometry } from './baseGeometry'
|
import { BaseGeometry } from './baseGeometry'
|
||||||
import { type EntityOptions } from './pointEntity'
|
import { EntityOptions } from '@/types/entityoptions'
|
||||||
export class PolygonEntity extends BaseGeometry {
|
export class PolygonEntity extends BaseGeometry {
|
||||||
static ID: number = 0
|
static ID: number = 0
|
||||||
// positions: Cartesian3[] = []
|
// positions: Cartesian3[] = []
|
||||||
controlPointsID: string[] = []
|
controlPointsID: string[] = []
|
||||||
options: EntityOptions = {
|
options: EntityOptions = {
|
||||||
id: 'Polygon' + String(PolygonEntity.ID),
|
id: 'Polygon' + String(PolygonEntity.ID),
|
||||||
name: 'Polygon' + String(PolygonEntity.ID + 1),
|
name: 'Polygon' + String(PolygonEntity.ID + 1),
|
||||||
show: true,
|
show: true,
|
||||||
width: 2,
|
width: 2,
|
||||||
color: Color.RED,
|
color: Color.RED,
|
||||||
fillColor: Color.RED.withAlpha(0.5),
|
fillColor: Color.RED.withAlpha(0.5),
|
||||||
fill: true,
|
fill: true,
|
||||||
}
|
}
|
||||||
constructor(ptArr: Cartesian3[], options?: EntityOptions) {
|
constructor(ptArr: Cartesian3[], options?: EntityOptions) {
|
||||||
super()
|
super()
|
||||||
this.positions = ptArr
|
this.positions = ptArr
|
||||||
this.options = { ...this.options, ...options }
|
this.options = { ...this.options, ...options }
|
||||||
this.geometry = new Entity({
|
this.geometry = new Entity({
|
||||||
show: this.options.show,
|
show: this.options.show,
|
||||||
name: this.options.name,
|
name: this.options.name,
|
||||||
polygon: {
|
polygon: {
|
||||||
hierarchy: new CallbackProperty(() => {
|
hierarchy: new CallbackProperty(() => {
|
||||||
return new PolygonHierarchy(this.positions)
|
return new PolygonHierarchy(this.positions)
|
||||||
}, false),
|
}, false),
|
||||||
material: this.options.fillColor, //填充颜色
|
material: this.options.fillColor, //填充颜色
|
||||||
fill: this.options.fill, //是否填充
|
fill: this.options.fill, //是否填充
|
||||||
outline: true,
|
outline: true,
|
||||||
// outlineWidth: this.options.width, //线宽
|
// outlineWidth: this.options.width, //线宽
|
||||||
outlineColor: this.options.color, //线颜色
|
outlineColor: this.options.color, //线颜色
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
this.entities.add(this.geometry)
|
this.entities.add(this.geometry)
|
||||||
// 添加控制点
|
// 添加控制点
|
||||||
ptArr.forEach((pt, index) => {
|
ptArr.forEach((pt, index) => {
|
||||||
this.createControlPoint(pt, index)
|
this.createControlPoint(pt, index)
|
||||||
})
|
})
|
||||||
|
|
||||||
PolygonEntity.ID++
|
PolygonEntity.ID++
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,48 +1,48 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
* @Author: cbwu 504-wuchengbo@htsdfp.com
|
||||||
* @Date: 2024-03-28 16:49:02
|
* @Date: 2024-03-28 16:49:02
|
||||||
* @LastEditors: cbwu
|
* @LastEditors: cbwu
|
||||||
* @LastEditTime: 2024-04-12 14:27:12
|
* @LastEditTime: 2024-04-13 10:45:17
|
||||||
* @Description: 封装的Polyline类
|
* @Description: 封装的Polyline类
|
||||||
*/
|
*/
|
||||||
import { Entity, Cartesian3, Color, CallbackProperty } from 'cesium'
|
import { Entity, Cartesian3, Color, CallbackProperty } from 'cesium'
|
||||||
import { BaseGeometry } from './baseGeometry'
|
import { BaseGeometry } from './baseGeometry'
|
||||||
import { type EntityOptions } from './pointEntity'
|
import { EntityOptions } from '@/types/entityoptions'
|
||||||
export class PolylineEntity extends BaseGeometry {
|
export class PolylineEntity extends BaseGeometry {
|
||||||
static ID: number = 0
|
static ID: number = 0
|
||||||
// positions: Cartesian3[] = []
|
// positions: Cartesian3[] = []
|
||||||
controlPointsID: string[] = []
|
controlPointsID: string[] = []
|
||||||
options: EntityOptions = {
|
options: EntityOptions = {
|
||||||
// id: 'Polyline' + String(PolylineEntity.ID),
|
// id: 'Polyline' + String(PolylineEntity.ID),
|
||||||
name: 'Polyline' + String(PolylineEntity.ID + 1),
|
name: 'Polyline' + String(PolylineEntity.ID + 1),
|
||||||
show: true,
|
show: true,
|
||||||
width: 3,
|
width: 3,
|
||||||
color: Color.GREEN,
|
color: Color.GREEN,
|
||||||
}
|
}
|
||||||
constructor(ptArr: Cartesian3[], options?: EntityOptions) {
|
constructor(ptArr: Cartesian3[], options?: EntityOptions) {
|
||||||
super()
|
super()
|
||||||
this.options = { ...this.options, ...options }
|
this.options = { ...this.options, ...options }
|
||||||
// console.log(this.options)
|
// console.log(this.options)
|
||||||
this.positions = ptArr
|
this.positions = ptArr
|
||||||
// console.log(this.positions)
|
// console.log(this.positions)
|
||||||
// 创建线实体对象
|
// 创建线实体对象
|
||||||
this.geometry = new Entity({
|
this.geometry = new Entity({
|
||||||
name: this.options.name,
|
name: this.options.name,
|
||||||
polyline: {
|
polyline: {
|
||||||
positions: new CallbackProperty(() => {
|
positions: new CallbackProperty(() => {
|
||||||
return this.positions
|
return this.positions
|
||||||
}, false),
|
}, false),
|
||||||
show: this.options.show,
|
show: this.options.show,
|
||||||
width: this.options.width,
|
width: this.options.width,
|
||||||
material: this.options.color,
|
material: this.options.color,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
this.entities.add(this.geometry)
|
this.entities.add(this.geometry)
|
||||||
// 添加控制点
|
// 添加控制点
|
||||||
ptArr.forEach((pt, index) => {
|
ptArr.forEach((pt, index) => {
|
||||||
this.createControlPoint(pt, index)
|
this.createControlPoint(pt, index)
|
||||||
})
|
})
|
||||||
|
|
||||||
PolylineEntity.ID++
|
PolylineEntity.ID++
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue