From bd13f1ce4becc95abdf108798ff9c759baa5634a Mon Sep 17 00:00:00 2001
From: cbwu <504-wuchengbo@htsdfp.com>
Date: Thu, 11 Apr 2024 13:38:06 +0800
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E7=A7=BB=E9=99=A4geometry.ts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/utils/map/geometry/polygonEntity.ts | 47 +++++++++++++++++++++++++
1 file changed, 47 insertions(+)
create mode 100644 src/utils/map/geometry/polygonEntity.ts
diff --git a/src/utils/map/geometry/polygonEntity.ts b/src/utils/map/geometry/polygonEntity.ts
new file mode 100644
index 0000000..87f94fa
--- /dev/null
+++ b/src/utils/map/geometry/polygonEntity.ts
@@ -0,0 +1,47 @@
+/*
+ * @Author: cbwu 504-wuchengbo@htsdfp.com
+ * @Date: 2024-04-11 09:26:56
+ * @LastEditors: cbwu
+ * @LastEditTime: 2024-04-11 13:26:25
+ * @Description: 封装的Polygon对象
+ */
+import {
+ Entity,
+ Cartesian3,
+ Color,
+ CallbackProperty,
+ Property,
+ PolygonGraphics,
+} from 'cesium'
+import { BaseGeometry } from './baseGeometry'
+import { type EntityOptions } from './pointEntity'
+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[] | Property, options?: EntityOptions) {
+ super()
+ this.options = { ...this.options, ...options }
+ this.geometry = new Entity({
+ show: this.options.show,
+ name: this.options.name,
+ polygon: {
+ hierarchy: ptArr,
+ material: this.options.fillColor, //填充颜色
+ fill: this.options.fill, //是否填充
+ outlineWidth: this.options.width, //线宽
+ outlineColor: this.options.color, //线颜色
+ },
+ })
+ PolygonEntity.ID++
+ }
+}
From 1f5c7a324401b66f71a9a1e4115b9c96fb930b39 Mon Sep 17 00:00:00 2001
From: cbwu <504-wuchengbo@htsdfp.com>
Date: Thu, 11 Apr 2024 13:46:06 +0800
Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E7=A7=BB=E9=99=A4geometry.ts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/utils/map/draw/geometry.ts | 231 ---------------------------------
1 file changed, 231 deletions(-)
delete mode 100644 src/utils/map/draw/geometry.ts
diff --git a/src/utils/map/draw/geometry.ts b/src/utils/map/draw/geometry.ts
deleted file mode 100644
index 97fd0fc..0000000
--- a/src/utils/map/draw/geometry.ts
+++ /dev/null
@@ -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 }
From 4f2823f073a7d65b6b607370953c200cbd5c5d30 Mon Sep 17 00:00:00 2001
From: cbwu <504-wuchengbo@htsdfp.com>
Date: Fri, 12 Apr 2024 15:57:01 +0800
Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9EPolygon=E7=BB=98?=
=?UTF-8?q?=E5=88=B6=E7=B1=BB=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/map/BottomBar.vue | 45 ++++---
src/components/map/SceneViewer.vue | 7 +-
src/utils/DataIO.ts | 2 +-
src/utils/map/angle.ts | 106 ++++++++-------
src/utils/map/draw/drawPolygon.ts | 160 +++++++++++++++++++++++
src/utils/map/draw/drawPolyline.ts | 4 +-
src/utils/map/drawer.ts | 2 +-
src/utils/map/geocomputation.ts | 49 +++++--
src/utils/map/geometry/baseGeometry.ts | 57 ++++++--
src/utils/map/geometry/pointEntity.ts | 7 +-
src/utils/map/geometry/polygonEntity.ts | 21 ++-
src/utils/map/geometry/polylineEntity.ts | 4 +-
12 files changed, 353 insertions(+), 111 deletions(-)
create mode 100644 src/utils/map/draw/drawPolygon.ts
diff --git a/src/components/map/BottomBar.vue b/src/components/map/BottomBar.vue
index 7d1aa18..0684f78 100644
--- a/src/components/map/BottomBar.vue
+++ b/src/components/map/BottomBar.vue
@@ -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>
diff --git a/src/components/map/SceneViewer.vue b/src/components/map/SceneViewer.vue
index 8fde3dc..418bbbf 100644
--- a/src/components/map/SceneViewer.vue
+++ b/src/components/map/SceneViewer.vue
@@ -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-12 09:22:20
* @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>
diff --git a/src/utils/DataIO.ts b/src/utils/DataIO.ts
index 08d49b6..ffcecee 100644
--- a/src/utils/DataIO.ts
+++ b/src/utils/DataIO.ts
@@ -1,5 +1,5 @@
/*
* @Author: zhaipx
* @Date: {2024/4/11}
- * @Description:
+ * @Description:
*/
diff --git a/src/utils/map/angle.ts b/src/utils/map/angle.ts
index 3e6e8cb..f651cd6 100644
--- a/src/utils/map/angle.ts
+++ b/src/utils/map/angle.ts
@@ -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 }
diff --git a/src/utils/map/draw/drawPolygon.ts b/src/utils/map/draw/drawPolygon.ts
new file mode 100644
index 0000000..91f3a89
--- /dev/null
+++ b/src/utils/map/draw/drawPolygon.ts
@@ -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,
+ },
+ })
+ }
+}
diff --git a/src/utils/map/draw/drawPolyline.ts b/src/utils/map/draw/drawPolyline.ts
index 743522a..df931e7 100644
--- a/src/utils/map/draw/drawPolyline.ts
+++ b/src/utils/map/draw/drawPolyline.ts
@@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-27 08:43:44
* @LastEditors: cbwu
- * @LastEditTime: 2024-04-02 13:33:25
+ * @LastEditTime: 2024-04-12 09:06:27
* @Description: 绘制Polyline类
*/
import {
@@ -178,7 +178,7 @@ export default class CreatePolyline {
this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE)
this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
}
-
+ //创建追踪线
createTrackingLine(positions: Cartesian3[]) {
return new Entity({
polyline: {
diff --git a/src/utils/map/drawer.ts b/src/utils/map/drawer.ts
index 8015732..9a73f82 100644
--- a/src/utils/map/drawer.ts
+++ b/src/utils/map/drawer.ts
@@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-15 08:43:26
* @LastEditors: cbwu
- * @LastEditTime: 2024-03-26 14:20:32
+ * @LastEditTime: 2024-04-12 10:30:36
* @FilePath: \GCSMap\src\utils\drawer.ts
* @Description: 矢量要素绘制工具类
*/
diff --git a/src/utils/map/geocomputation.ts b/src/utils/map/geocomputation.ts
index f0719b8..0777547 100644
--- a/src/utils/map/geocomputation.ts
+++ b/src/utils/map/geocomputation.ts
@@ -5,7 +5,14 @@
* @LastEditTime: 2024-04-01 14:05:43
* @Description: 地理计算
*/
-import {Cartesian3, Cartographic, EllipsoidGeodesic, Math as Cesium_Math, Matrix4, Transforms} from 'cesium'
+import {
+ Cartesian3,
+ Cartographic,
+ EllipsoidGeodesic,
+ Math as Cesium_Math,
+ Matrix4,
+ Transforms,
+} from 'cesium'
/**
* 计算空间中一点到一条直线的最短距离的交点（在不考虑地球曲率的情况下）
* @param lineStart 直线的起点：[longitude1, latitude1, height1]
@@ -84,20 +91,18 @@ function isOnLineSegment(
*/
}
-
/**
* 计算距离，单位米
* @param p1 起点
* @param p2 终点
*/
-function getDistance(p1:Cartesian3, p2: Cartesian3): number
-{
- let point1cartographic = Cartographic.fromCartesian(p1);
- let point2cartographic = Cartographic.fromCartesian(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
+ return geodesic.surfaceDistance / 1000
}
/**
@@ -106,20 +111,30 @@ function getDistance(p1:Cartesian3, p2: Cartesian3): number
* @param p2 终点
* @param digits 保留小数位数，默认为保留1位小数
*/
-function getAzimuth(p1:Cartesian3, p2: Cartesian3, digits=1): string
-{
+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())
+ const localPosition1 = Matrix4.multiplyByPoint(
+ worldToLocalMatrix,
+ p1,
+ new Cartesian3(),
+ )
//p2在局部坐标系的位置
- const localPosition2 = Matrix4.multiplyByPoint(worldToLocalMatrix, p2, new Cartesian3())
+ const localPosition2 = Matrix4.multiplyByPoint(
+ worldToLocalMatrix,
+ p2,
+ new Cartesian3(),
+ )
//弧度
- const angle = Math.atan2(localPosition2.x - localPosition1.x, localPosition2.y - localPosition1.y)
+ const angle = Math.atan2(
+ localPosition2.x - localPosition1.x,
+ localPosition2.y - localPosition1.y,
+ )
//转为角度
- let theta = angle * (180 / Math.PI);
+ let theta = angle * (180 / Math.PI)
theta = theta < 0 ? theta + 360 : theta
return theta.toFixed(digits)
}
@@ -139,4 +154,10 @@ function getPolygonArea(vertexs: Cartesian3[]) {
return Math.abs(area)
}
-export { getClosestPoint, isOnLineSegment, getDistance, getAzimuth, getPolygonArea }
+export {
+ getClosestPoint,
+ isOnLineSegment,
+ getDistance,
+ getAzimuth,
+ getPolygonArea,
+}
diff --git a/src/utils/map/geometry/baseGeometry.ts b/src/utils/map/geometry/baseGeometry.ts
index 3a1804b..5aab807 100644
--- a/src/utils/map/geometry/baseGeometry.ts
+++ b/src/utils/map/geometry/baseGeometry.ts
@@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 16:22:58
* @LastEditors: cbwu
- * @LastEditTime: 2024-04-02 14:09:15
+ * @LastEditTime: 2024-04-12 14:57:49
* @Description: 几何类抽象基类
*/
import {
@@ -37,16 +37,21 @@ export abstract class BaseGeometry extends CustomDataSource {
* 新增一个节点,默认插入在尾部，
* @param pos 点坐标
* @param index 插入的位置，0起步
+ * @bAddControlPoint 是否添加控制点
*/
- public addPoint(pos: Cartesian3, index: number = -1) {
+ public addPoint(
+ pos: Cartesian3,
+ index: number = -1,
+ bAddControlPoint: boolean = true,
+ ) {
if (index === -1) {
//插入尾部
this.positions.push(pos)
- // console.log(this.positions.length)
- this.createPoint(pos, this.positions.length - 1)
+ if (bAddControlPoint)
+ this.createControlPoint(pos, this.positions.length - 1)
} else if (index >= 0 && index < this.positions.length) {
this.positions.splice(index, 0, pos)
- this.createPoint(pos, index)
+ if (bAddControlPoint) this.createControlPoint(pos, index)
} else {
return
}
@@ -62,11 +67,11 @@ export abstract class BaseGeometry extends CustomDataSource {
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
}
+ //移除控制点
+ this.removeControlPoint(index)
}
/**
* 修改某点的坐标
@@ -74,12 +79,17 @@ export abstract class BaseGeometry extends CustomDataSource {
* @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)
- //修改控制点坐标
- const point = this.entities.getById(this.controlPointsID[index])
- if (point) {
- point.position = new ConstantPositionProperty(pos)
+ if (this.controlPointsID[index]) {
+ //修改控制点坐标
+ const point = this.entities.getById(this.controlPointsID[index])
+ if (point) {
+ point.position = new ConstantPositionProperty(pos)
+ }
}
}
}
@@ -88,7 +98,7 @@ export abstract class BaseGeometry extends CustomDataSource {
* @param pos 点的坐标
* @param index 插入的位置,0起步
*/
- createPoint(pos: Cartesian3, index: number) {
+ public createControlPoint(pos: Cartesian3, index: number) {
// if (this.geometry) {
const point = new PointEntity(pos)
point.parent = this.geometry!
@@ -97,6 +107,17 @@ export abstract class BaseGeometry extends CustomDataSource {
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)
+ }
+ }
/**
* 清空所有控制点
*/
@@ -106,4 +127,16 @@ export abstract class BaseGeometry extends CustomDataSource {
})
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
+ }
+ }
}
diff --git a/src/utils/map/geometry/pointEntity.ts b/src/utils/map/geometry/pointEntity.ts
index ec8878b..de0a02e 100644
--- a/src/utils/map/geometry/pointEntity.ts
+++ b/src/utils/map/geometry/pointEntity.ts
@@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 16:35:33
* @LastEditors: cbwu
- * @LastEditTime: 2024-03-30 22:06:23
+ * @LastEditTime: 2024-04-12 15:43:49
* @Description: 封装的点几何类
*/
import {
@@ -39,8 +39,9 @@ class PointEntity extends Entity {
id: 'Point' + String(PointEntity.ID),
name: 'Point' + String(PointEntity.ID + 1),
show: true,
- pixelSize: 10,
- color: Color.GREEN,
+ pixelSize: 8,
+ color: Color.WHITE,
+ outlineColor: Color.GREEN,
outlineWidth: 0,
}
constructor(position: Cartesian3, options?: EntityOptions) {
diff --git a/src/utils/map/geometry/polygonEntity.ts b/src/utils/map/geometry/polygonEntity.ts
index 87f94fa..4a29c73 100644
--- a/src/utils/map/geometry/polygonEntity.ts
+++ b/src/utils/map/geometry/polygonEntity.ts
@@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-04-11 09:26:56
* @LastEditors: cbwu
- * @LastEditTime: 2024-04-11 13:26:25
+ * @LastEditTime: 2024-04-12 15:34:45
* @Description: 封装的Polygon对象
*/
import {
@@ -10,8 +10,7 @@ import {
Cartesian3,
Color,
CallbackProperty,
- Property,
- PolygonGraphics,
+ PolygonHierarchy,
} from 'cesium'
import { BaseGeometry } from './baseGeometry'
import { type EntityOptions } from './pointEntity'
@@ -28,20 +27,30 @@ export class PolygonEntity extends BaseGeometry {
fillColor: Color.RED.withAlpha(0.5),
fill: true,
}
- constructor(ptArr: Cartesian3[] | Property, options?: EntityOptions) {
+ 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: ptArr,
+ hierarchy: new CallbackProperty(() => {
+ return new PolygonHierarchy(this.positions)
+ }, false),
material: this.options.fillColor, //填充颜色
fill: this.options.fill, //是否填充
- outlineWidth: this.options.width, //线宽
+ 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++
}
}
diff --git a/src/utils/map/geometry/polylineEntity.ts b/src/utils/map/geometry/polylineEntity.ts
index 026ea28..bb07f25 100644
--- a/src/utils/map/geometry/polylineEntity.ts
+++ b/src/utils/map/geometry/polylineEntity.ts
@@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 16:49:02
* @LastEditors: cbwu
- * @LastEditTime: 2024-04-01 17:04:55
+ * @LastEditTime: 2024-04-12 14:27:12
* @Description: 封装的Polyline类
*/
import { Entity, Cartesian3, Color, CallbackProperty } from 'cesium'
@@ -40,7 +40,7 @@ export class PolylineEntity extends BaseGeometry {
this.entities.add(this.geometry)
// 添加控制点
ptArr.forEach((pt, index) => {
- this.createPoint(pt, index)
+ this.createControlPoint(pt, index)
})
PolylineEntity.ID++
From ade03bc747e412bdb220f02b1040eb0c8c97d904 Mon Sep 17 00:00:00 2001
From: cbwu <504-wuchengbo@htsdfp.com>
Date: Sat, 13 Apr 2024 11:03:29 +0800
Subject: [PATCH 4/6] =?UTF-8?q?refactor:=20=E6=8B=86=E5=88=86=E5=87=A0?=
=?UTF-8?q?=E4=BD=95=E5=AF=B9=E8=B1=A1=E7=B1=BB=E7=9A=84=E5=8F=AF=E9=80=89?=
=?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B9=E7=B1=BB=E5=9E=8B=E6=8E=A5=E5=8F=A3?=
=?UTF-8?q?=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.prettierrc.json | 18 +-
src/types/entityoptions.ts | 26 ++
src/utils/getAssets.ts | 22 +-
src/utils/map/camera.ts | 40 +-
src/utils/map/coordinate.ts | 100 ++---
src/utils/map/draw/drawPoint.ts | 100 ++---
src/utils/map/draw/drawPolyline.ts | 394 +++++++++---------
src/utils/map/draw/editGeometry.ts | 498 +++++++++++------------
src/utils/map/drawer.ts | 370 ++++++++---------
src/utils/map/geocomputation.ts | 326 +++++++--------
src/utils/map/geometry/baseGeometry.ts | 285 ++++++-------
src/utils/map/geometry/billboard.ts | 72 ++--
src/utils/map/geometry/pointEntity.ts | 126 +++---
src/utils/map/geometry/polygonEntity.ts | 112 ++---
src/utils/map/geometry/polylineEntity.ts | 96 ++---
src/utils/map/sceneViewer.ts | 226 +++++-----
16 files changed, 1412 insertions(+), 1399 deletions(-)
create mode 100644 src/types/entityoptions.ts
diff --git a/.prettierrc.json b/.prettierrc.json
index 10b1be6..e379141 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -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
+}
diff --git a/src/types/entityoptions.ts b/src/types/entityoptions.ts
new file mode 100644
index 0000000..c27fc86
--- /dev/null
+++ b/src/types/entityoptions.ts
@@ -0,0 +1,26 @@
+/*
+ * @Author: cbwu 504-wuchengbo@htsdfp.com
+ * @Date: 2024-04-13 10:36:06
+ * @LastEditors: cbwu
+ * @LastEditTime: 2024-04-13 10:56:26
+ * @Description:
+ */
+import { Color, Cartesian2 } from 'cesium'
+export interface EntityOptions {
+ id?: string
+ name?: string
+ show?: boolean
+ pixelSize?: number
+ outlineColor?: Color
+ color?: Color
+ fillColor?: Color
+ fill?: boolean
+ width?: number
+ outlineWidth?: number
+ text?: string
+ font?: string
+ pixelOffset?: Cartesian2
+ image?: string
+ imageWidth?: number
+ imageHeight?: number
+}
diff --git a/src/utils/getAssets.ts b/src/utils/getAssets.ts
index 4460007..ffecf2f 100644
--- a/src/utils/getAssets.ts
+++ b/src/utils/getAssets.ts
@@ -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
+}
diff --git a/src/utils/map/camera.ts b/src/utils/map/camera.ts
index bb7f44f..1517f2a 100644
--- a/src/utils/map/camera.ts
+++ b/src/utils/map/camera.ts
@@ -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 }
diff --git a/src/utils/map/coordinate.ts b/src/utils/map/coordinate.ts
index 899a6b1..9e1a7cf 100644
--- a/src/utils/map/coordinate.ts
+++ b/src/utils/map/coordinate.ts
@@ -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 }
diff --git a/src/utils/map/draw/drawPoint.ts b/src/utils/map/draw/drawPoint.ts
index 37ad10d..ea7b92b 100644
--- a/src/utils/map/draw/drawPoint.ts
+++ b/src/utils/map/draw/drawPoint.ts
@@ -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()
+ }
+ }
+}
diff --git a/src/utils/map/draw/drawPolyline.ts b/src/utils/map/draw/drawPolyline.ts
index df931e7..c61d76f 100644
--- a/src/utils/map/draw/drawPolyline.ts
+++ b/src/utils/map/draw/drawPolyline.ts
@@ -1,197 +1,197 @@
-/*
- * @Author: cbwu 504-wuchengbo@htsdfp.com
- * @Date: 2024-03-27 08:43:44
- * @LastEditors: cbwu
- * @LastEditTime: 2024-04-12 09:06:27
- * @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,
+ },
+ })
+ }
+}
diff --git a/src/utils/map/draw/editGeometry.ts b/src/utils/map/draw/editGeometry.ts
index 1467e63..06cfb0b 100644
--- a/src/utils/map/draw/editGeometry.ts
+++ b/src/utils/map/draw/editGeometry.ts
@@ -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)
+ // }
+ }
+}
diff --git a/src/utils/map/drawer.ts b/src/utils/map/drawer.ts
index 9a73f82..d720755 100644
--- a/src/utils/map/drawer.ts
+++ b/src/utils/map/drawer.ts
@@ -1,185 +1,185 @@
-/*
- * @Author: cbwu 504-wuchengbo@htsdfp.com
- * @Date: 2024-03-15 08:43:26
- * @LastEditors: cbwu
- * @LastEditTime: 2024-04-12 10:30:36
- * @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 }
diff --git a/src/utils/map/geocomputation.ts b/src/utils/map/geocomputation.ts
index 0777547..9608bf4 100644
--- a/src/utils/map/geocomputation.ts
+++ b/src/utils/map/geocomputation.ts
@@ -1,163 +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,
+}
diff --git a/src/utils/map/geometry/baseGeometry.ts b/src/utils/map/geometry/baseGeometry.ts
index 5aab807..58fb8ab 100644
--- a/src/utils/map/geometry/baseGeometry.ts
+++ b/src/utils/map/geometry/baseGeometry.ts
@@ -1,142 +1,143 @@
-/*
- * @Author: cbwu 504-wuchengbo@htsdfp.com
- * @Date: 2024-03-28 16:22:58
- * @LastEditors: cbwu
- * @LastEditTime: 2024-04-12 14:57:49
- * @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起步
- * @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
- }
- }
-}
+/*
+ * @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
+ }
+ }
+}
diff --git a/src/utils/map/geometry/billboard.ts b/src/utils/map/geometry/billboard.ts
index aa36efc..aa09d8e 100644
--- a/src/utils/map/geometry/billboard.ts
+++ b/src/utils/map/geometry/billboard.ts
@@ -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, 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, // 可能会提高在不同角度下的清晰度
+ },
+ })
+ }
+}
diff --git a/src/utils/map/geometry/pointEntity.ts b/src/utils/map/geometry/pointEntity.ts
index de0a02e..626b151 100644
--- a/src/utils/map/geometry/pointEntity.ts
+++ b/src/utils/map/geometry/pointEntity.ts
@@ -1,70 +1,56 @@
-/*
- * @Author: cbwu 504-wuchengbo@htsdfp.com
- * @Date: 2024-03-28 16:35:33
- * @LastEditors: cbwu
- * @LastEditTime: 2024-04-12 15:43:49
- * @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: 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, type EntityOptions }
+/*
+ * @Author: cbwu 504-wuchengbo@htsdfp.com
+ * @Date: 2024-03-28 16:35:33
+ * @LastEditors: cbwu
+ * @LastEditTime: 2024-04-13 10:46:19
+ * @Description: 封装的点几何类
+ */
+import {
+ Entity,
+ Cartesian3,
+ Color,
+ PointGraphics,
+ PositionProperty,
+ LabelGraphics,
+ Cartesian2,
+ CallbackProperty,
+ Property,
+} 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 }
diff --git a/src/utils/map/geometry/polygonEntity.ts b/src/utils/map/geometry/polygonEntity.ts
index 4a29c73..b73ca01 100644
--- a/src/utils/map/geometry/polygonEntity.ts
+++ b/src/utils/map/geometry/polygonEntity.ts
@@ -1,56 +1,56 @@
-/*
- * @Author: cbwu 504-wuchengbo@htsdfp.com
- * @Date: 2024-04-11 09:26:56
- * @LastEditors: cbwu
- * @LastEditTime: 2024-04-12 15:34:45
- * @Description: 封装的Polygon对象
- */
-import {
- Entity,
- Cartesian3,
- Color,
- CallbackProperty,
- PolygonHierarchy,
-} from 'cesium'
-import { BaseGeometry } from './baseGeometry'
-import { type EntityOptions } from './pointEntity'
-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++
- }
-}
+/*
+ * @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++
+ }
+}
diff --git a/src/utils/map/geometry/polylineEntity.ts b/src/utils/map/geometry/polylineEntity.ts
index bb07f25..5a4aa26 100644
--- a/src/utils/map/geometry/polylineEntity.ts
+++ b/src/utils/map/geometry/polylineEntity.ts
@@ -1,48 +1,48 @@
-/*
- * @Author: cbwu 504-wuchengbo@htsdfp.com
- * @Date: 2024-03-28 16:49:02
- * @LastEditors: cbwu
- * @LastEditTime: 2024-04-12 14:27:12
- * @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.createControlPoint(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++
+ }
+}
diff --git a/src/utils/map/sceneViewer.ts b/src/utils/map/sceneViewer.ts
index ddffcfb..de407d8 100644
--- a/src/utils/map/sceneViewer.ts
+++ b/src/utils/map/sceneViewer.ts
@@ -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 }
From bbe84ec8663268374618062191638fb1f80bc94f Mon Sep 17 00:00:00 2001
From: cbwu <504-wuchengbo@htsdfp.com>
Date: Sat, 13 Apr 2024 11:17:12 +0800
Subject: [PATCH 5/6] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.eslintrc.cjs | 8 ++++++++
src/types/entityoptions.ts | 26 +++++++++++++-------------
src/utils/map/geometry/billboard.ts | 2 +-
src/utils/map/geometry/pointEntity.ts | 14 ++------------
4 files changed, 24 insertions(+), 26 deletions(-)
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 0475a5c..3114339 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -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的检查
},
}
diff --git a/src/types/entityoptions.ts b/src/types/entityoptions.ts
index c27fc86..bde5d46 100644
--- a/src/types/entityoptions.ts
+++ b/src/types/entityoptions.ts
@@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-04-13 10:36:06
* @LastEditors: cbwu
- * @LastEditTime: 2024-04-13 10:56:26
+ * @LastEditTime: 2024-04-13 11:14:53
* @Description:
*/
import { Color, Cartesian2 } from 'cesium'
@@ -10,17 +10,17 @@ export interface EntityOptions {
id?: string
name?: string
show?: boolean
- pixelSize?: number
- outlineColor?: Color
- color?: Color
- fillColor?: Color
- fill?: boolean
- width?: number
+ pixelSize?: number //点大小
+ outlineColor?: Color //轮廓线颜色
+ color?: Color //点颜色
+ fillColor?: Color //填充颜色
+ fill?: boolean //是否填充
+ width?: number //线宽
outlineWidth?: number
- text?: string
- font?: string
- pixelOffset?: Cartesian2
- image?: string
- imageWidth?: number
- imageHeight?: number
+ text?: string //标注内容
+ font?: string //字体
+ pixelOffset?: Cartesian2 //偏移量
+ image?: string //图片url
+ imageWidth?: number //图片宽
+ imageHeight?: number //图片高
}
diff --git a/src/utils/map/geometry/billboard.ts b/src/utils/map/geometry/billboard.ts
index aa09d8e..56d88db 100644
--- a/src/utils/map/geometry/billboard.ts
+++ b/src/utils/map/geometry/billboard.ts
@@ -5,7 +5,7 @@
* @LastEditTime: 2024-04-13 10:45:00
* @Description: 广告牌对象
*/
-import { Entity, Cartesian3, Cartesian2, Color, HeightReference } from 'cesium'
+import { Entity, Cartesian3, Cartesian2, HeightReference } from 'cesium'
import { getMapAssetsFile } from '@/utils/getAssets'
export class BillBoard extends Entity {
static ID: number = 0
diff --git a/src/utils/map/geometry/pointEntity.ts b/src/utils/map/geometry/pointEntity.ts
index 626b151..1bd5c47 100644
--- a/src/utils/map/geometry/pointEntity.ts
+++ b/src/utils/map/geometry/pointEntity.ts
@@ -2,20 +2,10 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-28 16:35:33
* @LastEditors: cbwu
- * @LastEditTime: 2024-04-13 10:46:19
+ * @LastEditTime: 2024-04-13 11:15:48
* @Description: 封装的点几何类
*/
-import {
- Entity,
- Cartesian3,
- Color,
- PointGraphics,
- PositionProperty,
- LabelGraphics,
- Cartesian2,
- CallbackProperty,
- Property,
-} from 'cesium'
+import { Entity, Cartesian3, Color, PointGraphics, LabelGraphics } from 'cesium'
import { EntityOptions } from '@/types/entityoptions'
// 点
class PointEntity extends Entity {
From a0851e54a7e9188535d24025159eda8ffb7f6325 Mon Sep 17 00:00:00 2001
From: cbwu <504-wuchengbo@htsdfp.com>
Date: Mon, 15 Apr 2024 16:08:19 +0800
Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=A4=A9=E5=9C=B0?=
=?UTF-8?q?=E5=9B=BE=E6=9C=8D=E5=8A=A1=E7=B1=BBWGS84=E5=8A=A0=E8=BD=BD?=
=?UTF-8?q?=E9=94=99=E8=AF=AF=E7=9A=84=E9=97=AE=E9=A2=98;=E4=B8=89?=
=?UTF-8?q?=E7=BB=B4=E6=9C=8D=E5=8A=A1=E4=BD=BF=E7=94=A8=E5=8D=95=E7=8B=AC?=
=?UTF-8?q?=E7=9A=84key?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/map/SceneViewer.vue | 2 +-
src/utils/map/TDTProvider.ts | 7 ++++---
2 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/src/components/map/SceneViewer.vue b/src/components/map/SceneViewer.vue
index 418bbbf..8f7ba1d 100644
--- a/src/components/map/SceneViewer.vue
+++ b/src/components/map/SceneViewer.vue
@@ -2,7 +2,7 @@
* @Author: cbwu 504-wuchengbo@htsdfp.com
* @Date: 2024-03-07 14:15:35
* @LastEditors: cbwu
- * @LastEditTime: 2024-04-12 09:22:20
+ * @LastEditTime: 2024-04-15 16:00:27
* @Description:
-->
<template>
diff --git a/src/utils/map/TDTProvider.ts b/src/utils/map/TDTProvider.ts
index a65b86f..b0514df 100644
--- a/src/utils/map/TDTProvider.ts
+++ b/src/utils/map/TDTProvider.ts
@@ -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)
}