Merge remote-tracking branch 'origin/dev' into dev-cbwu

# Conflicts:
#	src/components/map/BottomBar.vue
#	src/utils/DataIO.ts
#	src/utils/map/geocomputation.ts

src/components/map/BottomBar.vue

@@ -5,40 +5,36 @@
 -->
 <script setup lang="ts">
 import { Angle } from '@/utils/map/angle.ts'
-import { ScreenSpaceEventHandler, Math, ScreenSpaceEventType } from 'cesium'
+import {ScreenSpaceEventHandler, Math, ScreenSpaceEventType, Cartographic} from 'cesium'
-import { onMounted, ref } from 'vue'
+import {onMounted, ref} from "vue";
-import { cartesian2ToCartesian3 } from '@/utils/map/coordinate.ts'
+import {cartesian2ToCartesian3} from "@/utils/map/coordinate.ts";
 let nowLatStr: string, nowLonStr: string
 let lonlatStr = ref('')
 let isDecimal = ref(true)
 
-onMounted(() => {
+onMounted(()=>{
   let _viewer = window.viewer
   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 =
+      let cartographic =  _viewer.scene.globe.ellipsoid.cartesianToCartographic(position);
-        _viewer.scene.globe.ellipsoid.cartesianToCartographic(position)
+      try{
-      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 =
+        let needElevation: boolean = camera_alt < 250 && (_viewer.camera.pitch < -(Math.PI/180)*80)
-          camera_alt < 250 && _viewer.camera.pitch < -(Math.PI / 180) * 80
+        let elevStr = needElevation? Cartographic.fromCartesian(position).height.toFixed(2)+'m'?? '' : '高度过高'
-        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}`
         }
@@ -49,12 +45,10 @@ onMounted(() => {
 
 function lonlatClick() {
   let elevStr = lonlatStr.value.split('高度')[1]
-  console.log(elevStr)
+  if(isDecimal.value){
-  if (isDecimal.value) {
+    lonlatStr.value = `经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)}, 高度` + elevStr
-    lonlatStr.value =
+  }
-      `经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)}, 高度` +
+  else {
-      elevStr
-  } else {
     lonlatStr.value = `经度: ${nowLonStr}°, 纬度: ${nowLatStr}°, 高度` + elevStr
   }
   isDecimal.value = !isDecimal.value
@@ -86,13 +80,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>

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-15 16:00:27
+ * @LastEditTime: 2024-04-16 19:06:50
  * @Description:
 -->
 <template>
@@ -22,6 +22,7 @@ import {
 import { initViewer, perfViewer, showNavigator } from '@/utils/map/sceneViewer'
 import { flyToChina } from '@/utils/map/camera'
 import CreatePolyline from '@/utils/map/draw/drawPolyline'
+import { inputGeoJson } from '@/utils/DataIO.ts'
 // import DrawPoint from '@/utils/map/draw/drawPoint'
 import { DrawPolygon } from '@/utils/map/draw/drawPolygon'
 const viewerDivRef = ref<HTMLDivElement>()
@@ -66,12 +67,12 @@ onMounted(() => {
 
   // 挂载在window，供全局组件共享
   window.viewer = viewer
-
+  // inputGeoJson(viewer)
   //绘制多边形
-  // const drawPolyline = new CreatePolyline(viewer)
+  const drawPolyline = new CreatePolyline(viewer)
-  // drawPolyline.start()
+  drawPolyline.start()
-  const drawPolygon = new DrawPolygon(viewer)
+  // const drawPolygon = new DrawPolygon(viewer)
-  drawPolygon.start()
+  // drawPolygon.start()
 })
 </script>
 

src/components/toolbar.vue

@@ -0,0 +1,16 @@
+<!--
+  文件描述：工具条
+  创建时间：2024/4/16 10:54
+  创建人：Zhaipeixiu
+-->
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/types/entityoptions.ts

@@ -2,10 +2,10 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-04-13 10:36:06
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-13 11:14:53
+ * @LastEditTime: 2024-04-16 13:47:55
  * @Description:
  */
-import { Color, Cartesian2 } from 'cesium'
+import { Color, Cartesian2, HeightReference } from 'cesium'
 export interface EntityOptions {
   id?: string
   name?: string
@@ -23,4 +23,5 @@ export interface EntityOptions {
   image?: string //图片url
   imageWidth?: number //图片宽
   imageHeight?: number //图片高
+  heightReference?: HeightReference
 }

src/utils/DataIO.ts

@@ -1,5 +1,24 @@
-/*
+/**
- * @Author: zhaipx
+ 文件描述：数据输入输出工具。文件写入必须通过后端实现。
- * @Date: {2024/4/11}
+ 创建时间：2024/4/11 13:33
- * @Description:
+ 创建人：Zhaipeixiu
  */
+import {Viewer, GeoJsonDataSource, Color, KmlDataSource} from "cesium";
+
+export const inputGeoJson = (viewer: Viewer) => {
+  viewer.dataSources.add(GeoJsonDataSource.load("/js.json",{
+   stroke: Color.WHITE,  //轮廓颜色，注意：颜色必须大写
+   strokeWidth: 5,
+   fill: Color.BLUE.withAlpha(0.3), //填充颜色，透明度
+  }))
+}
+
+export const inputKML = (viewer: Viewer) => {
+ let kmlUrl = "./Assets/gdpPerCapita2008.kmz";
+ let kmlDataPromise = KmlDataSource.load(kmlUrl);
+ console.log(kmlDataPromise);
+ kmlDataPromise.then(function (dataSource) {
+  console.log(dataSource);
+  viewer.dataSources.add(dataSource);
+ })
+}

src/utils/map/SpatialAnalysis.ts

@@ -0,0 +1,41 @@
+/**
+ 文件描述：空间分析方法
+ 创建时间：2024/4/15 9:52
+ 创建人：Zhaipeixiu
+ */
+
+import {getDistance, getElevation} from "@/utils/map/geocomputation.ts";
+import {Cartesian3, Viewer} from "cesium";
+
+/**
+ * 地形剖面分析数值计算
+ * @param viewer 地图Viewer
+ * @param start 起点
+ * @param end 终点
+ * @param interval 线段采样间隔 m为单位
+ * @return 从起点至终点剖面线的海拔高度数组
+ */
+export function elevationProfile(viewer: Viewer, start:Cartesian3, end:Cartesian3, interval: number)
+{
+ let breakPointsHeight = []
+ // 计算首尾点距离 m
+ let totalLen = getDistance(start, end) * 1000
+ console.log('总距离',totalLen)
+ // 获取起点高度
+ breakPointsHeight.push(getElevation(viewer, start))
+ //断点数量
+ let breakNum = Math.floor(totalLen/interval)
+ console.log('断点数量',breakNum)
+ // 如果采样间隔小于首尾点距离，则获取每个断点的坐标 并获取其高度
+ if(breakNum>=1){
+  for (let i = 1; i <= breakNum; i++) {
+   let breakP = Cartesian3.lerp(start, end, i/breakNum, new Cartesian3())
+   breakPointsHeight.push(getElevation(viewer, breakP))
+
+   console.log(`断点${i}高度：`,getElevation(viewer, breakP))
+  }
+ }
+ // 获取终点高度
+ breakPointsHeight.push(getElevation(viewer, end))
+ return breakPointsHeight
+}

src/utils/map/draw/drawPolygon.ts

@@ -6,19 +6,20 @@
  * @Description: 绘制多边形
  */
 import {
-  Viewer,
+  CallbackProperty,
-  ScreenSpaceEventHandler,
   Cartesian3,
   Color,
-  ScreenSpaceEventType,
   Entity,
-  CallbackProperty,
   PolylineDashMaterialProperty,
+  Rectangle,
+  ScreenSpaceEventHandler,
+  ScreenSpaceEventType,
+  Viewer,
 } from 'cesium'
-import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
+import {cartesian2ToCartesian3} from '@/utils/map/coordinate'
-import { PolygonEntity } from '../geometry/polygonEntity'
+import {PolygonEntity} from '../geometry/polygonEntity'
-import { PointEntity } from '@/utils/map/geometry/pointEntity'
+import {getPolygonArea} from "@/utils/map/geocomputation.ts";
-import EditGeometry from '@/utils/map/draw/editGeometry'
+import {TextLabel} from "@/utils/map/geometry/textLabel.ts";
 
 export class DrawPolygon {
   viewer: Viewer
@@ -28,9 +29,11 @@ export class DrawPolygon {
   trackingLine: Entity | null
   trackingLinePositions: Cartesian3[] = []
   bMove: boolean = false
+  bMeasure = false
   bLongClick: boolean = false
-  constructor(viewer: Viewer) {
+  constructor(viewer: Viewer, isMeasure: boolean=false) {
     this.viewer = viewer
+    this.bMeasure = isMeasure
     this.handler = new ScreenSpaceEventHandler(viewer.scene.canvas)
     this.polygon = null
     this.trackingLine = null
@@ -130,17 +133,22 @@ export class DrawPolygon {
       }
     }
   }
+
   //左双击回调事件
-  private leftDoubleClickCallBack = (
+  private leftDoubleClickCallBack = (event: ScreenSpaceEventHandler.PositionedEvent) => {
-    event: ScreenSpaceEventHandler.PositionedEvent,
-  ) => {
     if (!this.polygon) return
-    console.log('**************************** double click')
     this.bMove = false
     //移除多余的点
     this.polygon.removePoint(-1)
     this.polygon.removePoint(-1)
+    if(this.bMeasure){
+      //计算面积
+      let area = getPolygonArea(this.positions)
+      //添加label
+      new TextLabel(this.viewer,this.getCenter(),`面积: ${(area/1000000).toFixed(2)}k㎡`)
     }
+  }
+
   //创建追踪线
   createTrackingLine(positions: Cartesian3[]) {
     return new Entity({
@@ -157,4 +165,15 @@ export class DrawPolygon {
       },
     })
   }
+
+  // 获取多边形的外接矩形
+  public getRectangle(): Rectangle {
+    return Rectangle.fromCartesianArray(this.positions)
+  }
+
+  // 获取几何中心
+  public getCenter(): Cartesian3 {
+    let rec = this.getRectangle()
+    return Cartesian3.fromRadians((rec.east + rec.west) / 2, (rec.south + rec.north) / 2)
+  }
 }

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-13 10:46:58
+ * @LastEditTime: 2024-04-16 19:00:18
  * @Description: 绘制Polyline类
  */
 import {
@@ -14,12 +14,19 @@ import {
   Entity,
   CallbackProperty,
   PolylineDashMaterialProperty,
+  HeightReference,
 } from 'cesium'
-import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
+import {
+  cartesian2ToCartesian3,
+  cartesian3ToWGS84,
+} 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'
+import { getDistance } from '@/utils/map/geocomputation.ts'
+import { Angle } from '@/utils/map/angle.ts'
+import { TextLabel } from '@/utils/map/geometry/textLabel.ts'
 type EntityOptions = {
   id?: string
   name?: string
@@ -44,8 +51,12 @@ export default class CreatePolyline {
   moveSelectedPoint: PointEntity | null = null
   positions: Cartesian3[] = []
   bMove: boolean = false
+  bMeasure: boolean | undefined = false //是否处于测距模式
+  totalDistance: number = 0
   bLongClick: boolean = false
   clickTimeout: any
+  altitudeOffset: number = 20 //相对高度
+  vDashLinePosition: Cartesian3[][] = [] //垂直辅助线坐标数组
   // layer: CustomDataSource
   defaultStyle: EntityOptions = {
     // id: 'Polyline' + String(PolylineEntity.id),
@@ -54,13 +65,18 @@ export default class CreatePolyline {
     width: 2,
     color: Color.GREEN,
   }
-  constructor(viewer: Viewer, options?: EntityOptions) {
+  constructor(
+    viewer: Viewer,
+    bMeasure: boolean = false,
+    options?: EntityOptions,
+  ) {
     this.viewer = viewer
+    this.bMeasure = bMeasure
     this.handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
     this.polyline = null
     this.trackingLine = null
     this.dashLine = null
-
+    this.totalDistance = 0
     this.controlPoints = []
     this.defaultStyle = { ...this.defaultStyle, ...options }
   }
@@ -90,23 +106,23 @@ export default class CreatePolyline {
   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]
       ) {
+        console.log('********click the same point')
         return
-        // console.log('********click the same point')
       }
     }
-    const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
+    let cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
     if (cartesian3 != undefined) {
       if (!this.polyline) {
         this.polyline = new PolylineEntity(this.positions)
@@ -114,18 +130,60 @@ export default class CreatePolyline {
         this.viewer.entities.add(this.dashLine)
         this.viewer.dataSources.add(this.polyline)
       }
+      const oldPosition = cartesian3
+      //计算高度偏移后的新坐标
+      cartesian3 = this.calculateAltitudeOffsetPosition(
+        cartesian3,
+        this.altitudeOffset,
+      )
       this.polyline.addPoint(cartesian3)
       this.trackingLinePositions[0] = cartesian3
+      //垂直辅助线
+      const n = this.positions.length - 1
+      const ptArr = [oldPosition, cartesian3]
+      this.vDashLinePosition[n] = ptArr
+      this.viewer.entities.add(
+        this.createTrackingLine(this.vDashLinePosition[n], Color.WHITE),
+      )
+      //添加地表控制点
+      const groundControlPoint = new PointEntity(this.vDashLinePosition[n][0])
+      this.viewer.entities.add(groundControlPoint)
       this.bMove = true
-
       this.viewer.scene.requestRender() //刷新
+      // 计算2点距离
+      if (this.positions.length >= 2 && this.bMeasure) {
+        let distance = getDistance(
+          this.positions[this.positions.length - 1],
+          this.positions[this.positions.length - 2],
+        )
+        this.totalDistance += distance
+        // 计算2点方位角
+        let azimuth = Angle.getAzimuth(
+          this.positions[this.positions.length - 2],
+          this.positions[this.positions.length - 1],
+        )
+        // 计算2点的中间点
+        let midPoint = Cartesian3.midpoint(
+          this.positions[this.positions.length - 1],
+          this.positions[this.positions.length - 2],
+          new Cartesian3(),
+        )
+        // 添加label
+        let labelText = `距离: ${distance.toFixed(2)}km, 方位角: ${azimuth}°`
+        new TextLabel(this.viewer, midPoint, labelText)
+      }
     }
   }
   // 移动回调事件
   private moveCallBack = (event: ScreenSpaceEventHandler.MotionEvent) => {
     if (this.bMove) {
-      const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
+      let cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
       if (cartesian3 != undefined) {
+        //计算高度偏移后的新坐标
+        cartesian3 = this.calculateAltitudeOffsetPosition(
+          cartesian3,
+          this.altitudeOffset,
+        )
         //更新追踪线坐标
         this.trackingLinePositions[1] = cartesian3
         if (!this.trackingLine) {
@@ -143,10 +201,7 @@ export default class CreatePolyline {
   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) {
@@ -156,9 +211,18 @@ export default class CreatePolyline {
       }
     }
 
+    if (this.bMeasure) {
+      // 添加总距离label
+      new TextLabel(
+        this.viewer,
+        this.positions[this.positions.length - 1],
+        `总距离: ${this.totalDistance.toFixed(2)}km`,
+      )
+    }
     this.clearEvent()
     console.log('end:' + this.positions.length.toString())
     console.log(this.positions)
+    console.log(this.polyline.controlPointsID.length)
     //结束绘制进入编辑模式
     this.polyline.removeControlPoints()
     const editTool = new EditGeometry(this.viewer, this.polyline.geometry!)
@@ -173,13 +237,27 @@ export default class CreatePolyline {
       this.viewer.entities.remove(this.controlPoints.pop() as Entity)
     }
   }
-  clearEvent() {
+
+  private clearEvent() {
     this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
     this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE)
     this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
   }
+  //计算高度偏移后的坐标
+  calculateAltitudeOffsetPosition(
+    oldPosition: Cartesian3,
+    altitudeOffset: number,
+  ): Cartesian3 {
+    const newGeoPosition = cartesian3ToWGS84(oldPosition)
+    newGeoPosition[2] = newGeoPosition[2] + altitudeOffset
+    return Cartesian3.fromDegrees(
+      newGeoPosition[0],
+      newGeoPosition[1],
+      newGeoPosition[2],
+    )
+  }
   //创建追踪线
-  createTrackingLine(positions: Cartesian3[]) {
+  createTrackingLine(positions: Cartesian3[], color: Color = Color.GREEN) {
     return new Entity({
       polyline: {
         positions: new CallbackProperty(() => {
@@ -187,10 +265,10 @@ export default class CreatePolyline {
         }, false),
         width: 2,
         material: new PolylineDashMaterialProperty({
-          color: Color.GREEN,
+          color: color,
-          dashLength: 15, //短划线长度
+          dashLength: 12, //短划线长度
         }),
-        clampToGround: true,
+        // clampToGround: true,
       },
     })
   }

src/utils/map/geocomputation.ts

@@ -2,17 +2,12 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-22 15:42:49
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-13 10:49:17
+ * @LastEditTime: 2024-04-01 14:05:43
  * @Description: 地理计算
  */
-import {
+import {Cartesian3, Cartographic, EllipsoidGeodesic, Math as Cesium_Math, Matrix4, Transforms, Viewer} from 'cesium'
-  Cartesian3,
+import {Angle} from "@/utils/map/angle.ts";
-  Cartographic,
+
-  EllipsoidGeodesic,
-  Math as Cesium_Math,
-  Matrix4,
-  Transforms,
-} from 'cesium'
 /**
  * 计算空间中一点到一条直线的最短距离的交点（在不考虑地球曲率的情况下）
  * @param lineStart 直线的起点：[longitude1, latitude1, height1]
@@ -91,50 +86,42 @@ function isOnLineSegment(
   */
 }
 
+
 /**
- * 计算距离，单位米
+ * 计算距离，单位千米
  * @param p1 起点
  * @param p2 终点
  */
-function getDistance(p1: Cartesian3, p2: Cartesian3): number {
+function getDistance(p1:Cartesian3, p2: Cartesian3): number
-  let point1cartographic = Cartographic.fromCartesian(p1)
+{
-  let point2cartographic = Cartographic.fromCartesian(p2)
+  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
 }
 
 /**
  * 计算方位角，单位度
  * @param p1 起点
  * @param p2 终点
- * @param digits 保留小数位数，默认为保留1位小数
+ * @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(
+  const localPosition1 = Matrix4.multiplyByPoint(worldToLocalMatrix, p1, new Cartesian3())
-    worldToLocalMatrix,
-    p1,
-    new Cartesian3(),
-  )
   //p2在局部坐标系的位置
-  const localPosition2 = Matrix4.multiplyByPoint(
+  const localPosition2 = Matrix4.multiplyByPoint(worldToLocalMatrix, p2, new Cartesian3())
-    worldToLocalMatrix,
-    p2,
-    new Cartesian3(),
-  )
   //弧度
-  const angle = Math.atan2(
+  const angle = Math.atan2(localPosition2.x - localPosition1.x, localPosition2.y - localPosition1.y)
-    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)
 }
@@ -154,10 +141,25 @@ function getPolygonArea(vertexs: Cartesian3[]) {
   return Math.abs(area)
 }
 
-export {
+/**
-  getClosestPoint,
+ * 获取坐标点的海拔高度
-  isOnLineSegment,
+ * @param viewer 地图Viewer
-  getDistance,
+ * @param pos 坐标点 Cartographic|Cartesian3|[lon,lat]
-  getAzimuth,
+ */
-  getPolygonArea,
+export function getElevation(viewer: Viewer, pos: Cartographic|Cartesian3|number[]){
+  let cartographic = undefined
+  if(pos instanceof Array){
+     cartographic = Cartographic.fromDegrees(Angle.degree2rad(pos[0]), Angle.degree2rad(pos[1]))
+    return viewer.scene.globe.getHeight(cartographic)
+  }
+  else if(pos instanceof Cartesian3){
+    cartographic = Cartographic.fromCartesian(pos)
+    return viewer.scene.globe.getHeight(cartographic)
+  }
+  else{
+    return viewer.scene.globe.getHeight(pos)
+  }
 }
+
+
+export { getClosestPoint, isOnLineSegment, getDistance, getAzimuth, getPolygonArea }

src/utils/map/geometry/baseGeometry.ts

@@ -38,13 +38,10 @@ export abstract class BaseGeometry extends CustomDataSource {
    * 新增一个节点,默认插入在尾部，
    * @param pos 点坐标
    * @param index 插入的位置，0起步
+   * @param bAddControlPoint
    * @bAddControlPoint 是否添加控制点
    */
-  public addPoint(
+  public addPoint(pos: Cartesian3, index: number = -1, bAddControlPoint: boolean = true,) {
-    pos: Cartesian3,
-    index: number = -1,
-    bAddControlPoint: boolean = true,
-  ) {
     if (index === -1) {
       //插入尾部
       this.positions.push(pos)

src/utils/map/geometry/pointEntity.ts

@@ -2,10 +2,17 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-28 16:35:33
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-13 11:15:48
+ * @LastEditTime: 2024-04-16 13:57:15
  * @Description: 封装的点几何类
  */
-import { Entity, Cartesian3, Color, PointGraphics, LabelGraphics } from 'cesium'
+import {
+  Entity,
+  Cartesian3,
+  Color,
+  PointGraphics,
+  LabelGraphics,
+  HeightReference,
+} from 'cesium'
 import { EntityOptions } from '@/types/entityoptions'
 // 点
 class PointEntity extends Entity {
@@ -19,6 +26,7 @@ class PointEntity extends Entity {
     color: Color.WHITE,
     outlineColor: Color.GREEN,
     outlineWidth: 0,
+    // heightReference: HeightReference.NONE,
   }
   constructor(position: Cartesian3, options?: EntityOptions) {
     super({
@@ -31,6 +39,8 @@ class PointEntity extends Entity {
       color: this.options.color,
       outlineColor: this.options.outlineColor,
       outlineWidth: this.options.outlineWidth,
+      disableDepthTestDistance: 50000,
+      // heightReference: this.options.heightReference,
     })
     // 标注对象
     this.label = new LabelGraphics({

src/utils/map/geometry/polylineEntity.ts

@@ -2,10 +2,16 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-28 16:49:02
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-13 10:45:17
+ * @LastEditTime: 2024-04-16 11:12:08
  * @Description: 封装的Polyline类
  */
-import { Entity, Cartesian3, Color, CallbackProperty } from 'cesium'
+import {
+  Entity,
+  Cartesian3,
+  Color,
+  CallbackProperty,
+  PolylineDashMaterialProperty,
+} from 'cesium'
 import { BaseGeometry } from './baseGeometry'
 import { EntityOptions } from '@/types/entityoptions'
 export class PolylineEntity extends BaseGeometry {
@@ -35,6 +41,10 @@ export class PolylineEntity extends BaseGeometry {
         show: this.options.show,
         width: this.options.width,
         material: this.options.color,
+        // depthFailMaterial: new PolylineDashMaterialProperty({
+        //   color: Color.GREEN,
+        //   dashLength: 15, //短划线长度
+        // }),
       },
     })
     this.entities.add(this.geometry)

src/utils/map/geometry/textLabel.ts

@@ -0,0 +1,64 @@
+import {Cartesian3, Entity, Color, Viewer, Cartesian2, HorizontalOrigin, VerticalOrigin, HeightReference} from "cesium";
+
+/**
+ 文件描述：文本标注
+ 创建时间：2024/4/16 11:44
+ 创建人：Zhaipeixiu
+ */
+export type textLabelOptions = {
+ showBackground?: boolean,  //显示背景
+ backgroundColor?: Color, //背景色
+ backgroundPadding?: any,   //padding值
+ fillColor: Color,
+ horizontalOrigin?: any, //水平对齐方式
+ verticalOrigin?: any,   //竖直对齐方式
+ outlineColor?: any,
+ outlineWidth?: any
+}
+
+export class TextLabel{
+ _viewer: Viewer|undefined = undefined
+ _defaultStyle: textLabelOptions = {
+  showBackground: true, //显示背景
+  backgroundColor: Color.BLACK, //背景色
+  backgroundPadding: new Cartesian2(10, 10), //padding值
+  fillColor: Color.WHITE,
+  outlineColor: Color.WHITESMOKE,
+  outlineWidth: 1.0,
+  horizontalOrigin: HorizontalOrigin.CENTER,//对齐方式
+  verticalOrigin: VerticalOrigin.CENTER,
+ }
+ _cesiumLabel: Entity|undefined = undefined
+
+ // 构造函数，新建label并显示
+ constructor(viewer: Viewer, position: Cartesian3, text: string, options?: textLabelOptions) {
+  this._viewer = viewer
+  this._defaultStyle = {...this._defaultStyle, ...options}
+
+  this._cesiumLabel = new Entity({
+   position: position,
+   name: 'default',
+   label: {
+    text: text,
+    scale: .6,
+    pixelOffset:  new Cartesian2(20, -20),
+    showBackground: this._defaultStyle.showBackground, //显示背景
+    backgroundColor: this._defaultStyle.backgroundColor, //背景色
+    backgroundPadding: this._defaultStyle.backgroundPadding, //padding值
+    fillColor: this._defaultStyle.fillColor,
+    outlineColor: this._defaultStyle.outlineColor,
+    outlineWidth: this._defaultStyle.outlineWidth,
+    horizontalOrigin: this._defaultStyle.horizontalOrigin, //对齐方式
+    verticalOrigin: this._defaultStyle.verticalOrigin,
+    heightReference: HeightReference.CLAMP_TO_GROUND
+   }
+  })
+  this._viewer.entities.add(this._cesiumLabel)
+ }
+
+ //移除label
+ public remove(){
+  if(this._cesiumLabel !== undefined && this._viewer!==null)
+   this._viewer.entities.remove(this._cesiumLabel)
+ }
+}

src/utils/map/sceneViewer.ts

@@ -2,7 +2,7 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-13 09:32:21
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-13 10:49:06
+ * @LastEditTime: 2024-04-16 10:58:25
  * @Description:
  */
 // Viewer初始化
@@ -53,7 +53,7 @@ function initViewer(container: string | Element): Viewer {
   const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement
   creditContainer.style.display = 'none'
   // 开启深度检测
-  viewer.scene.globe.depthTestAgainstTerrain = false
+  viewer.scene.globe.depthTestAgainstTerrain = true
   // 水雾特效
   viewer.scene.globe.showGroundAtmosphere = true
   // 设置更高的缩放惯性以使缩放操作更平滑