src/components/map/BottomBar.vue

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

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-16 19:06:50
+ * @LastEditTime: 2024-04-15 16:00:27
  * @Description:
 -->
 <template>
@@ -22,7 +22,6 @@ 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>()
@@ -67,12 +66,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

@@ -1,16 +0,0 @@
-<!--
-  文件描述：工具条
-  创建时间：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-16 13:47:55
+ * @LastEditTime: 2024-04-13 11:14:53
  * @Description:
  */
-import { Color, Cartesian2, HeightReference } from 'cesium'
+import { Color, Cartesian2 } from 'cesium'
 export interface EntityOptions {
   id?: string
   name?: string
@@ -23,5 +23,4 @@ export interface EntityOptions {
   image?: string //图片url
   imageWidth?: number //图片宽
   imageHeight?: number //图片高
-  heightReference?: HeightReference
 }

src/utils/DataIO.ts

@@ -1,24 +1,5 @@
-/**
+/*
- 文件描述：数据输入输出工具。文件写入必须通过后端实现。
+ * @Author: zhaipx
- 创建时间：2024/4/11 13:33
+ * @Date: {2024/4/11}
- 创建人：Zhaipeixiu
+ * @Description:
  */
-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

@@ -1,41 +0,0 @@
-/**
- 文件描述：空间分析方法
- 创建时间：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,20 +6,19 @@
  * @Description: 绘制多边形
  */
 import {
-  CallbackProperty,
+  Viewer,
+  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 {getPolygonArea} from "@/utils/map/geocomputation.ts";
+import { PointEntity } from '@/utils/map/geometry/pointEntity'
-import {TextLabel} from "@/utils/map/geometry/textLabel.ts";
+import EditGeometry from '@/utils/map/draw/editGeometry'
 
 export class DrawPolygon {
   viewer: Viewer
@@ -29,11 +28,9 @@ export class DrawPolygon {
   trackingLine: Entity | null
   trackingLinePositions: Cartesian3[] = []
   bMove: boolean = false
-  bMeasure = false
   bLongClick: boolean = false
-  constructor(viewer: Viewer, isMeasure: boolean=false) {
+  constructor(viewer: Viewer) {
     this.viewer = viewer
-    this.bMeasure = isMeasure
     this.handler = new ScreenSpaceEventHandler(viewer.scene.canvas)
     this.polygon = null
     this.trackingLine = null
@@ -133,22 +130,17 @@ export class DrawPolygon {
       }
     }
   }
-
   //左双击回调事件
-  private leftDoubleClickCallBack = (event: ScreenSpaceEventHandler.PositionedEvent) => {
+  private leftDoubleClickCallBack = (
+    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({
@@ -165,15 +157,4 @@ 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-16 19:00:18
+ * @LastEditTime: 2024-04-13 10:46:58
  * @Description: 绘制Polyline类
  */
 import {
@@ -14,19 +14,12 @@ import {
   Entity,
   CallbackProperty,
   PolylineDashMaterialProperty,
-  HeightReference,
 } from 'cesium'
-import {
+import { cartesian2ToCartesian3 } from '@/utils/map/coordinate'
-  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
@@ -51,12 +44,8 @@ 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),
@@ -65,18 +54,13 @@ export default class CreatePolyline {
     width: 2,
     color: Color.GREEN,
   }
-  constructor(
+  constructor(viewer: Viewer, options?: EntityOptions) {
-    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 }
   }
@@ -106,23 +90,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')
       }
     }
-    let cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
+    const cartesian3 = cartesian2ToCartesian3(this.viewer, event.position)
     if (cartesian3 != undefined) {
       if (!this.polyline) {
         this.polyline = new PolylineEntity(this.positions)
@@ -130,60 +114,18 @@ 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) {
-      let cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
+      const cartesian3 = cartesian2ToCartesian3(this.viewer, event.endPosition)
       if (cartesian3 != undefined) {
-        //计算高度偏移后的新坐标
-        cartesian3 = this.calculateAltitudeOffsetPosition(
-          cartesian3,
-          this.altitudeOffset,
-        )
         //更新追踪线坐标
         this.trackingLinePositions[1] = cartesian3
         if (!this.trackingLine) {
@@ -201,7 +143,10 @@ 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) {
@@ -211,18 +156,9 @@ 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!)
@@ -237,27 +173,13 @@ 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[], color: Color = Color.GREEN) {
+  createTrackingLine(positions: Cartesian3[]) {
     return new Entity({
       polyline: {
         positions: new CallbackProperty(() => {
@@ -265,10 +187,10 @@ export default class CreatePolyline {
         }, false),
         width: 2,
         material: new PolylineDashMaterialProperty({
-          color: color,
+          color: Color.GREEN,
-          dashLength: 12, //短划线长度
+          dashLength: 15, //短划线长度
         }),
-        // clampToGround: true,
+        clampToGround: true,
       },
     })
   }

src/utils/map/geocomputation.ts

@@ -2,12 +2,17 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-22 15:42:49
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-01 14:05:43
+ * @LastEditTime: 2024-04-13 10:49:17
  * @Description: 地理计算
  */
-import {Cartesian3, Cartographic, EllipsoidGeodesic, Math as Cesium_Math, Matrix4, Transforms, Viewer} from 'cesium'
+import {
-import {Angle} from "@/utils/map/angle.ts";
+  Cartesian3,
-
+  Cartographic,
+  EllipsoidGeodesic,
+  Math as Cesium_Math,
+  Matrix4,
+  Transforms,
+} from 'cesium'
 /**
  * 计算空间中一点到一条直线的最短距离的交点（在不考虑地球曲率的情况下）
  * @param lineStart 直线的起点：[longitude1, latitude1, height1]
@@ -86,42 +91,50 @@ 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 point1cartographic = Cartographic.fromCartesian(p1);
+  let point2cartographic = Cartographic.fromCartesian(p2)
-  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(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)
 }
@@ -141,25 +154,10 @@ function getPolygonArea(vertexs: Cartesian3[]) {
   return Math.abs(area)
 }
 
-/**
+export {
- * 获取坐标点的海拔高度
+  getClosestPoint,
- * @param viewer 地图Viewer
+  isOnLineSegment,
- * @param pos 坐标点 Cartographic|Cartesian3|[lon,lat]
+  getDistance,
- */
+  getAzimuth,
-export function getElevation(viewer: Viewer, pos: Cartographic|Cartesian3|number[]){
+  getPolygonArea,
-  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,10 +38,13 @@ export abstract class BaseGeometry extends CustomDataSource {
    * 新增一个节点,默认插入在尾部，
    * @param pos 点坐标
    * @param index 插入的位置，0起步
-   * @param bAddControlPoint
    * @bAddControlPoint 是否添加控制点
    */
-  public addPoint(pos: Cartesian3, index: number = -1, bAddControlPoint: boolean = true,) {
+  public addPoint(
+    pos: Cartesian3,
+    index: number = -1,
+    bAddControlPoint: boolean = true,
+  ) {
     if (index === -1) {
       //插入尾部
       this.positions.push(pos)

src/utils/map/geometry/pointEntity.ts

@@ -2,17 +2,10 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-28 16:35:33
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-16 13:57:15
+ * @LastEditTime: 2024-04-13 11:15:48
  * @Description: 封装的点几何类
  */
-import {
+import { Entity, Cartesian3, Color, PointGraphics, LabelGraphics } from 'cesium'
-  Entity,
-  Cartesian3,
-  Color,
-  PointGraphics,
-  LabelGraphics,
-  HeightReference,
-} from 'cesium'
 import { EntityOptions } from '@/types/entityoptions'
 // 点
 class PointEntity extends Entity {
@@ -26,7 +19,6 @@ class PointEntity extends Entity {
     color: Color.WHITE,
     outlineColor: Color.GREEN,
     outlineWidth: 0,
-    // heightReference: HeightReference.NONE,
   }
   constructor(position: Cartesian3, options?: EntityOptions) {
     super({
@@ -39,8 +31,6 @@ 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,16 +2,10 @@
  * @Author: cbwu 504-wuchengbo@htsdfp.com
  * @Date: 2024-03-28 16:49:02
  * @LastEditors: cbwu
- * @LastEditTime: 2024-04-16 11:12:08
+ * @LastEditTime: 2024-04-13 10:45:17
  * @Description: 封装的Polyline类
  */
-import {
+import { Entity, Cartesian3, Color, CallbackProperty } from 'cesium'
-  Entity,
-  Cartesian3,
-  Color,
-  CallbackProperty,
-  PolylineDashMaterialProperty,
-} from 'cesium'
 import { BaseGeometry } from './baseGeometry'
 import { EntityOptions } from '@/types/entityoptions'
 export class PolylineEntity extends BaseGeometry {
@@ -41,10 +35,6 @@ 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

@@ -1,64 +0,0 @@
-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-16 10:58:25
+ * @LastEditTime: 2024-04-13 10:49:06
  * @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 = true
+  viewer.scene.globe.depthTestAgainstTerrain = false
   // 水雾特效
   viewer.scene.globe.showGroundAtmosphere = true
   // 设置更高的缩放惯性以使缩放操作更平滑