WuChengbo
/
GCSGUI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Labels Milestones

New Pull Request

dev-cbwu #6

Merged
WuChengbo merged 6 commits from dev-cbwu into dev 1 year ago
Conversation 0 Commits 6 Files Changed 24
24 changed files with 1663 additions and 1593 deletions
Show Stats Download Patch File Download Diff File

8
.eslintrc.cjs
Unescape Escape View File

@ -1,3 +1,10 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-04-13 10:03:23
* @LastEditors: cbwu
* @LastEditTime: 2024-04-13 11:07:45
* @Description:
*/
module.exports = {
env: {
browser: true,
@ -63,5 +70,6 @@ module.exports = {
semi: false,
},
],
'linebreak-style': [0, 'error', 'windows'], //取消对LF和CRLF的检查
},
}

18
.prettierrc.json
Unescape Escape View File

@ -1,9 +1,9 @@
{
"singleQuote": true,
"semi": false,
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto",
"trailingComma": "all",
"tabWidth": 2
}
{
"singleQuote": true,
"semi": false,
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "lf",
"trailingComma": "all",
"tabWidth": 2
}

45
src/components/map/BottomBar.vue
Unescape Escape View File

@ -5,36 +5,40 @@
-->
<script setup lang="ts">
import { Angle } from '@/utils/map/angle.ts'
import {ScreenSpaceEventHandler, Math, ScreenSpaceEventType} from 'cesium'
import {onMounted, ref} from "vue";
import {cartesian2ToCartesian3} from "@/utils/map/coordinate.ts";
import { ScreenSpaceEventHandler, Math, ScreenSpaceEventType } from 'cesium'
import { onMounted, ref } from 'vue'
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate.ts'
let nowLatStr: string, nowLonStr: string
let lonlatStr = ref('')
let isDecimal = ref(true)
onMounted(()=>{
onMounted(() => {
let _viewer = window.viewer
let canvas = _viewer.scene.canvas
let canvas = _viewer.scene.canvas
let handler = new ScreenSpaceEventHandler(canvas)
handler.setInputAction((e:any)=> {
handler.setInputAction((e: any) => {
//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
let position = cartesian2ToCartesian3(_viewer, e.endPosition)
if (position) {
//将笛卡尔三维坐标转为地图坐标（弧度）
let cartographic = _viewer.scene.globe.ellipsoid.cartesianToCartographic(position);
try{
let cartographic =
_viewer.scene.globe.ellipsoid.cartesianToCartographic(position)
try {
// 将地图坐标（弧度）转为十进制的度数
nowLatStr = Math.toDegrees(cartographic.latitude).toFixed(7) // 纬度
nowLonStr = Math.toDegrees(cartographic.longitude).toFixed(7) // 经度
let camera_alt = (_viewer.camera.positionCartographic.height / 1000) // 视高
let camera_alt = _viewer.camera.positionCartographic.height / 1000 // 视高
// 相机低于250、俯仰角小于-80度时才计算海拔高度（否则误差大）
let needElevation: boolean = camera_alt < 250 && (_viewer.camera.pitch < -(Math.PI/180)*80)
let elevStr = needElevation? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2)+'m'?? '' : '高度过高'
let needElevation: boolean =
camera_alt < 250 && _viewer.camera.pitch < -(Math.PI / 180) * 80
let elevStr = needElevation
? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2) + 'm' ?? ''
: '高度过高'
if(isDecimal.value) { //如果是十进制度
if (isDecimal.value) {
//如果是十进制度
lonlatStr.value = `经度: ${nowLonStr}°, 纬度: ${nowLatStr}°, 高度: ${elevStr}`
}
else {
} else {
lonlatStr.value = `经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)},
高度: ${elevStr}`
}
@ -46,10 +50,11 @@ onMounted(()=>{
function lonlatClick() {
let elevStr = lonlatStr.value.split('高度')[1]
console.log(elevStr)
if(isDecimal.value){
lonlatStr.value = `经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)}, 高度` + elevStr
}
else {
if (isDecimal.value) {
lonlatStr.value =
`经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)}, 高度` +
elevStr
} else {
lonlatStr.value = `经度: ${nowLonStr}°, 纬度: ${nowLatStr}°, 高度` + elevStr
}
isDecimal.value = !isDecimal.value
@ -81,13 +86,13 @@ function lonlatClick() {
align-items: center;
justify-content: center;
}
#lonlatText{
#lonlatText {
background: none;
border: none;
color: #ffffff;
font-size: 0.8rem;
}
#lonlatText:hover{
#lonlatText:hover {
cursor: pointer;
}
</style>

7
src/components/map/SceneViewer.vue
Unescape Escape View File

@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-07 14:15:35
* @LastEditors: cbwu
* @LastEditTime: 2024-04-11 09:11:25
* @LastEditTime: 2024-04-15 16:00:27
* @Description:
-->
<template>
@ -23,6 +23,7 @@ import { initViewer, perfViewer, showNavigator } from '@/utils/map/sceneViewer'
import { flyToChina } from '@/utils/map/camera'
import CreatePolyline from '@/utils/map/draw/drawPolyline'
// import DrawPoint from '@/utils/map/draw/drawPoint'
import { DrawPolygon } from '@/utils/map/draw/drawPolygon'
const viewerDivRef = ref<HTMLDivElement>()
let viewer: Viewer
window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/'
@ -39,7 +40,7 @@ Ion.defaultAccessToken =
// 60.0, // 北纬
// )
onMounted( () => {
onMounted(() => {
//初始化
viewer = initViewer(viewerDivRef.value as HTMLElement)
// 性能优化
@ -69,6 +70,8 @@ onMounted( () => {
//绘制多边形
// const drawPolyline = new CreatePolyline(viewer)
// drawPolyline.start()
const drawPolygon = new DrawPolygon(viewer)
drawPolygon.start()
})
</script>

26
src/types/entityoptions.ts
Unescape Escape View File

@ -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 //图片高
}

2
src/utils/DataIO.ts
Unescape Escape View File

@ -1,5 +1,5 @@
/*
* @Author: zhaipx
* @Date: {2024/4/11}
* @Description:
* @Description:
*/

22
src/utils/getAssets.ts
Unescape Escape View File

@ -1,11 +1,11 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-04-10 11:21:35
* @LastEditors: cbwu
* @LastEditTime: 2024-04-10 11:29:01
* @Description: 获取静态资源文件
*/
// 获取地图assets静态资源
export const getMapAssetsFile = (url: string) => {
return new URL(`../assets/map/${url}`, import.meta.url).href
}
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-04-10 11:21:35
* @LastEditors: cbwu
* @LastEditTime: 2024-04-10 11:29:01
* @Description: 获取静态资源文件
*/
// 获取地图assets静态资源
export const getMapAssetsFile = (url: string) => {
return new URL(`../assets/map/${url}`, import.meta.url).href
}

7
src/utils/map/TDTProvider.ts
Unescape Escape View File

@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-07 16:04:55
* @LastEditors: cbwu
* @LastEditTime: 2024-04-02 14:01:22
* @LastEditTime: 2024-04-15 16:06:06
* @Description:
*/
// 天地图影像服务
@ -29,6 +29,7 @@ enum TDTProjectionType {
}
//天地图token
const TDT_tk = '1c5b7cbf9da7d33b221f68c32b6a1791'
const TDT_tk3D = '910a4befdfd04d5423268b0aced82248'
// 服务域名
const tdtUrl = 'https://t{s}.tianditu.gov.cn'
// 服务负载子域
@ -54,7 +55,7 @@ export function getTDTProvider(
: new WebMercatorTilingScheme()
const tileMatrixLabels =
projectionType == TDTProjectionType.WGS84
? new Array(19).fill(1).map((v, i) => `${i}`)
? new Array(19).fill(1).map((v, i) => `${i + 1}`)
: undefined
const imageryProvider = new WebMapTileServiceImageryProvider({
//影像底图
@ -84,7 +85,7 @@ export function getTDTTerrainProvider() {
const url =
tdtUrl.replace('{s}', subdomains[i]) +
'/mapservice/swdx?T=elv_c&tk=' +
TDT_tk
TDT_tk3D
terrainUrls.push(url)
}

106
src/utils/map/angle.ts
Unescape Escape View File

@ -1,57 +1,67 @@
import {getAzimuth} from "@/utils/map/geocomputation.ts";
import {Cartesian3} from "cesium";
import { getAzimuth } from '@/utils/map/geocomputation.ts'
import { Cartesian3 } from 'cesium'
class Angle {
constructor() {}
constructor() {}
/**
* 十进制经纬度转度分秒，精确至毫秒
* @param decimal_var 十进制经纬度
* @constructor
*/
static DecimalDegree2DMS(decimal_var: number|string){
if(!decimal_var.toString().includes('.'))
return decimal_var.toString() + '°0\'0\'\''
let decimalStr = decimal_var.toString().split('.')
let degreeStr = decimalStr[0]
if (decimalStr[1]){
let minutes = Number(decimalStr[1]) / Math.pow(10,decimalStr[1].length) * 60
if(!minutes.toString().includes('.'))
return degreeStr + '°'+ minutes.toString() +'\'0\'\''
let minuteSecondsStr = minutes.toString().split('.')
if (minuteSecondsStr[1]){
let secondStr = Number(minuteSecondsStr[1]) / Math.pow(10,minuteSecondsStr[1].length) * 60
return degreeStr + '°'+ minuteSecondsStr[0] +'\'' + secondStr.toFixed(3) + '\'\''
}
}
return ''
/**
* 十进制经纬度转度分秒，精确至毫秒
* @param decimal_var 十进制经纬度
* @constructor
*/
static DecimalDegree2DMS(decimal_var: number | string) {
if (!decimal_var.toString().includes('.'))
return decimal_var.toString() + "°0'0''"
let decimalStr = decimal_var.toString().split('.')
let degreeStr = decimalStr[0]
if (decimalStr[1]) {
let minutes =
(Number(decimalStr[1]) / Math.pow(10, decimalStr[1].length)) * 60
if (!minutes.toString().includes('.'))
return degreeStr + '°' + minutes.toString() + "'0''"
let minuteSecondsStr = minutes.toString().split('.')
if (minuteSecondsStr[1]) {
let secondStr =
(Number(minuteSecondsStr[1]) /
Math.pow(10, minuteSecondsStr[1].length)) *
60
return (
degreeStr +
'°' +
minuteSecondsStr[0] +
"'" +
secondStr.toFixed(3) +
"''"
)
}
}
return ''
}
/**
* 计算方位角，单位度
* @param p1 起点
* @param p2 终点
* @param digits 保留小数位数，默认保留1位小数
*/
static getAzimuth(p1: Cartesian3, p2: Cartesian3, digits=1){
return getAzimuth(p1, p2, digits)
}
/**
* 十进制度转弧度
* @param degree 十进制度
*/
static degree2rad(degree: number): number {
return Math.PI/180 * degree
}
/**
* 弧度转十进制度
* @param rad 弧度
*/
static rad2degree(rad: number): number {
return 180/Math.PI * rad
}
/**
* 计算方位角，单位度
* @param p1 起点
* @param p2 终点
* @param digits 保留小数位数，默认保留1位小数
*/
static getAzimuth(p1: Cartesian3, p2: Cartesian3, digits = 1) {
return getAzimuth(p1, p2, digits)
}
/**
* 十进制度转弧度
* @param degree 十进制度
*/
static degree2rad(degree: number): number {
return (Math.PI / 180) * degree
}
/**
* 弧度转十进制度
* @param rad 弧度
*/
static rad2degree(rad: number): number {
return (180 / Math.PI) * rad
}
}
export { Angle }

40
src/utils/map/camera.ts
Unescape Escape View File

@ -1,20 +1,20 @@
// 场景相机相关操作
import { Viewer, Cartesian3, Math } from 'cesium'
/**
* 将三维球定位到中国
* @param viewer :Viewer对象
*/
function flyToChina(viewer: Viewer) {
viewer.camera.flyTo({
destination: Cartesian3.fromDegrees(103.84, 31.15, 10350000),
orientation: {
heading: Math.toRadians(0),
pitch: Math.toRadians(-90),
roll: Math.toRadians(0),
},
complete: function callback() {
// 定位完成之后的回调函数
},
})
}
export { flyToChina }
// 场景相机相关操作
import { Viewer, Cartesian3, Math } from 'cesium'
/**
* 将三维球定位到中国
* @param viewer :Viewer对象
*/
function flyToChina(viewer: Viewer) {
viewer.camera.flyTo({
destination: Cartesian3.fromDegrees(103.84, 31.15, 10350000),
orientation: {
heading: Math.toRadians(0),
pitch: Math.toRadians(-90),
roll: Math.toRadians(0),
},
complete: function callback() {
// 定位完成之后的回调函数
},
})
}
export { flyToChina }

100
src/utils/map/coordinate.ts
Unescape Escape View File

@ -1,50 +1,50 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-22 09:11:54
* @LastEditors: cbwu
* @LastEditTime: 2024-04-01 09:21:17
* @Description: 坐标系转化
*/
import { Cartesian2, Viewer, Math, Cartographic, Cartesian3 } from 'cesium'
/**
* 屏幕坐标转笛卡尔坐标
* @param viewer
* @param windowPosition :屏幕二维坐标
* @returns :笛卡尔坐标
*/
function cartesian2ToCartesian3(viewer: Viewer, windowPosition: Cartesian2) {
const ray = viewer.camera.getPickRay(windowPosition)
if (ray != undefined) {
return viewer.scene.globe.pick(ray, viewer.scene)
} else return undefined
}
/**
* 屏幕坐标转地理坐标
* @param viewer
* @param windowPosition :屏幕坐标
* @returns :WGS84坐标
*/
function cartesian2ToWGS84(viewer: Viewer, windowPosition: Cartesian2) {
const cartesian3 = cartesian2ToCartesian3(viewer, windowPosition)
if (cartesian3 != undefined) {
return cartesian3ToWGS84(cartesian3)
} else return []
}
/**
* 笛卡尔坐标转WGS84坐标
* @param pos 笛卡尔坐标
* @returns 经纬度坐标
*/
function cartesian3ToWGS84(pos: Cartesian3) {
if (pos) {
const cartographic = Cartographic.fromCartesian(pos)
const lon = Math.toDegrees(cartographic.longitude) // 经度
const lat = Math.toDegrees(cartographic.latitude) // 纬度
const alt = cartographic.height // 高度
return [lon, lat, alt]
}
return []
}
export { cartesian2ToCartesian3, cartesian2ToWGS84, cartesian3ToWGS84 }
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-22 09:11:54
* @LastEditors: cbwu
* @LastEditTime: 2024-04-13 10:49:36
* @Description: 坐标系转化
*/
import { Cartesian2, Viewer, Math, Cartographic, Cartesian3 } from 'cesium'
/**
* 屏幕坐标转笛卡尔坐标
* @param viewer
* @param windowPosition :屏幕二维坐标
* @returns :笛卡尔坐标
*/
function cartesian2ToCartesian3(viewer: Viewer, windowPosition: Cartesian2) {
const ray = viewer.camera.getPickRay(windowPosition)
if (ray != undefined) {
return viewer.scene.globe.pick(ray, viewer.scene)
} else return undefined
}
/**
* 屏幕坐标转地理坐标
* @param viewer
* @param windowPosition :屏幕坐标
* @returns :WGS84坐标
*/
function cartesian2ToWGS84(viewer: Viewer, windowPosition: Cartesian2) {
const cartesian3 = cartesian2ToCartesian3(viewer, windowPosition)
if (cartesian3 != undefined) {
return cartesian3ToWGS84(cartesian3)
} else return []
}
/**
* 笛卡尔坐标转WGS84坐标
* @param pos 笛卡尔坐标
* @returns 经纬度坐标
*/
function cartesian3ToWGS84(pos: Cartesian3) {
if (pos) {
const cartographic = Cartographic.fromCartesian(pos)
const lon = Math.toDegrees(cartographic.longitude) // 经度
const lat = Math.toDegrees(cartographic.latitude) // 纬度
const alt = cartographic.height // 高度
return [lon, lat, alt]
}
return []
}
export { cartesian2ToCartesian3, cartesian2ToWGS84, cartesian3ToWGS84 }

100
src/utils/map/draw/drawPoint.ts
Unescape Escape View File

@ -1,50 +1,50 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-27 09:51:04
* @LastEditors: cbwu
* @LastEditTime: 2024-04-10 15:54:02
* @Description: 绘制点类
*/
import {
Viewer,
ScreenSpaceEventHandler,
Cartesian3,
Color,
ScreenSpaceEventType,
Entity,
DataSource,
} from 'cesium'
import { BillBoard } from '../geometry/billboard'
import { cartesian2ToCartesian3 } from '../coordinate'
export default class DrawPoint {
viewer: Viewer
handler: ScreenSpaceEventHandler
markerLayer: DataSource
constructor(viewer: Viewer) {
this.viewer = viewer
this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
this.markerLayer = viewer.dataSources.getByName('Marker')[0]
}
//开始绘制
public start() {
this.handler.setInputAction(
this.leftClickCallBack,
ScreenSpaceEventType.LEFT_CLICK,
)
}
//结束绘制
public end() {
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
this.handler.destroy()
}
//左键Click事件
private leftClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
if (cartesian3) {
this.markerLayer.entities.add(new BillBoard(cartesian3))
this.viewer.scene.requestRender()
}
}
}
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-27 09:51:04
* @LastEditors: cbwu
* @LastEditTime: 2024-04-13 10:46:43
* @Description: 绘制点类
*/
import {
Viewer,
ScreenSpaceEventHandler,
Cartesian3,
Color,
ScreenSpaceEventType,
Entity,
DataSource,
} from 'cesium'
import { BillBoard } from '../geometry/billboard'
import { cartesian2ToCartesian3 } from '../coordinate'
export default class DrawPoint {
viewer: Viewer
handler: ScreenSpaceEventHandler
markerLayer: DataSource
constructor(viewer: Viewer) {
this.viewer = viewer
this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
this.markerLayer = viewer.dataSources.getByName('Marker')[0]
}
//开始绘制
public start() {
this.handler.setInputAction(
this.leftClickCallBack,
ScreenSpaceEventType.LEFT_CLICK,
)
}
//结束绘制
public end() {
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
this.handler.destroy()
}
//左键Click事件
private leftClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
if (cartesian3) {
this.markerLayer.entities.add(new BillBoard(cartesian3))
this.viewer.scene.requestRender()
}
}
}

160
src/utils/map/draw/drawPolygon.ts
Unescape Escape View File

@ -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,
},
})
}
}

394
src/utils/map/draw/drawPolyline.ts
Unescape Escape View File

@ -1,197 +1,197 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-27 08:43:44
* @LastEditors: cbwu
* @LastEditTime: 2024-04-02 13:33:25
* @Description: 绘制Polyline类
*/
import {
Viewer,
ScreenSpaceEventHandler,
Cartesian3,
Color,
ScreenSpaceEventType,
Entity,
CallbackProperty,
PolylineDashMaterialProperty,
} from 'cesium'
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
// import { PointEntity, PolylineEntity } from '@/utils/map/geometry'
import { PolylineEntity } from '../geometry/polylineEntity'
import { PointEntity } from '@/utils/map/geometry/pointEntity'
import EditGeometry from '@/utils/map/draw/editGeometry'
type EntityOptions = {
id?: string
name?: string
show?: boolean
pixelSize?: number
color?: Color
fillColor?: Color
fill?: boolean
width?: number
outlineWidth?: number
}
export default class CreatePolyline {
viewer: Viewer
handler: ScreenSpaceEventHandler
polyline: PolylineEntity | null
dashLine: Entity | null
trackingLine: Entity | null
trackingLinePositions: Cartesian3[] = []
controlPoints: Entity[] | null
modifyPoint: any = null
clickedGeometry: Entity | null = null
moveSelectedPoint: PointEntity | null = null
positions: Cartesian3[] = []
bMove: boolean = false
bLongClick: boolean = false
clickTimeout: any
// layer: CustomDataSource
defaultStyle: EntityOptions = {
// id: 'Polyline' + String(PolylineEntity.id),
// name: 'Polyline' + String(PolylineEntity.id + 1),
show: true,
width: 2,
color: Color.GREEN,
}
constructor(viewer: Viewer, options?: EntityOptions) {
this.viewer = viewer
this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
this.polyline = null
this.trackingLine = null
this.dashLine = null
this.controlPoints = []
this.defaultStyle = { ...this.defaultStyle, ...options }
}
// 开始绘制
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,
)
// 右击回退上一步
this.handler.setInputAction(
this.rightClickCallBack,
ScreenSpaceEventType.RIGHT_CLICK,
)
}
public end() {
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
}
//左单击回调事件
private leftClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
const pickedObject = this.viewer.scene.pick(event.position)
// console.log(pickedObject)
if (pickedObject) {
//点击同一位置，返回
if (
pickedObject.id.id ===
this.polyline?.controlPointsID[this.positions.length - 1]
) {
return
// console.log('********click the same point')
}
}
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
if (cartesian3 != undefined) {
if (!this.polyline) {
this.polyline = new PolylineEntity(this.positions)
this.dashLine = this.createTrackingLine(this.positions)
this.viewer.entities.add(this.dashLine)
this.viewer.dataSources.add(this.polyline)
}
this.polyline.addPoint(cartesian3)
this.trackingLinePositions[0] = 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) {
//更新追踪线坐标
this.trackingLinePositions[1] = cartesian3
if (!this.trackingLine) {
//创建追踪线对象
this.trackingLine = this.createTrackingLine(
this.trackingLinePositions,
)
this.viewer.entities.add(this.trackingLine)
}
}
this.viewer.scene.requestRender() //刷新
}
}
// 左双击回调事件
private leftDoubleClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
// 清除可能已经设置的单击定时器
// clearTimeout(this.clickTimeout)
if (!this.polyline) return
console.log('**************************** double click')
this.bMove = false
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
if (cartesian3 != undefined) {
// 移除追踪线
if (!this.trackingLine) {
this.viewer.entities.remove(this.trackingLine!)
}
}
this.clearEvent()
console.log('end:' + this.positions.length.toString())
console.log(this.positions)
//结束绘制进入编辑模式
this.polyline.removeControlPoints()
const editTool = new EditGeometry(this.viewer, this.polyline.geometry!)
editTool.start()
}
// 右击回调事件
private rightClickCallBack = () => {
if (!this.controlPoints) return
if (this.controlPoints.length > 1) {
const lastPoint = this.positions.pop()
this.positions[this.positions.length - 1] = lastPoint!
this.viewer.entities.remove(this.controlPoints.pop() as Entity)
}
}
clearEvent() {
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE)
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
}
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,
},
})
}
}
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-27 08:43:44
* @LastEditors: cbwu
* @LastEditTime: 2024-04-13 10:46:58
* @Description: 绘制Polyline类
*/
import {
Viewer,
ScreenSpaceEventHandler,
Cartesian3,
Color,
ScreenSpaceEventType,
Entity,
CallbackProperty,
PolylineDashMaterialProperty,
} from 'cesium'
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
// import { PointEntity, PolylineEntity } from '@/utils/map/geometry'
import { PolylineEntity } from '../geometry/polylineEntity'
import { PointEntity } from '@/utils/map/geometry/pointEntity'
import EditGeometry from '@/utils/map/draw/editGeometry'
type EntityOptions = {
id?: string
name?: string
show?: boolean
pixelSize?: number
color?: Color
fillColor?: Color
fill?: boolean
width?: number
outlineWidth?: number
}
export default class CreatePolyline {
viewer: Viewer
handler: ScreenSpaceEventHandler
polyline: PolylineEntity | null
dashLine: Entity | null
trackingLine: Entity | null
trackingLinePositions: Cartesian3[] = []
controlPoints: Entity[] | null
modifyPoint: any = null
clickedGeometry: Entity | null = null
moveSelectedPoint: PointEntity | null = null
positions: Cartesian3[] = []
bMove: boolean = false
bLongClick: boolean = false
clickTimeout: any
// layer: CustomDataSource
defaultStyle: EntityOptions = {
// id: 'Polyline' + String(PolylineEntity.id),
// name: 'Polyline' + String(PolylineEntity.id + 1),
show: true,
width: 2,
color: Color.GREEN,
}
constructor(viewer: Viewer, options?: EntityOptions) {
this.viewer = viewer
this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
this.polyline = null
this.trackingLine = null
this.dashLine = null
this.controlPoints = []
this.defaultStyle = { ...this.defaultStyle, ...options }
}
// 开始绘制
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,
)
// 右击回退上一步
this.handler.setInputAction(
this.rightClickCallBack,
ScreenSpaceEventType.RIGHT_CLICK,
)
}
public end() {
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
}
//左单击回调事件
private leftClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
const pickedObject = this.viewer.scene.pick(event.position)
// console.log(pickedObject)
if (pickedObject) {
//点击同一位置，返回
if (
pickedObject.id.id ===
this.polyline?.controlPointsID[this.positions.length - 1]
) {
return
// console.log('********click the same point')
}
}
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
if (cartesian3 != undefined) {
if (!this.polyline) {
this.polyline = new PolylineEntity(this.positions)
this.dashLine = this.createTrackingLine(this.positions)
this.viewer.entities.add(this.dashLine)
this.viewer.dataSources.add(this.polyline)
}
this.polyline.addPoint(cartesian3)
this.trackingLinePositions[0] = 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) {
//更新追踪线坐标
this.trackingLinePositions[1] = cartesian3
if (!this.trackingLine) {
//创建追踪线对象
this.trackingLine = this.createTrackingLine(
this.trackingLinePositions,
)
this.viewer.entities.add(this.trackingLine)
}
}
this.viewer.scene.requestRender() //刷新
}
}
// 左双击回调事件
private leftDoubleClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
// 清除可能已经设置的单击定时器
// clearTimeout(this.clickTimeout)
if (!this.polyline) return
console.log('**************************** double click')
this.bMove = false
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
if (cartesian3 != undefined) {
// 移除追踪线
if (!this.trackingLine) {
this.viewer.entities.remove(this.trackingLine!)
}
}
this.clearEvent()
console.log('end:' + this.positions.length.toString())
console.log(this.positions)
//结束绘制进入编辑模式
this.polyline.removeControlPoints()
const editTool = new EditGeometry(this.viewer, this.polyline.geometry!)
editTool.start()
}
// 右击回调事件
private rightClickCallBack = () => {
if (!this.controlPoints) return
if (this.controlPoints.length > 1) {
const lastPoint = this.positions.pop()
this.positions[this.positions.length - 1] = lastPoint!
this.viewer.entities.remove(this.controlPoints.pop() as Entity)
}
}
clearEvent() {
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE)
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
}
//创建追踪线
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,
},
})
}
}

498
src/utils/map/draw/editGeometry.ts
Unescape Escape View File

@ -1,249 +1,249 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-27 11:06:45
* @LastEditors: cbwu
* @LastEditTime: 2024-04-02 11:05:20
* @Description: 编辑几何体类。操作逻辑
*/
import {
Viewer,
ScreenSpaceEventHandler,
PointGraphics,
PolylineGraphics,
Cartesian3,
ConstantProperty,
ScreenSpaceEventType,
Entity,
ConstantPositionProperty,
defined,
} from 'cesium'
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
import { getClosestPoint, isOnLineSegment } from '@/utils/map/geocomputation'
import { PointEntity } from '@/utils/map/geometry/pointEntity'
export default class EditGeometry {
viewer: Viewer
editHandler: ScreenSpaceEventHandler
geometry: Entity //要编辑的几何对象
oldPositions: Cartesian3[] = [] //存储未修改前的坐标
positions: Cartesian3[] = [] //要编辑的几个对象坐标
controlPointsID: string[] = []
controlPoint: PointEntity | null = null
clickedGeometry: Entity | null = null
clickDownPosition: Cartesian3 | null = null
moveSelectedPoint: PointEntity | null = null
bDrag: boolean = false //拖动标识
bLongClick: boolean = false //长按标识
clickTimeout: any
constructor(viewer: Viewer, editGeometry: Entity) {
this.viewer = viewer
this.editHandler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
this.geometry = editGeometry
this.positions = editGeometry.polyline?.positions?.getValue(
this.viewer.clock.currentTime,
)
this.oldPositions = this.positions
// 创建控制点
this.positions.forEach((value, index) => {
this.createPoint(value, index)
})
}
public start() {
this.editHandler.setInputAction(
this.leftDownClickCallBack,
ScreenSpaceEventType.LEFT_DOWN,
)
this.editHandler.setInputAction(
this.moveCallBack,
ScreenSpaceEventType.MOUSE_MOVE,
)
this.editHandler.setInputAction(
this.leftUpClickCallBack,
ScreenSpaceEventType.LEFT_UP,
)
}
//左键点击回调
private leftClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
const pickedObject = this.viewer.scene.pick(event.position)
// 点中控制点
if (
defined(pickedObject) &&
defined(pickedObject.id) &&
pickedObject.id.point instanceof PointGraphics
) {
console.log('You clicked a point entity.')
this.controlPoint = pickedObject.id
console.log(this.controlPoint?.subId)
this.bDrag = true
this.forbidDrawWorld(true)
}
}
//左键按下回调
private leftDownClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
// 清除可能已经设置的单击定时器
clearTimeout(this.clickTimeout)
// 判断是不是长按
this.clickTimeout = setTimeout(() => {
this.bLongClick = true
}, 100)
const pickedObject = this.viewer.scene.pick(event.position)
//点中实体对象
if (defined(pickedObject) && defined(pickedObject.id)) {
// 记录点击的几何对象及位置
this.clickedGeometry = pickedObject.id
this.clickDownPosition = this.viewer.scene.pickPosition(event.position)
// // 判断是否同一实体
// if (this.geometry != pickedObject.id) {
// this.geometry = pickedObject.id
// if (
// pickedObject instanceof PolylineGraphics &&
// pickedObject.positions
// ) {
// this.oldPositions = this.geometry!.polyline!.positions?.getValue(
// this.viewer.clock.currentTime,
// )
// }
// }
// 点中控制点
if (pickedObject.id.point instanceof PointGraphics) {
console.log('You clicked a point entity.')
this.controlPoint = pickedObject.id
console.log(this.controlPoint?.subId)
this.bDrag = true
this.forbidDrawWorld(true)
}
}
}
//移动回调
private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
const pickedObject = this.viewer.scene.pick(event.endPosition)
// 悬停控制点放大
if (
pickedObject &&
pickedObject.id &&
pickedObject.id.point instanceof PointGraphics
) {
if (pickedObject.id.point instanceof PointGraphics) {
if (
this.moveSelectedPoint == null ||
this.moveSelectedPoint.id !== pickedObject.id.id
) {
this.moveSelectedPoint = pickedObject.id
this.moveSelectedPoint!.point!.pixelSize = new ConstantProperty(
this.moveSelectedPoint!.options.pixelSize! + 2,
)
// console.log(this.moveSelectedPoint)
}
this.viewer.scene.requestRender() //刷新
}
} else {
// 离开控制点恢复原始大小
if (this.moveSelectedPoint) {
this.moveSelectedPoint!.point!.pixelSize = new ConstantProperty(
this.moveSelectedPoint!.options.pixelSize! - 2,
)
this.moveSelectedPoint = null
this.viewer.scene.requestRender() //刷新
}
}
if (!this.controlPoint || !this.bDrag) return
console.log('************************left down')
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
if (cartesian3) {
// 修改节点坐标
this.modifyPoint(cartesian3, this.controlPoint.subId)
// this.geometry?.modifyPoint(cartesian3, this.controlPoint.subId)
this.viewer.scene.requestRender() //刷新
}
}
//左键松开回调
private leftUpClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
clearTimeout(this.clickTimeout)
// 单击添加点
if (
!this.bLongClick &&
this.clickedGeometry?.polyline instanceof PolylineGraphics
) {
console.log('点中线，加点')
this.addPoint()
}
this.bLongClick = false
this.bDrag = false
this.forbidDrawWorld(false)
}
// 左键双击回调
private leftDoubleClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
// this.geometry.
}
// Viewer操作控制
forbidDrawWorld(isForbid: boolean) {
this.viewer.scene.screenSpaceCameraController.enableRotate = !isForbid
this.viewer.scene.screenSpaceCameraController.enableTilt = !isForbid
this.viewer.scene.screenSpaceCameraController.enableTranslate = !isForbid
this.viewer.scene.screenSpaceCameraController.enableInputs = !isForbid
}
// 添加点
addPoint() {
for (let i = 0; i < this.positions.length - 1; ++i) {
if (
isOnLineSegment(
this.positions[i],
this.positions[i + 1],
this.clickDownPosition!,
)
) {
// 修改线坐标
const pt = getClosestPoint(
this.positions[i],
this.positions[i + 1],
this.clickDownPosition!,
)
this.positions.splice(i + 1, 0, pt)
// 新建控制点
this.createPoint(pt, i + 1)
// 修改控制点的subid
for (let index = i + 2; index < this.controlPointsID.length; ++index) {
const point = this.geometry.entityCollection.getById(
this.controlPointsID[index],
) as PointEntity
point!.subId = point!.subId + 1
}
return
}
}
}
/**
* 修改某点的坐标
* @param pos 修改点的坐标
* @param index 修改点的位置
*/
modifyPoint(pos: Cartesian3, index: number) {
// 修改线坐标
this.positions.splice(index, 1, pos)
// 修改控制点坐标
this.controlPoint!.position = new ConstantPositionProperty(pos)
}
/**
* 新加一个点
* @param pos 点的坐标
* @param index 插入的位置,0起步
*/
createPoint(pos: Cartesian3, index: number) {
// if (this.geometry) {
const point = new PointEntity(pos)
point.parent = this.geometry
point.subId = index
this.geometry.entityCollection.add(point)
this.controlPointsID.splice(index, 0, point.id)
// }
}
}
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-27 11:06:45
* @LastEditors: cbwu
* @LastEditTime: 2024-04-13 10:47:09
* @Description: 编辑几何体类。操作逻辑
*/
import {
Viewer,
ScreenSpaceEventHandler,
PointGraphics,
PolylineGraphics,
Cartesian3,
ConstantProperty,
ScreenSpaceEventType,
Entity,
ConstantPositionProperty,
defined,
} from 'cesium'
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
import { getClosestPoint, isOnLineSegment } from '@/utils/map/geocomputation'
import { PointEntity } from '@/utils/map/geometry/pointEntity'
export default class EditGeometry {
viewer: Viewer
editHandler: ScreenSpaceEventHandler
geometry: Entity //要编辑的几何对象
oldPositions: Cartesian3[] = [] //存储未修改前的坐标
positions: Cartesian3[] = [] //要编辑的几个对象坐标
controlPointsID: string[] = []
controlPoint: PointEntity | null = null
clickedGeometry: Entity | null = null
clickDownPosition: Cartesian3 | null = null
moveSelectedPoint: PointEntity | null = null
bDrag: boolean = false //拖动标识
bLongClick: boolean = false //长按标识
clickTimeout: any
constructor(viewer: Viewer, editGeometry: Entity) {
this.viewer = viewer
this.editHandler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
this.geometry = editGeometry
this.positions = editGeometry.polyline?.positions?.getValue(
this.viewer.clock.currentTime,
)
this.oldPositions = this.positions
// 创建控制点
this.positions.forEach((value, index) => {
this.createPoint(value, index)
})
}
public start() {
this.editHandler.setInputAction(
this.leftDownClickCallBack,
ScreenSpaceEventType.LEFT_DOWN,
)
this.editHandler.setInputAction(
this.moveCallBack,
ScreenSpaceEventType.MOUSE_MOVE,
)
this.editHandler.setInputAction(
this.leftUpClickCallBack,
ScreenSpaceEventType.LEFT_UP,
)
}
//左键点击回调
private leftClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
const pickedObject = this.viewer.scene.pick(event.position)
// 点中控制点
if (
defined(pickedObject) &&
defined(pickedObject.id) &&
pickedObject.id.point instanceof PointGraphics
) {
console.log('You clicked a point entity.')
this.controlPoint = pickedObject.id
console.log(this.controlPoint?.subId)
this.bDrag = true
this.forbidDrawWorld(true)
}
}
//左键按下回调
private leftDownClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
// 清除可能已经设置的单击定时器
clearTimeout(this.clickTimeout)
// 判断是不是长按
this.clickTimeout = setTimeout(() => {
this.bLongClick = true
}, 100)
const pickedObject = this.viewer.scene.pick(event.position)
//点中实体对象
if (defined(pickedObject) && defined(pickedObject.id)) {
// 记录点击的几何对象及位置
this.clickedGeometry = pickedObject.id
this.clickDownPosition = this.viewer.scene.pickPosition(event.position)
// // 判断是否同一实体
// if (this.geometry != pickedObject.id) {
// this.geometry = pickedObject.id
// if (
// pickedObject instanceof PolylineGraphics &&
// pickedObject.positions
// ) {
// this.oldPositions = this.geometry!.polyline!.positions?.getValue(
// this.viewer.clock.currentTime,
// )
// }
// }
// 点中控制点
if (pickedObject.id.point instanceof PointGraphics) {
console.log('You clicked a point entity.')
this.controlPoint = pickedObject.id
console.log(this.controlPoint?.subId)
this.bDrag = true
this.forbidDrawWorld(true)
}
}
}
//移动回调
private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
const pickedObject = this.viewer.scene.pick(event.endPosition)
// 悬停控制点放大
if (
pickedObject &&
pickedObject.id &&
pickedObject.id.point instanceof PointGraphics
) {
if (pickedObject.id.point instanceof PointGraphics) {
if (
this.moveSelectedPoint == null ||
this.moveSelectedPoint.id !== pickedObject.id.id
) {
this.moveSelectedPoint = pickedObject.id
this.moveSelectedPoint!.point!.pixelSize = new ConstantProperty(
this.moveSelectedPoint!.options.pixelSize! + 2,
)
// console.log(this.moveSelectedPoint)
}
this.viewer.scene.requestRender() //刷新
}
} else {
// 离开控制点恢复原始大小
if (this.moveSelectedPoint) {
this.moveSelectedPoint!.point!.pixelSize = new ConstantProperty(
this.moveSelectedPoint!.options.pixelSize! - 2,
)
this.moveSelectedPoint = null
this.viewer.scene.requestRender() //刷新
}
}
if (!this.controlPoint || !this.bDrag) return
console.log('************************left down')
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
if (cartesian3) {
// 修改节点坐标
this.modifyPoint(cartesian3, this.controlPoint.subId)
// this.geometry?.modifyPoint(cartesian3, this.controlPoint.subId)
this.viewer.scene.requestRender() //刷新
}
}
//左键松开回调
private leftUpClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
clearTimeout(this.clickTimeout)
// 单击添加点
if (
!this.bLongClick &&
this.clickedGeometry?.polyline instanceof PolylineGraphics
) {
console.log('点中线，加点')
this.addPoint()
}
this.bLongClick = false
this.bDrag = false
this.forbidDrawWorld(false)
}
// 左键双击回调
private leftDoubleClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
// this.geometry.
}
// Viewer操作控制
forbidDrawWorld(isForbid: boolean) {
this.viewer.scene.screenSpaceCameraController.enableRotate = !isForbid
this.viewer.scene.screenSpaceCameraController.enableTilt = !isForbid
this.viewer.scene.screenSpaceCameraController.enableTranslate = !isForbid
this.viewer.scene.screenSpaceCameraController.enableInputs = !isForbid
}
// 添加点
addPoint() {
for (let i = 0; i < this.positions.length - 1; ++i) {
if (
isOnLineSegment(
this.positions[i],
this.positions[i + 1],
this.clickDownPosition!,
)
) {
// 修改线坐标
const pt = getClosestPoint(
this.positions[i],
this.positions[i + 1],
this.clickDownPosition!,
)
this.positions.splice(i + 1, 0, pt)
// 新建控制点
this.createPoint(pt, i + 1)
// 修改控制点的subid
for (let index = i + 2; index < this.controlPointsID.length; ++index) {
const point = this.geometry.entityCollection.getById(
this.controlPointsID[index],
) as PointEntity
point!.subId = point!.subId + 1
}
return
}
}
}
/**
* 修改某点的坐标
* @param pos 修改点的坐标
* @param index 修改点的位置
*/
modifyPoint(pos: Cartesian3, index: number) {
// 修改线坐标
this.positions.splice(index, 1, pos)
// 修改控制点坐标
this.controlPoint!.position = new ConstantPositionProperty(pos)
}
/**
* 新加一个点
* @param pos 点的坐标
* @param index 插入的位置,0起步
*/
createPoint(pos: Cartesian3, index: number) {
// if (this.geometry) {
const point = new PointEntity(pos)
point.parent = this.geometry
point.subId = index
this.geometry.entityCollection.add(point)
this.controlPointsID.splice(index, 0, point.id)
// }
}
}

231
src/utils/map/draw/geometry.ts
Unescape Escape View File

@ -1,231 +0,0 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 09:14:45
* @LastEditors: cbwu
* @LastEditTime: 2024-03-28 17:40:14
* @Description: 封装的几何类型类
*/
import {
Entity,
EntityCollection,
Cartesian3,
Color,
PrimitiveCollection,
PointPrimitiveCollection,
PolylineGeometry,
PointGraphics,
Property,
PositionProperty,
LabelGraphics,
PolylineGraphics,
PolygonGraphics,
Cartesian2,
ConstantPositionProperty,
CallbackProperty,
} from 'cesium'
type 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
}
// 点
class PointEntity extends Entity {
static ID: number = 0
public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
options: EntityOptions = {
id: 'Point' + String(PointEntity.ID),
name: 'Point' + String(PointEntity.ID + 1),
show: true,
pixelSize: 10,
color: Color.GREEN,
outlineWidth: 0,
}
constructor(
position: PositionProperty | Cartesian3,
options?: EntityOptions,
) {
super({
position: position,
})
this.options = { ...this.options, ...options }
//点对象
this.point = new PointGraphics({
pixelSize: this.options.pixelSize,
color: this.options.color,
outlineColor: this.options.outlineColor,
outlineWidth: this.options.outlineWidth,
})
// 标注对象
this.label = new LabelGraphics({
text: this.options.text,
font: this.options.font,
pixelOffset: this.options.pixelOffset,
})
PointEntity.ID++
}
}
// 线
class PolylineEntity extends EntityCollection {
static ID: number = 0
positions: Cartesian3[] = []
controlPointsID: string[] = []
options: EntityOptions = {
id: 'Polyline' + String(PolylineEntity.ID),
name: 'Polyline' + String(PolylineEntity.ID + 1),
show: true,
width: 2,
color: Color.GREEN,
}
constructor(ptArr: Cartesian3[], options?: EntityOptions) {
super()
this.options = { ...this.options, ...options }
this.positions = ptArr
const polyline = new Entity({
name: this.options.name,
polyline: {
positions: new CallbackProperty(() => {
return this.positions
}, false),
show: this.options.show,
width: this.options.width,
material: this.options.color,
},
})
this.add(polyline)
ptArr.forEach((pt, index) => {
this.createPoint(pt, index)
})
PolylineEntity.ID++
}
/**
* 新增一个节点,默认插入在尾部，
* @param pos 点坐标
* @param index 插入的位置，0起步
*/
public addPoint(pos: Cartesian3, index: number = -1) {
if (index === -1) {
//插入尾部
this.positions.push(pos)
this.createPoint(pos, this.positions.length - 1)
} else if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 0, pos)
this.createPoint(pos, index)
} else {
return
}
}
/**
* 移除点
* @param index 移除点的位置
* @returns
*/
public removePoint(index: number = -1) {
if (index === -1 || index === this.positions.length - 1) {
//移除尾部元素
this.positions.pop()
} else if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 1)
this.removeById(this.controlPointsID[index])
this.controlPointsID.splice(index, 1)
} else {
return
}
}
/**
* 修改某点的坐标
* @param pos 修改点的坐标
* @param index 修改点的位置
*/
public modifyPoint(pos: Cartesian3, index: number) {
if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 1, pos)
//修改控制点坐标
const point = this.getById(this.controlPointsID[index])
if (point) {
point.position = new ConstantPositionProperty(pos)
}
}
}
/**
* 新加一个点
* @param pos 点的坐标
* @param index 插入的位置,0起步
*/
createPoint(pos: Cartesian3, index: number) {
const point = new PointEntity(pos)
point.subId = index + 1
this.add(point)
this.controlPointsID.splice(index, 0, point.id)
}
}
// 多边形
class PolygonEntity extends Entity {
static id: number = 0
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[] | Property, options?: EntityOptions) {
super({
// id: options?.id || String(PolygonEntity.id),
})
this.options = { ...this.options, ...options }
this.name = this.options.name
this.polygon = new PolygonGraphics({
show: this.options.show,
hierarchy: ptArr,
material: this.options.fillColor, //填充颜色
fill: this.options.fill, //是否填充
outlineWidth: this.options.width, //线宽
outlineColor: this.options.color, //线颜色
})
PolygonEntity.id++
}
}
// 线
class Polyline extends PrimitiveCollection {
constructor(ptArr: Cartesian3[]) {
super()
this.add(this.createPoints(ptArr))
this.add(this.createPolyline(ptArr))
// this.id
}
private createPoints(posArr: Cartesian3[]) {
const points = new PointPrimitiveCollection()
for (const pos in posArr) {
points.add({
position: pos,
color: Color.RED,
pixelSize: 10,
})
}
return points
}
private createPolyline(posArr: Cartesian3[]) {
return new PolylineGeometry({
positions: posArr,
width: 2,
colors: new Array(posArr.length).fill(Color.fromCssColorString('green')),
})
}
}
export { PointEntity, Polyline, PolylineEntity, PolygonEntity }

370
src/utils/map/drawer.ts
Unescape Escape View File

@ -1,185 +1,185 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-15 08:43:26
* @LastEditors: cbwu
* @LastEditTime: 2024-03-26 14:20:32
* @FilePath: \GCSMap\src\utils\drawer.ts
* @Description: 矢量要素绘制工具类
*/
import {
Viewer,
ScreenSpaceEventHandler,
ScreenSpaceEventType,
CustomDataSource,
Cartesian3,
CallbackProperty,
PolygonHierarchy,
Color,
} from 'cesium'
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
import {
PointEntity,
PolylineEntity,
PolygonEntity,
} from '@/utils/map/geometry'
class Drawer {
viewer: Viewer
type: string
handler: ScreenSpaceEventHandler
layer: CustomDataSource
polyline: PolylineEntity | null
polygon: PolygonEntity | null
positions: Cartesian3[] = []
n_Points: number
bMove: boolean
clickTimeout: any
constructor(viewer: Viewer, type: string) {
this.viewer = viewer
this.type = type
this.handler = new ScreenSpaceEventHandler(this.viewer.canvas)
this.polyline = null
this.polygon = null
this.n_Points = 0
this.bMove = false
this.positions = []
this.clickTimeout = null
if (viewer.dataSources.getByName(type).length === 0) {
this.layer = new CustomDataSource(type)
viewer.dataSources.add(this.layer)
} else {
this.layer = viewer.dataSources.getByName(type)[0]
}
}
// 开始绘制
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,
)
}
public end() {
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
}
//左单击回调事件
private leftClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
// 清除可能已经设置的单击定时器
clearTimeout(this.clickTimeout)
console.log('**************************** click')
// 设置一个新的定时器，用于判断是单击还是双击
this.clickTimeout = setTimeout(() => {
console.log('**************************** run')
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
if (cartesian3 != undefined) {
if (this.bMove) {
this.positions.pop()
this.bMove = false
}
this.positions.push(cartesian3)
this.createGeometry(this.type)
// 创建控制点
const point = new PointEntity(
this.positions[this.positions.length - 1],
{
color: Color.WHITE,
pixelSize: 6,
},
)
point.parent = this.polygon!
this.layer.entities.add(point)
this.viewer.scene.requestRender() //刷新
}
}, 100)
}
// 移动回调事件
private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
if (cartesian3 != undefined) {
if (this.positions.length >= 1) {
if (!this.bMove) {
this.positions.push(cartesian3)
this.bMove = true
} else {
this.positions[this.positions.length - 1] = cartesian3
}
if (this.type === 'Polygon') {
// 多边形创建临时线
if (this.positions.length === 2) {
this.createGeometry('Polyline')
}
if (this.positions.length > 2) {
this.polyline!.show = false
}
}
}
this.viewer.scene.requestRender() //刷新
}
}
// 左双击回调事件
private leftDoubleClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
// 清除可能已经设置的单击定时器
clearTimeout(this.clickTimeout)
console.log('**************************** double click')
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
if (cartesian3 != undefined) {
this.positions.pop()
this.positions.push(cartesian3)
}
this.clearEvent()
console.log('end:' + this.positions.length.toString())
console.log(this.positions)
}
clearEvent() {
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE)
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
}
// 创建几何体
createGeometry(type: string) {
switch (type) {
case 'Polyline':
if (this.polyline == null) {
this.polyline = new PolylineEntity(
new CallbackProperty(() => {
return this.positions
}, false),
)
this.layer.entities.add(this.polyline)
// this.viewer.entities.add(this.polyline)
}
break
case 'Polygon':
if (this.polygon == null) {
this.polygon = new PolygonEntity(
new CallbackProperty(() => {
return new PolygonHierarchy(this.positions)
}, false),
)
this.layer.entities.add(this.polygon)
// this.viewer.entities.add(this.polygon)
console.log('Polygon created!')
}
break
default:
break
}
}
}
export { Drawer }
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-15 08:43:26
* @LastEditors: cbwu
* @LastEditTime: 2024-04-13 10:49:27
* @FilePath: \GCSMap\src\utils\drawer.ts
* @Description: 矢量要素绘制工具类
*/
import {
Viewer,
ScreenSpaceEventHandler,
ScreenSpaceEventType,
CustomDataSource,
Cartesian3,
CallbackProperty,
PolygonHierarchy,
Color,
} from 'cesium'
import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
import {
PointEntity,
PolylineEntity,
PolygonEntity,
} from '@/utils/map/geometry'
class Drawer {
viewer: Viewer
type: string
handler: ScreenSpaceEventHandler
layer: CustomDataSource
polyline: PolylineEntity | null
polygon: PolygonEntity | null
positions: Cartesian3[] = []
n_Points: number
bMove: boolean
clickTimeout: any
constructor(viewer: Viewer, type: string) {
this.viewer = viewer
this.type = type
this.handler = new ScreenSpaceEventHandler(this.viewer.canvas)
this.polyline = null
this.polygon = null
this.n_Points = 0
this.bMove = false
this.positions = []
this.clickTimeout = null
if (viewer.dataSources.getByName(type).length === 0) {
this.layer = new CustomDataSource(type)
viewer.dataSources.add(this.layer)
} else {
this.layer = viewer.dataSources.getByName(type)[0]
}
}
// 开始绘制
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,
)
}
public end() {
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
}
//左单击回调事件
private leftClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
// 清除可能已经设置的单击定时器
clearTimeout(this.clickTimeout)
console.log('**************************** click')
// 设置一个新的定时器，用于判断是单击还是双击
this.clickTimeout = setTimeout(() => {
console.log('**************************** run')
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
if (cartesian3 != undefined) {
if (this.bMove) {
this.positions.pop()
this.bMove = false
}
this.positions.push(cartesian3)
this.createGeometry(this.type)
// 创建控制点
const point = new PointEntity(
this.positions[this.positions.length - 1],
{
color: Color.WHITE,
pixelSize: 6,
},
)
point.parent = this.polygon!
this.layer.entities.add(point)
this.viewer.scene.requestRender() //刷新
}
}, 100)
}
// 移动回调事件
private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
if (cartesian3 != undefined) {
if (this.positions.length >= 1) {
if (!this.bMove) {
this.positions.push(cartesian3)
this.bMove = true
} else {
this.positions[this.positions.length - 1] = cartesian3
}
if (this.type === 'Polygon') {
// 多边形创建临时线
if (this.positions.length === 2) {
this.createGeometry('Polyline')
}
if (this.positions.length > 2) {
this.polyline!.show = false
}
}
}
this.viewer.scene.requestRender() //刷新
}
}
// 左双击回调事件
private leftDoubleClickCallBack = (
event: ScreenSpaceEventHandler.PositionedEvent,
) => {
// 清除可能已经设置的单击定时器
clearTimeout(this.clickTimeout)
console.log('**************************** double click')
const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
if (cartesian3 != undefined) {
this.positions.pop()
this.positions.push(cartesian3)
}
this.clearEvent()
console.log('end:' + this.positions.length.toString())
console.log(this.positions)
}
clearEvent() {
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE)
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
}
// 创建几何体
createGeometry(type: string) {
switch (type) {
case 'Polyline':
if (this.polyline == null) {
this.polyline = new PolylineEntity(
new CallbackProperty(() => {
return this.positions
}, false),
)
this.layer.entities.add(this.polyline)
// this.viewer.entities.add(this.polyline)
}
break
case 'Polygon':
if (this.polygon == null) {
this.polygon = new PolygonEntity(
new CallbackProperty(() => {
return new PolygonHierarchy(this.positions)
}, false),
)
this.layer.entities.add(this.polygon)
// this.viewer.entities.add(this.polygon)
console.log('Polygon created!')
}
break
default:
break
}
}
}
export { Drawer }

305
src/utils/map/geocomputation.ts
Unescape Escape View File

@ -1,142 +1,163 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-22 15:42:49
* @LastEditors: cbwu
* @LastEditTime: 2024-04-01 14:05:43
* @Description: 地理计算
*/
import {Cartesian3, Cartographic, EllipsoidGeodesic, Math as Cesium_Math, Matrix4, Transforms} from 'cesium'
/**
* 计算空间中一点到一条直线的最短距离的交点（在不考虑地球曲率的情况下）
* @param lineStart 直线的起点：[longitude1, latitude1, height1]
* @param lineEnd 直线的终点:[longitude2, latitude2, height2]
* @param point 空间中的点:[[longitude3, latitude3, height3]]
* @returns 最近的交点
*/
function getClosestPoint(
lineStart: Cartesian3,
lineEnd: Cartesian3,
point: Cartesian3,
): Cartesian3 {
// 计算直线方向向量
const lineDirection = new Cartesian3()
Cartesian3.subtract(lineEnd, lineStart, lineDirection)
Cartesian3.normalize(lineDirection, lineDirection)
// 计算点到直线起点的向量
const pointToStart = new Cartesian3()
Cartesian3.subtract(point, lineStart, pointToStart)
// 计算投影长度，即点到直线的向量在直线方向向量上的分量长度
const projectionLength = Cartesian3.dot(pointToStart, lineDirection)
// 使用标量乘法和向量加法确定交点
const closestPoint = new Cartesian3()
Cartesian3.multiplyByScalar(lineDirection, projectionLength, closestPoint)
Cartesian3.add(lineStart, closestPoint, closestPoint)
return closestPoint
}
/**
* 判断一个点是否在直线上（在不考虑地球曲率的情况下）
* @param lineStart 直线的起点：[longitude1, latitude1, height1]
* @param lineEnd 直线的起点：[longitude2, latitude2, height2]
* @param pointToCheck 直线的起点：[longitude3, latitude3, height3]
* @param tolerance 容差
* @returns 是否在线段上
*/
function isOnLineSegment(
lineStart: Cartesian3,
lineEnd: Cartesian3,
pointToCheck: Cartesian3,
tolerance: number = Cesium_Math.EPSILON1,
): boolean {
const dist_AP = Cartesian3.distance(lineStart, pointToCheck)
const dist_BP = Cartesian3.distance(lineEnd, pointToCheck)
const dist_AB = Cartesian3.distance(lineStart, lineEnd)
const isCollinear = Math.abs(dist_AP + dist_BP - dist_AB) < tolerance
return isCollinear
/*
const startToEnd = new Cartesian3()
const startToPoint = new Cartesian3()
const endToPoint = new Cartesian3()
// 计算向量
Cartesian3.subtract(lineEnd, lineStart, startToEnd)
Cartesian3.subtract(pointToCheck, lineStart, startToPoint)
Cartesian3.subtract(pointToCheck, lineEnd, endToPoint)
// 判断共线
const cross = Cartesian3.cross(startToEnd, startToPoint, new Cartesian3())
console.log('cross:' + Cartesian3.magnitude(cross).toString())
// Math.EPSILON6 是一个非常小的值，用来防止浮点数计算的误差
const isCollinear = Cartesian3.magnitude(cross) < tolerance
// 判断点是否在线段之间
let isBetween = false
if (isCollinear) {
const dotProduct1 = Cartesian3.dot(startToEnd, startToPoint)
const dotProduct2 = Cartesian3.dot(startToEnd, endToPoint)
isBetween = dotProduct1 >= 0 && dotProduct2 <= 0
}
return isBetween
*/
}
/**
* 计算距离，单位米
* @param p1 起点
* @param p2 终点
*/
function getDistance(p1:Cartesian3, p2: Cartesian3): number
{
let point1cartographic = Cartographic.fromCartesian(p1);
let point2cartographic = Cartographic.fromCartesian(p2);
/**根据经纬度计算出距离**/
let geodesic = new EllipsoidGeodesic()
geodesic.setEndPoints(point1cartographic, point2cartographic)
return geodesic.surfaceDistance/1000
}
/**
* 计算方位角，单位度
* @param p1 起点
* @param p2 终点
* @param digits 保留小数位数，默认为保留1位小数
*/
function getAzimuth(p1:Cartesian3, p2: Cartesian3, digits=1): string
{
// 建立局部坐标系：北为y，东为x，p1为原点
const localMatrix = Transforms.eastNorthUpToFixedFrame(p1)
//求世界坐标到局部坐标的变换矩阵
const worldToLocalMatrix = Matrix4.inverse(localMatrix, new Matrix4())
//p1在局部坐标系的位置，即局部坐标原点
const localPosition1 = Matrix4.multiplyByPoint(worldToLocalMatrix, p1, new Cartesian3())
//p2在局部坐标系的位置
const localPosition2 = Matrix4.multiplyByPoint(worldToLocalMatrix, p2, new Cartesian3())
//弧度
const angle = Math.atan2(localPosition2.x - localPosition1.x, localPosition2.y - localPosition1.y)
//转为角度
let theta = angle * (180 / Math.PI);
theta = theta < 0 ? theta + 360 : theta
return theta.toFixed(digits)
}
/**
* 计算多边形面积，单位平方米
* @param vertexs 多边形顶点数组
*/
function getPolygonArea(vertexs: Cartesian3[]) {
let area = 0
for (let i = 0; i < vertexs.length; i++) {
let j = (i + 1) % vertexs.length
area += vertexs[i].x * vertexs[j].y
area -= vertexs[i].y * vertexs[j].x
}
area /= 2
return Math.abs(area)
}
export { getClosestPoint, isOnLineSegment, getDistance, getAzimuth, getPolygonArea }
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-22 15:42:49
* @LastEditors: cbwu
* @LastEditTime: 2024-04-13 10:49:17
* @Description: 地理计算
*/
import {
Cartesian3,
Cartographic,
EllipsoidGeodesic,
Math as Cesium_Math,
Matrix4,
Transforms,
} from 'cesium'
/**
* 计算空间中一点到一条直线的最短距离的交点（在不考虑地球曲率的情况下）
* @param lineStart 直线的起点：[longitude1, latitude1, height1]
* @param lineEnd 直线的终点:[longitude2, latitude2, height2]
* @param point 空间中的点:[[longitude3, latitude3, height3]]
* @returns 最近的交点
*/
function getClosestPoint(
lineStart: Cartesian3,
lineEnd: Cartesian3,
point: Cartesian3,
): Cartesian3 {
// 计算直线方向向量
const lineDirection = new Cartesian3()
Cartesian3.subtract(lineEnd, lineStart, lineDirection)
Cartesian3.normalize(lineDirection, lineDirection)
// 计算点到直线起点的向量
const pointToStart = new Cartesian3()
Cartesian3.subtract(point, lineStart, pointToStart)
// 计算投影长度，即点到直线的向量在直线方向向量上的分量长度
const projectionLength = Cartesian3.dot(pointToStart, lineDirection)
// 使用标量乘法和向量加法确定交点
const closestPoint = new Cartesian3()
Cartesian3.multiplyByScalar(lineDirection, projectionLength, closestPoint)
Cartesian3.add(lineStart, closestPoint, closestPoint)
return closestPoint
}
/**
* 判断一个点是否在直线上（在不考虑地球曲率的情况下）
* @param lineStart 直线的起点：[longitude1, latitude1, height1]
* @param lineEnd 直线的起点：[longitude2, latitude2, height2]
* @param pointToCheck 直线的起点：[longitude3, latitude3, height3]
* @param tolerance 容差
* @returns 是否在线段上
*/
function isOnLineSegment(
lineStart: Cartesian3,
lineEnd: Cartesian3,
pointToCheck: Cartesian3,
tolerance: number = Cesium_Math.EPSILON1,
): boolean {
const dist_AP = Cartesian3.distance(lineStart, pointToCheck)
const dist_BP = Cartesian3.distance(lineEnd, pointToCheck)
const dist_AB = Cartesian3.distance(lineStart, lineEnd)
const isCollinear = Math.abs(dist_AP + dist_BP - dist_AB) < tolerance
return isCollinear
/*
const startToEnd = new Cartesian3()
const startToPoint = new Cartesian3()
const endToPoint = new Cartesian3()
// 计算向量
Cartesian3.subtract(lineEnd, lineStart, startToEnd)
Cartesian3.subtract(pointToCheck, lineStart, startToPoint)
Cartesian3.subtract(pointToCheck, lineEnd, endToPoint)
// 判断共线
const cross = Cartesian3.cross(startToEnd, startToPoint, new Cartesian3())
console.log('cross:' + Cartesian3.magnitude(cross).toString())
// Math.EPSILON6 是一个非常小的值，用来防止浮点数计算的误差
const isCollinear = Cartesian3.magnitude(cross) < tolerance
// 判断点是否在线段之间
let isBetween = false
if (isCollinear) {
const dotProduct1 = Cartesian3.dot(startToEnd, startToPoint)
const dotProduct2 = Cartesian3.dot(startToEnd, endToPoint)
isBetween = dotProduct1 >= 0 && dotProduct2 <= 0
}
return isBetween
*/
}
/**
* 计算距离，单位米
* @param p1 起点
* @param p2 终点
*/
function getDistance(p1: Cartesian3, p2: Cartesian3): number {
let point1cartographic = Cartographic.fromCartesian(p1)
let point2cartographic = Cartographic.fromCartesian(p2)
/**根据经纬度计算出距离**/
let geodesic = new EllipsoidGeodesic()
geodesic.setEndPoints(point1cartographic, point2cartographic)
return geodesic.surfaceDistance / 1000
}
/**
* 计算方位角，单位度
* @param p1 起点
* @param p2 终点
* @param digits 保留小数位数，默认为保留1位小数
*/
function getAzimuth(p1: Cartesian3, p2: Cartesian3, digits = 1): string {
// 建立局部坐标系：北为y，东为x，p1为原点
const localMatrix = Transforms.eastNorthUpToFixedFrame(p1)
//求世界坐标到局部坐标的变换矩阵
const worldToLocalMatrix = Matrix4.inverse(localMatrix, new Matrix4())
//p1在局部坐标系的位置，即局部坐标原点
const localPosition1 = Matrix4.multiplyByPoint(
worldToLocalMatrix,
p1,
new Cartesian3(),
)
//p2在局部坐标系的位置
const localPosition2 = Matrix4.multiplyByPoint(
worldToLocalMatrix,
p2,
new Cartesian3(),
)
//弧度
const angle = Math.atan2(
localPosition2.x - localPosition1.x,
localPosition2.y - localPosition1.y,
)
//转为角度
let theta = angle * (180 / Math.PI)
theta = theta < 0 ? theta + 360 : theta
return theta.toFixed(digits)
}
/**
* 计算多边形面积，单位平方米
* @param vertexs 多边形顶点数组
*/
function getPolygonArea(vertexs: Cartesian3[]) {
let area = 0
for (let i = 0; i < vertexs.length; i++) {
let j = (i + 1) % vertexs.length
area += vertexs[i].x * vertexs[j].y
area -= vertexs[i].y * vertexs[j].x
}
area /= 2
return Math.abs(area)
}
export {
getClosestPoint,
isOnLineSegment,
getDistance,
getAzimuth,
getPolygonArea,
}

252
src/utils/map/geometry/baseGeometry.ts
Unescape Escape View File

@ -1,109 +1,143 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 16:22:58
* @LastEditors: cbwu
* @LastEditTime: 2024-04-02 14:09:15
* @Description: 几何类抽象基类
*/
import {
// EntityCollection,
Entity,
Cartesian3,
Color,
ConstantPositionProperty,
CustomDataSource,
} from 'cesium'
import { PointEntity, EntityOptions } from './pointEntity'
export abstract class BaseGeometry extends CustomDataSource {
static ID: number
// abstract subId: number
geometry: Entity | null = null
positions: Cartesian3[] = []
controlPointsID: string[] = [] //存储
options: EntityOptions = {
// id: 'Point' + String(PointEntity.ID),
// name: 'Point' + String(PointEntity.ID + 1),
show: true,
// pixelSize: 10,
width: 2,
color: Color.GREEN,
outlineWidth: 0,
}
constructor() {
super()
}
/**
* 新增一个节点,默认插入在尾部，
* @param pos 点坐标
* @param index 插入的位置，0起步
*/
public addPoint(pos: Cartesian3, index: number = -1) {
if (index === -1) {
//插入尾部
this.positions.push(pos)
// console.log(this.positions.length)
this.createPoint(pos, this.positions.length - 1)
} else if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 0, pos)
this.createPoint(pos, index)
} else {
return
}
}
/**
* 移除点
* @param index 移除点的位置
* @returns
*/
public removePoint(index: number = -1) {
if (index === -1 || index === this.positions.length - 1) {
//移除尾部元素
this.positions.pop()
} else if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 1)
this.entities.removeById(this.controlPointsID[index])
this.controlPointsID.splice(index, 1)
} else {
return
}
}
/**
* 修改某点的坐标
* @param pos 修改点的坐标
* @param index 修改点的位置
*/
public modifyPoint(pos: Cartesian3, index: number) {
if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 1, pos)
//修改控制点坐标
const point = this.entities.getById(this.controlPointsID[index])
if (point) {
point.position = new ConstantPositionProperty(pos)
}
}
}
/**
* 新加一个点
* @param pos 点的坐标
* @param index 插入的位置,0起步
*/
createPoint(pos: Cartesian3, index: number) {
// if (this.geometry) {
const point = new PointEntity(pos)
point.parent = this.geometry!
point.subId = index
this.entities.add(point)
this.controlPointsID.splice(index, 0, point.id)
// }
}
/**
* 清空所有控制点
*/
removeControlPoints() {
this.controlPointsID.forEach((value) => {
this.entities.removeById(value)
})
this.controlPointsID = []
}
}
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 16:22:58
* @LastEditors: cbwu
* @LastEditTime: 2024-04-13 10:45:37
* @Description: 几何类抽象基类
*/
import {
// EntityCollection,
Entity,
Cartesian3,
Color,
ConstantPositionProperty,
CustomDataSource,
} from 'cesium'
import { PointEntity } from './pointEntity'
import { EntityOptions } from '@/types/entityoptions'
export abstract class BaseGeometry extends CustomDataSource {
static ID: number
// abstract subId: number
geometry: Entity | null = null
positions: Cartesian3[] = []
controlPointsID: string[] = [] //存储
options: EntityOptions = {
// id: 'Point' + String(PointEntity.ID),
// name: 'Point' + String(PointEntity.ID + 1),
show: true,
// pixelSize: 10,
width: 2,
color: Color.GREEN,
outlineWidth: 0,
}
constructor() {
super()
}
/**
* 新增一个节点,默认插入在尾部，
* @param pos 点坐标
* @param index 插入的位置，0起步
* @bAddControlPoint 是否添加控制点
*/
public addPoint(
pos: Cartesian3,
index: number = -1,
bAddControlPoint: boolean = true,
) {
if (index === -1) {
//插入尾部
this.positions.push(pos)
if (bAddControlPoint)
this.createControlPoint(pos, this.positions.length - 1)
} else if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 0, pos)
if (bAddControlPoint) this.createControlPoint(pos, index)
} else {
return
}
}
/**
* 移除点
* @param index 移除点的位置
* @returns
*/
public removePoint(index: number = -1) {
if (index === -1 || index === this.positions.length - 1) {
//移除尾部元素
this.positions.pop()
} else if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 1)
} else {
return
}
//移除控制点
this.removeControlPoint(index)
}
/**
* 修改某点的坐标
* @param pos 修改点的坐标
* @param index 修改点的位置
*/
public modifyPoint(pos: Cartesian3, index: number) {
if (index === -1) {
index = this.positions.length - 1
}
if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 1, pos)
if (this.controlPointsID[index]) {
//修改控制点坐标
const point = this.entities.getById(this.controlPointsID[index])
if (point) {
point.position = new ConstantPositionProperty(pos)
}
}
}
}
/**
* 新加一个点
* @param pos 点的坐标
* @param index 插入的位置,0起步
*/
public createControlPoint(pos: Cartesian3, index: number) {
// if (this.geometry) {
const point = new PointEntity(pos)
point.parent = this.geometry!
point.subId = index
this.entities.add(point)
this.controlPointsID.splice(index, 0, point.id)
// }
}
/**
* 移除控制点
* @param index 控制点下标号
*/
public removeControlPoint(index: number) {
if (index === -1) index = this.controlPointsID.length - 1
if (this.controlPointsID[index]) {
this.entities.removeById(this.controlPointsID[index])
this.controlPointsID.splice(index, 1)
}
}
/**
* 清空所有控制点
*/
removeControlPoints() {
this.controlPointsID.forEach((value) => {
this.entities.removeById(value)
})
this.controlPointsID = []
}
/**
* 设置控制点是否显示
* @param index 控制点下标号
* @param bShow 是否显示
*/
showControlPoint(index: number, bShow: boolean) {
if (index === -1) index = this.controlPointsID.length - 1
if (this.controlPointsID[index]) {
const point = this.entities.getById(this.controlPointsID[index])
if (point) point.show = bShow
}
}
}

72
src/utils/map/geometry/billboard.ts
Unescape Escape View File

@ -1,36 +1,36 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-04-10 08:53:12
* @LastEditors: cbwu
* @LastEditTime: 2024-04-11 09:09:38
* @Description: 广告牌对象
*/
import { Entity, Cartesian3, Cartesian2, Color, HeightReference } from 'cesium'
import { getMapAssetsFile } from '@/utils/getAssets'
export class BillBoard extends Entity {
static ID: number = 0
public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
constructor(position: Cartesian3) {
super({
position: position,
billboard: {
show: true,
image: getMapAssetsFile('marker.svg'),
width: 32,
height: 32,
scale: 1,
// 设置实体贴地
heightReference: HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 可能会提高在不同角度下的清晰度
},
label: {
text: 'Maker1',
font: '32px sans-serif',
scale: 0.5,
pixelOffset: new Cartesian2(45, -5),
heightReference: HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 可能会提高在不同角度下的清晰度
},
})
}
}
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-04-10 08:53:12
* @LastEditors: cbwu
* @LastEditTime: 2024-04-13 10:45:00
* @Description: 广告牌对象
*/
import { Entity, Cartesian3, Cartesian2, HeightReference } from 'cesium'
import { getMapAssetsFile } from '@/utils/getAssets'
export class BillBoard extends Entity {
static ID: number = 0
public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
constructor(position: Cartesian3) {
super({
position: position,
billboard: {
show: true,
image: getMapAssetsFile('marker.svg'),
width: 32,
height: 32,
scale: 1,
// 设置实体贴地
heightReference: HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 可能会提高在不同角度下的清晰度
},
label: {
text: 'Maker1',
font: '32px sans-serif',
scale: 0.5,
pixelOffset: new Cartesian2(45, -5),
heightReference: HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 可能会提高在不同角度下的清晰度
},
})
}
}

115
src/utils/map/geometry/pointEntity.ts
Unescape Escape View File

@ -1,69 +1,46 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 16:35:33
* @LastEditors: cbwu
* @LastEditTime: 2024-03-30 22:06:23
* @Description: 封装的点几何类
*/
import {
Entity,
Cartesian3,
Color,
PointGraphics,
PositionProperty,
LabelGraphics,
Cartesian2,
CallbackProperty,
Property,
} from 'cesium'
type 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
}
// 点
class PointEntity extends Entity {
static ID: number = 0
public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
options: EntityOptions = {
id: 'Point' + String(PointEntity.ID),
name: 'Point' + String(PointEntity.ID + 1),
show: true,
pixelSize: 10,
color: Color.GREEN,
outlineWidth: 0,
}
constructor(position: Cartesian3, options?: EntityOptions) {
super({
position: position,
})
this.options = { ...this.options, ...options }
//点对象
this.point = new PointGraphics({
pixelSize: this.options.pixelSize,
color: this.options.color,
outlineColor: this.options.outlineColor,
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 }
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 16:35:33
* @LastEditors: cbwu
* @LastEditTime: 2024-04-13 11:15:48
* @Description: 封装的点几何类
*/
import { Entity, Cartesian3, Color, PointGraphics, LabelGraphics } from 'cesium'
import { EntityOptions } from '@/types/entityoptions'
// 点
class PointEntity extends Entity {
static ID: number = 0
public subId: number = 0 //用于作为其他几何体的控制点时标记节点号
options: EntityOptions = {
id: 'Point' + String(PointEntity.ID),
name: 'Point' + String(PointEntity.ID + 1),
show: true,
pixelSize: 8,
color: Color.WHITE,
outlineColor: Color.GREEN,
outlineWidth: 0,
}
constructor(position: Cartesian3, options?: EntityOptions) {
super({
position: position,
})
this.options = { ...this.options, ...options }
//点对象
this.point = new PointGraphics({
pixelSize: this.options.pixelSize,
color: this.options.color,
outlineColor: this.options.outlineColor,
outlineWidth: this.options.outlineWidth,
})
// 标注对象
this.label = new LabelGraphics({
text: this.options.text,
font: this.options.font,
pixelOffset: this.options.pixelOffset,
})
PointEntity.ID++
}
}
export { PointEntity }

56
src/utils/map/geometry/polygonEntity.ts
Unescape Escape View File

@ -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++
}
}

96
src/utils/map/geometry/polylineEntity.ts
Unescape Escape View File

@ -1,48 +1,48 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 16:49:02
* @LastEditors: cbwu
* @LastEditTime: 2024-04-01 17:04:55
* @Description: 封装的Polyline类
*/
import { Entity, Cartesian3, Color, CallbackProperty } from 'cesium'
import { BaseGeometry } from './baseGeometry'
import { type EntityOptions } from './pointEntity'
export class PolylineEntity extends BaseGeometry {
static ID: number = 0
// positions: Cartesian3[] = []
controlPointsID: string[] = []
options: EntityOptions = {
// id: 'Polyline' + String(PolylineEntity.ID),
name: 'Polyline' + String(PolylineEntity.ID + 1),
show: true,
width: 3,
color: Color.GREEN,
}
constructor(ptArr: Cartesian3[], options?: EntityOptions) {
super()
this.options = { ...this.options, ...options }
// console.log(this.options)
this.positions = ptArr
// console.log(this.positions)
// 创建线实体对象
this.geometry = new Entity({
name: this.options.name,
polyline: {
positions: new CallbackProperty(() => {
return this.positions
}, false),
show: this.options.show,
width: this.options.width,
material: this.options.color,
},
})
this.entities.add(this.geometry)
// 添加控制点
ptArr.forEach((pt, index) => {
this.createPoint(pt, index)
})
PolylineEntity.ID++
}
}
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 16:49:02
* @LastEditors: cbwu
* @LastEditTime: 2024-04-13 10:45:17
* @Description: 封装的Polyline类
*/
import { Entity, Cartesian3, Color, CallbackProperty } from 'cesium'
import { BaseGeometry } from './baseGeometry'
import { EntityOptions } from '@/types/entityoptions'
export class PolylineEntity extends BaseGeometry {
static ID: number = 0
// positions: Cartesian3[] = []
controlPointsID: string[] = []
options: EntityOptions = {
// id: 'Polyline' + String(PolylineEntity.ID),
name: 'Polyline' + String(PolylineEntity.ID + 1),
show: true,
width: 3,
color: Color.GREEN,
}
constructor(ptArr: Cartesian3[], options?: EntityOptions) {
super()
this.options = { ...this.options, ...options }
// console.log(this.options)
this.positions = ptArr
// console.log(this.positions)
// 创建线实体对象
this.geometry = new Entity({
name: this.options.name,
polyline: {
positions: new CallbackProperty(() => {
return this.positions
}, false),
show: this.options.show,
width: this.options.width,
material: this.options.color,
},
})
this.entities.add(this.geometry)
// 添加控制点
ptArr.forEach((pt, index) => {
this.createControlPoint(pt, index)
})
PolylineEntity.ID++
}
}

226
src/utils/map/sceneViewer.ts
Unescape Escape View File

@ -1,113 +1,113 @@
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-13 09:32:21
* @LastEditors: cbwu
* @LastEditTime: 2024-04-10 14:02:37
* @Description:
*/
// Viewer初始化
import {
Viewer,
TileMapServiceImageryProvider,
ScreenSpaceEventType,
ImageryLayer,
RequestScheduler,
SceneMode,
Rectangle,
buildModuleUrl,
} from 'cesium'
import CesiumNavigation from 'cesium-navigation-es6'
//离线地球底图
const earth_native = TileMapServiceImageryProvider.fromUrl(
// 'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII',
buildModuleUrl('Assets/Textures/NaturalEarthII'),
)
/**
* Viewer初始化
* @param container :id或HTML对象
* @returns :viewer对象
*/
function initViewer(container: string | Element): Viewer {
//未联网状态加载默认本地底图，保证地球有底图显示
const viewer = new Viewer(container as HTMLElement, {
infoBox: false, //是否显示点击要素之后显示的信息
homeButton: false, //是否显示Home按钮
navigationHelpButton: false, //是否显示帮助信息控件
timeline: false, //是否显示时间线控件
animation: false, //是否显示动画控件
sceneModePicker: true, //是否显示投影方式控件
sceneMode: SceneMode.SCENE3D, //设置场景模式，3D球体
// terrain: Cesium.Terrain.fromWorldTerrain(),
baseLayerPicker: false, //是否显示图层选择控件
requestRenderMode: true, //启用请求渲染模式
scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
fullscreenButton: false, //右下角 全屏控件
orderIndependentTranslucency: false,
contextOptions: { webgl: { alpha: true } },
maximumRenderTimeChange: Infinity, // 无操作时自动渲染帧率，设为数字会消耗性能，Infinity为无操作不渲染
// mapProjection: new Cesium.WebMercatorProjection(),
baseLayer: ImageryLayer.fromProviderAsync(earth_native, {}),
})
//去除cesium logo，隐藏版本信息
const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement
creditContainer.style.display = 'none'
// 开启深度检测
viewer.scene.globe.depthTestAgainstTerrain = false
// 水雾特效
viewer.scene.globe.showGroundAtmosphere = true
// 设置更高的缩放惯性以使缩放操作更平滑
viewer.scene.screenSpaceCameraController.inertiaZoom = 0.9
// 限制相机缩放
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200 //相机的高度的最小值
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 10350000 //相机高度的最大值
// 设置设备像素比，可能会影响渲染性能
// viewer.resolutionScale = window.devicePixelRatio
// 视图重绘后确保清晰度
viewer.scene.preRender.addEventListener(function () {
if (viewer.resolutionScale !== window.devicePixelRatio) {
viewer.resolutionScale = window.devicePixelRatio
}
})
// 去掉entity的点击事件（双击、单击）
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
)
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
ScreenSpaceEventType.LEFT_CLICK,
)
return viewer
}
/**
* 性能优化
* @param viewer :场景Viewer
*/
function perfViewer(viewer: Viewer) {
// 抗锯齿
// 是否支持图像渲染像素化处理
// if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
// viewer.resolutionScale = window.devicePixelRatio
// }
viewer.scene.postProcessStages.fxaa.enabled = true
// 关闭太阳，月亮，天空盒，雾等相关特效
viewer.scene.moon.show = false
viewer.scene.fog.enabled = false
viewer.scene.sun.show = false
viewer.scene.skyBox.show = false
// 优化加载WMTS图层速度
RequestScheduler.maximumRequestsPerServer = 18 // 设置cesium请求调度器的最大并发数量
RequestScheduler.throttleRequests = false //关闭请求调度器的请求节流
}
function showNavigator(viewer: Viewer) {
const options: any = {}
// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle
options.defaultResetView = Rectangle.fromDegrees(80, 22, 130, 50)
options.enableCompass = true //罗盘组件 true启用，false禁用
options.enableCompassOuterRing = true //罗盘外环组件 true启用，false禁用
options.enableZoomControls = true //缩放组件 true启用，false禁用
options.enableDistanceLegend = true //比例尺组件 true启用，false禁用
new CesiumNavigation(viewer, options)
}
export { initViewer, perfViewer, showNavigator }
/*
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-13 09:32:21
* @LastEditors: cbwu
* @LastEditTime: 2024-04-13 10:49:06
* @Description:
*/
// Viewer初始化
import {
Viewer,
TileMapServiceImageryProvider,
ScreenSpaceEventType,
ImageryLayer,
RequestScheduler,
SceneMode,
Rectangle,
buildModuleUrl,
} from 'cesium'
import CesiumNavigation from 'cesium-navigation-es6'
//离线地球底图
const earth_native = TileMapServiceImageryProvider.fromUrl(
// 'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII',
buildModuleUrl('Assets/Textures/NaturalEarthII'),
)
/**
* Viewer初始化
* @param container :id或HTML对象
* @returns :viewer对象
*/
function initViewer(container: string | Element): Viewer {
//未联网状态加载默认本地底图，保证地球有底图显示
const viewer = new Viewer(container as HTMLElement, {
infoBox: false, //是否显示点击要素之后显示的信息
homeButton: false, //是否显示Home按钮
navigationHelpButton: false, //是否显示帮助信息控件
timeline: false, //是否显示时间线控件
animation: false, //是否显示动画控件
sceneModePicker: true, //是否显示投影方式控件
sceneMode: SceneMode.SCENE3D, //设置场景模式，3D球体
// terrain: Cesium.Terrain.fromWorldTerrain(),
baseLayerPicker: false, //是否显示图层选择控件
requestRenderMode: true, //启用请求渲染模式
scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
fullscreenButton: false, //右下角 全屏控件
orderIndependentTranslucency: false,
contextOptions: { webgl: { alpha: true } },
maximumRenderTimeChange: Infinity, // 无操作时自动渲染帧率，设为数字会消耗性能，Infinity为无操作不渲染
// mapProjection: new Cesium.WebMercatorProjection(),
baseLayer: ImageryLayer.fromProviderAsync(earth_native, {}),
})
//去除cesium logo，隐藏版本信息
const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement
creditContainer.style.display = 'none'
// 开启深度检测
viewer.scene.globe.depthTestAgainstTerrain = false
// 水雾特效
viewer.scene.globe.showGroundAtmosphere = true
// 设置更高的缩放惯性以使缩放操作更平滑
viewer.scene.screenSpaceCameraController.inertiaZoom = 0.9
// 限制相机缩放
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200 //相机的高度的最小值
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 10350000 //相机高度的最大值
// 设置设备像素比，可能会影响渲染性能
// viewer.resolutionScale = window.devicePixelRatio
// 视图重绘后确保清晰度
viewer.scene.preRender.addEventListener(function () {
if (viewer.resolutionScale !== window.devicePixelRatio) {
viewer.resolutionScale = window.devicePixelRatio
}
})
// 去掉entity的点击事件（双击、单击）
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
)
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
ScreenSpaceEventType.LEFT_CLICK,
)
return viewer
}
/**
* 性能优化
* @param viewer :场景Viewer
*/
function perfViewer(viewer: Viewer) {
// 抗锯齿
// 是否支持图像渲染像素化处理
// if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
// viewer.resolutionScale = window.devicePixelRatio
// }
viewer.scene.postProcessStages.fxaa.enabled = true
// 关闭太阳，月亮，天空盒，雾等相关特效
viewer.scene.moon.show = false
viewer.scene.fog.enabled = false
viewer.scene.sun.show = false
viewer.scene.skyBox.show = false
// 优化加载WMTS图层速度
RequestScheduler.maximumRequestsPerServer = 18 // 设置cesium请求调度器的最大并发数量
RequestScheduler.throttleRequests = false //关闭请求调度器的请求节流
}
function showNavigator(viewer: Viewer) {
const options: any = {}
// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle
options.defaultResetView = Rectangle.fromDegrees(80, 22, 130, 50)
options.enableCompass = true //罗盘组件 true启用，false禁用
options.enableCompassOuterRing = true //罗盘外环组件 true启用，false禁用
options.enableZoomControls = true //缩放组件 true启用，false禁用
options.enableDistanceLegend = true //比例尺组件 true启用，false禁用
new CesiumNavigation(viewer, options)
}
export { initViewer, perfViewer, showNavigator }

Write Preview
Loading…
Cancel
Save