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 = { module.exports = {
env: { env: {
browser: true, browser: true,
@ -63,5 +70,6 @@ module.exports = {
semi: false, semi: false,
}, },
], ],
'linebreak-style': [0, 'error', 'windows'], //取消对LF和CRLF的检查
}, },
} }

18
.prettierrc.json
Unescape Escape View File

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

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

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

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

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

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

@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com * @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-07 16:04:55 * @Date: 2024-03-07 16:04:55
* @LastEditors: cbwu * @LastEditors: cbwu
* @LastEditTime: 2024-04-02 14:01:22 * @LastEditTime: 2024-04-15 16:06:06
* @Description: * @Description:
*/ */
// 天地图影像服务 // 天地图影像服务
@ -29,6 +29,7 @@ enum TDTProjectionType {
} }
//天地图token //天地图token
const TDT_tk = '1c5b7cbf9da7d33b221f68c32b6a1791' const TDT_tk = '1c5b7cbf9da7d33b221f68c32b6a1791'
const TDT_tk3D = '910a4befdfd04d5423268b0aced82248'
// 服务域名 // 服务域名
const tdtUrl = 'https://t{s}.tianditu.gov.cn' const tdtUrl = 'https://t{s}.tianditu.gov.cn'
// 服务负载子域 // 服务负载子域
@ -54,7 +55,7 @@ export function getTDTProvider(
: new WebMercatorTilingScheme() : new WebMercatorTilingScheme()
const tileMatrixLabels = const tileMatrixLabels =
projectionType == TDTProjectionType.WGS84 projectionType == TDTProjectionType.WGS84
? new Array(19).fill(1).map((v, i) => `${i}`) ? new Array(19).fill(1).map((v, i) => `${i + 1}`)
: undefined : undefined
const imageryProvider = new WebMapTileServiceImageryProvider({ const imageryProvider = new WebMapTileServiceImageryProvider({
//影像底图 //影像底图
@ -84,7 +85,7 @@ export function getTDTTerrainProvider() {
const url = const url =
tdtUrl.replace('{s}', subdomains[i]) + tdtUrl.replace('{s}', subdomains[i]) +
'/mapservice/swdx?T=elv_c&tk=' + '/mapservice/swdx?T=elv_c&tk=' +
TDT_tk TDT_tk3D
terrainUrls.push(url) 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 { getAzimuth } from '@/utils/map/geocomputation.ts'
import {Cartesian3} from "cesium"; import { Cartesian3 } from 'cesium'
class Angle { class Angle {
constructor() {} constructor() {}
/** /**
* 十进制经纬度转度分秒，精确至毫秒 * 十进制经纬度转度分秒，精确至毫秒
* @param decimal_var 十进制经纬度 * @param decimal_var 十进制经纬度
* @constructor * @constructor
*/ */
static DecimalDegree2DMS(decimal_var: number|string){ static DecimalDegree2DMS(decimal_var: number | string) {
if(!decimal_var.toString().includes('.')) if (!decimal_var.toString().includes('.'))
return decimal_var.toString() + '°0\'0\'\'' return decimal_var.toString() + "°0'0''"
let decimalStr = decimal_var.toString().split('.') let decimalStr = decimal_var.toString().split('.')
let degreeStr = decimalStr[0] let degreeStr = decimalStr[0]
if (decimalStr[1]){ if (decimalStr[1]) {
let minutes = Number(decimalStr[1]) / Math.pow(10,decimalStr[1].length) * 60 let minutes =
if(!minutes.toString().includes('.')) (Number(decimalStr[1]) / Math.pow(10, decimalStr[1].length)) * 60
return degreeStr + '°'+ minutes.toString() +'\'0\'\'' if (!minutes.toString().includes('.'))
let minuteSecondsStr = minutes.toString().split('.') return degreeStr + '°' + minutes.toString() + "'0''"
if (minuteSecondsStr[1]){ let minuteSecondsStr = minutes.toString().split('.')
let secondStr = Number(minuteSecondsStr[1]) / Math.pow(10,minuteSecondsStr[1].length) * 60 if (minuteSecondsStr[1]) {
return degreeStr + '°'+ minuteSecondsStr[0] +'\'' + secondStr.toFixed(3) + '\'\'' let secondStr =
} (Number(minuteSecondsStr[1]) /
} Math.pow(10, minuteSecondsStr[1].length)) *
return '' 60
return (
degreeStr +
'°' +
minuteSecondsStr[0] +
"'" +
secondStr.toFixed(3) +
"''"
)
}
} }
return ''
}
/** /**
* 计算方位角，单位度 * 计算方位角，单位度
* @param p1 起点 * @param p1 起点
* @param p2 终点 * @param p2 终点
* @param digits 保留小数位数，默认保留1位小数 * @param digits 保留小数位数，默认保留1位小数
*/ */
static getAzimuth(p1: Cartesian3, p2: Cartesian3, digits=1){ static getAzimuth(p1: Cartesian3, p2: Cartesian3, digits = 1) {
return getAzimuth(p1, p2, digits) 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 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 } export { Angle }

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

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

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

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

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

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

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 * @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-02 13:33:25 * @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,
}, },
}) })
} }
} }

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

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

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 * @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-03-26 14:20:32 * @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 }

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

@ -1,142 +1,163 @@
/* /*
* @Author: cbwu 504-wuchengbo@htsdfp.com * @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-22 15:42:49 * @Date: 2024-03-22 15:42:49
* @LastEditors: cbwu * @LastEditors: cbwu
* @LastEditTime: 2024-04-01 14:05:43 * @LastEditTime: 2024-04-13 10:49:17
* @Description: 地理计算 * @Description: 地理计算
*/ */
import {Cartesian3, Cartographic, EllipsoidGeodesic, Math as Cesium_Math, Matrix4, Transforms} from 'cesium' import {
/** Cartesian3,
* 计算空间中一点到一条直线的最短距离的交点（在不考虑地球曲率的情况下） Cartographic,
* @param lineStart 直线的起点：[longitude1, latitude1, height1] EllipsoidGeodesic,
* @param lineEnd 直线的终点:[longitude2, latitude2, height2] Math as Cesium_Math,
* @param point 空间中的点:[[longitude3, latitude3, height3]] Matrix4,
* @returns 最近的交点 Transforms,
*/ } from 'cesium'
function getClosestPoint( /**
lineStart: Cartesian3, * 计算空间中一点到一条直线的最短距离的交点（在不考虑地球曲率的情况下）
lineEnd: Cartesian3, * @param lineStart 直线的起点：[longitude1, latitude1, height1]
point: Cartesian3, * @param lineEnd 直线的终点:[longitude2, latitude2, height2]
): Cartesian3 { * @param point 空间中的点:[[longitude3, latitude3, height3]]
// 计算直线方向向量 * @returns 最近的交点
const lineDirection = new Cartesian3() */
Cartesian3.subtract(lineEnd, lineStart, lineDirection) function getClosestPoint(
Cartesian3.normalize(lineDirection, lineDirection) lineStart: Cartesian3,
lineEnd: Cartesian3,
// 计算点到直线起点的向量 point: Cartesian3,
const pointToStart = new Cartesian3() ): Cartesian3 {
Cartesian3.subtract(point, lineStart, pointToStart) // 计算直线方向向量
const lineDirection = new Cartesian3()
// 计算投影长度，即点到直线的向量在直线方向向量上的分量长度 Cartesian3.subtract(lineEnd, lineStart, lineDirection)
const projectionLength = Cartesian3.dot(pointToStart, lineDirection) Cartesian3.normalize(lineDirection, lineDirection)
// 使用标量乘法和向量加法确定交点 // 计算点到直线起点的向量
const closestPoint = new Cartesian3() const pointToStart = new Cartesian3()
Cartesian3.multiplyByScalar(lineDirection, projectionLength, closestPoint) Cartesian3.subtract(point, lineStart, pointToStart)
Cartesian3.add(lineStart, closestPoint, closestPoint)
return closestPoint // 计算投影长度，即点到直线的向量在直线方向向量上的分量长度
} const projectionLength = Cartesian3.dot(pointToStart, lineDirection)
/** // 使用标量乘法和向量加法确定交点
* 判断一个点是否在直线上（在不考虑地球曲率的情况下） const closestPoint = new Cartesian3()
* @param lineStart 直线的起点：[longitude1, latitude1, height1] Cartesian3.multiplyByScalar(lineDirection, projectionLength, closestPoint)
* @param lineEnd 直线的起点：[longitude2, latitude2, height2] Cartesian3.add(lineStart, closestPoint, closestPoint)
* @param pointToCheck 直线的起点：[longitude3, latitude3, height3] return closestPoint
* @param tolerance 容差 }
* @returns 是否在线段上
*/ /**
function isOnLineSegment( * 判断一个点是否在直线上（在不考虑地球曲率的情况下）
lineStart: Cartesian3, * @param lineStart 直线的起点：[longitude1, latitude1, height1]
lineEnd: Cartesian3, * @param lineEnd 直线的起点：[longitude2, latitude2, height2]
pointToCheck: Cartesian3, * @param pointToCheck 直线的起点：[longitude3, latitude3, height3]
tolerance: number = Cesium_Math.EPSILON1, * @param tolerance 容差
): boolean { * @returns 是否在线段上
const dist_AP = Cartesian3.distance(lineStart, pointToCheck) */
const dist_BP = Cartesian3.distance(lineEnd, pointToCheck) function isOnLineSegment(
const dist_AB = Cartesian3.distance(lineStart, lineEnd) lineStart: Cartesian3,
lineEnd: Cartesian3,
const isCollinear = Math.abs(dist_AP + dist_BP - dist_AB) < tolerance pointToCheck: Cartesian3,
return isCollinear tolerance: number = Cesium_Math.EPSILON1,
/* ): boolean {
const startToEnd = new Cartesian3() const dist_AP = Cartesian3.distance(lineStart, pointToCheck)
const startToPoint = new Cartesian3() const dist_BP = Cartesian3.distance(lineEnd, pointToCheck)
const endToPoint = new Cartesian3() const dist_AB = Cartesian3.distance(lineStart, lineEnd)
// 计算向量 const isCollinear = Math.abs(dist_AP + dist_BP - dist_AB) < tolerance
Cartesian3.subtract(lineEnd, lineStart, startToEnd) return isCollinear
Cartesian3.subtract(pointToCheck, lineStart, startToPoint) /*
Cartesian3.subtract(pointToCheck, lineEnd, endToPoint) const startToEnd = new Cartesian3()
const startToPoint = new Cartesian3()
// 判断共线 const endToPoint = new Cartesian3()
const cross = Cartesian3.cross(startToEnd, startToPoint, new Cartesian3())
console.log('cross:' + Cartesian3.magnitude(cross).toString()) // 计算向量
// Math.EPSILON6 是一个非常小的值，用来防止浮点数计算的误差 Cartesian3.subtract(lineEnd, lineStart, startToEnd)
const isCollinear = Cartesian3.magnitude(cross) < tolerance Cartesian3.subtract(pointToCheck, lineStart, startToPoint)
Cartesian3.subtract(pointToCheck, lineEnd, endToPoint)
// 判断点是否在线段之间
let isBetween = false // 判断共线
if (isCollinear) { const cross = Cartesian3.cross(startToEnd, startToPoint, new Cartesian3())
const dotProduct1 = Cartesian3.dot(startToEnd, startToPoint) console.log('cross:' + Cartesian3.magnitude(cross).toString())
const dotProduct2 = Cartesian3.dot(startToEnd, endToPoint) // Math.EPSILON6 是一个非常小的值，用来防止浮点数计算的误差
isBetween = dotProduct1 >= 0 && dotProduct2 <= 0 const isCollinear = Cartesian3.magnitude(cross) < tolerance
}
return isBetween // 判断点是否在线段之间
*/ let isBetween = false
} if (isCollinear) {
const dotProduct1 = Cartesian3.dot(startToEnd, startToPoint)
const dotProduct2 = Cartesian3.dot(startToEnd, endToPoint)
/** isBetween = dotProduct1 >= 0 && dotProduct2 <= 0
* 计算距离，单位米 }
* @param p1 起点 return isBetween
* @param p2 终点 */
*/ }
function getDistance(p1:Cartesian3, p2: Cartesian3): number
{ /**
let point1cartographic = Cartographic.fromCartesian(p1); * 计算距离，单位米
let point2cartographic = Cartographic.fromCartesian(p2); * @param p1 起点
/**根据经纬度计算出距离**/ * @param p2 终点
let geodesic = new EllipsoidGeodesic() */
geodesic.setEndPoints(point1cartographic, point2cartographic) function getDistance(p1: Cartesian3, p2: Cartesian3): number {
return geodesic.surfaceDistance/1000 let point1cartographic = Cartographic.fromCartesian(p1)
} let point2cartographic = Cartographic.fromCartesian(p2)
/**根据经纬度计算出距离**/
/** let geodesic = new EllipsoidGeodesic()
* 计算方位角，单位度 geodesic.setEndPoints(point1cartographic, point2cartographic)
* @param p1 起点 return geodesic.surfaceDistance / 1000
* @param p2 终点 }
* @param digits 保留小数位数，默认为保留1位小数
*/ /**
function getAzimuth(p1:Cartesian3, p2: Cartesian3, digits=1): string * 计算方位角，单位度
{ * @param p1 起点
// 建立局部坐标系：北为y，东为x，p1为原点 * @param p2 终点
const localMatrix = Transforms.eastNorthUpToFixedFrame(p1) * @param digits 保留小数位数，默认为保留1位小数
//求世界坐标到局部坐标的变换矩阵 */
const worldToLocalMatrix = Matrix4.inverse(localMatrix, new Matrix4()) function getAzimuth(p1: Cartesian3, p2: Cartesian3, digits = 1): string {
//p1在局部坐标系的位置，即局部坐标原点 // 建立局部坐标系：北为y，东为x，p1为原点
const localPosition1 = Matrix4.multiplyByPoint(worldToLocalMatrix, p1, new Cartesian3()) const localMatrix = Transforms.eastNorthUpToFixedFrame(p1)
//p2在局部坐标系的位置 //求世界坐标到局部坐标的变换矩阵
const localPosition2 = Matrix4.multiplyByPoint(worldToLocalMatrix, p2, new Cartesian3()) const worldToLocalMatrix = Matrix4.inverse(localMatrix, new Matrix4())
//弧度 //p1在局部坐标系的位置，即局部坐标原点
const angle = Math.atan2(localPosition2.x - localPosition1.x, localPosition2.y - localPosition1.y) const localPosition1 = Matrix4.multiplyByPoint(
//转为角度 worldToLocalMatrix,
let theta = angle * (180 / Math.PI); p1,
theta = theta < 0 ? theta + 360 : theta new Cartesian3(),
return theta.toFixed(digits) )
} //p2在局部坐标系的位置
const localPosition2 = Matrix4.multiplyByPoint(
/** worldToLocalMatrix,
* 计算多边形面积，单位平方米 p2,
* @param vertexs 多边形顶点数组 new Cartesian3(),
*/ )
function getPolygonArea(vertexs: Cartesian3[]) { //弧度
let area = 0 const angle = Math.atan2(
for (let i = 0; i < vertexs.length; i++) { localPosition2.x - localPosition1.x,
let j = (i + 1) % vertexs.length localPosition2.y - localPosition1.y,
area += vertexs[i].x * vertexs[j].y )
area -= vertexs[i].y * vertexs[j].x //转为角度
} let theta = angle * (180 / Math.PI)
area /= 2 theta = theta < 0 ? theta + 360 : theta
return Math.abs(area) return theta.toFixed(digits)
} }
export { getClosestPoint, isOnLineSegment, getDistance, getAzimuth, getPolygonArea } /**
* 计算多边形面积，单位平方米
* @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 * @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 16:22:58 * @Date: 2024-03-28 16:22:58
* @LastEditors: cbwu * @LastEditors: cbwu
* @LastEditTime: 2024-04-02 14:09:15 * @LastEditTime: 2024-04-13 10:45:37
* @Description: 几何类抽象基类 * @Description: 几何类抽象基类
*/ */
import { import {
// EntityCollection, // EntityCollection,
Entity, Entity,
Cartesian3, Cartesian3,
Color, Color,
ConstantPositionProperty, ConstantPositionProperty,
CustomDataSource, CustomDataSource,
} from 'cesium' } from 'cesium'
import { PointEntity, EntityOptions } from './pointEntity' import { PointEntity } from './pointEntity'
export abstract class BaseGeometry extends CustomDataSource { import { EntityOptions } from '@/types/entityoptions'
static ID: number export abstract class BaseGeometry extends CustomDataSource {
// abstract subId: number static ID: number
geometry: Entity | null = null // abstract subId: number
positions: Cartesian3[] = [] geometry: Entity | null = null
controlPointsID: string[] = [] //存储 positions: Cartesian3[] = []
options: EntityOptions = { controlPointsID: string[] = [] //存储
// id: 'Point' + String(PointEntity.ID), options: EntityOptions = {
// name: 'Point' + String(PointEntity.ID + 1), // id: 'Point' + String(PointEntity.ID),
show: true, // name: 'Point' + String(PointEntity.ID + 1),
// pixelSize: 10, show: true,
width: 2, // pixelSize: 10,
color: Color.GREEN, width: 2,
outlineWidth: 0, color: Color.GREEN,
} outlineWidth: 0,
}
constructor() {
super() constructor() {
} super()
/** }
* 新增一个节点,默认插入在尾部， /**
* @param pos 点坐标 * 新增一个节点,默认插入在尾部，
* @param index 插入的位置，0起步 * @param pos 点坐标
*/ * @param index 插入的位置，0起步
public addPoint(pos: Cartesian3, index: number = -1) { * @bAddControlPoint 是否添加控制点
if (index === -1) { */
//插入尾部 public addPoint(
this.positions.push(pos) pos: Cartesian3,
// console.log(this.positions.length) index: number = -1,
this.createPoint(pos, this.positions.length - 1) bAddControlPoint: boolean = true,
} else if (index >= 0 && index < this.positions.length) { ) {
this.positions.splice(index, 0, pos) if (index === -1) {
this.createPoint(pos, index) //插入尾部
} else { this.positions.push(pos)
return 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)
* @param index 移除点的位置 } else {
* @returns return
*/ }
public removePoint(index: number = -1) { }
if (index === -1 || index === this.positions.length - 1) { /**
//移除尾部元素 * 移除点
this.positions.pop() * @param index 移除点的位置
} else if (index >= 0 && index < this.positions.length) { * @returns
this.positions.splice(index, 1) */
this.entities.removeById(this.controlPointsID[index]) public removePoint(index: number = -1) {
this.controlPointsID.splice(index, 1) if (index === -1 || index === this.positions.length - 1) {
} else { //移除尾部元素
return this.positions.pop()
} } else if (index >= 0 && index < this.positions.length) {
} this.positions.splice(index, 1)
/** } else {
* 修改某点的坐标 return
* @param pos 修改点的坐标 }
* @param index 修改点的位置 //移除控制点
*/ this.removeControlPoint(index)
public modifyPoint(pos: Cartesian3, index: number) { }
if (index >= 0 && index < this.positions.length) { /**
this.positions.splice(index, 1, pos) * 修改某点的坐标
//修改控制点坐标 * @param pos 修改点的坐标
const point = this.entities.getById(this.controlPointsID[index]) * @param index 修改点的位置
if (point) { */
point.position = new ConstantPositionProperty(pos) 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)
* @param pos 点的坐标 if (this.controlPointsID[index]) {
* @param index 插入的位置,0起步 //修改控制点坐标
*/ const point = this.entities.getById(this.controlPointsID[index])
createPoint(pos: Cartesian3, index: number) { if (point) {
// if (this.geometry) { point.position = new ConstantPositionProperty(pos)
const point = new PointEntity(pos) }
point.parent = this.geometry! }
point.subId = index }
this.entities.add(point) }
this.controlPointsID.splice(index, 0, point.id) /**
// } * 新加一个点
} * @param pos 点的坐标
/** * @param index 插入的位置,0起步
* 清空所有控制点 */
*/ public createControlPoint(pos: Cartesian3, index: number) {
removeControlPoints() { // if (this.geometry) {
this.controlPointsID.forEach((value) => { const point = new PointEntity(pos)
this.entities.removeById(value) point.parent = this.geometry!
}) point.subId = index
this.controlPointsID = [] 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 * @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, 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, // 可能会提高在不同角度下的清晰度
}, },
}) })
} }
} }

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

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

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 * @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-01 17:04:55 * @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.createPoint(pt, index) this.createControlPoint(pt, index)
}) })
PolylineEntity.ID++ PolylineEntity.ID++
} }
} }

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

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

Write Preview
Loading…
Cancel
Save