Merge branch 'devzpx' into dev

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

src/components/map/BottomBar.vue

@@ -6,8 +6,7 @@
 <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'
+import {onMounted, ref} from "vue";
 let nowLatStr: string, nowLonStr: string
 let lonlatStr = ref('')
 let isDecimal = ref(true)
@@ -16,7 +15,7 @@ onMounted(() => {
   let _viewer = window.viewer
   let canvas =  _viewer.scene.canvas
   let handler = new ScreenSpaceEventHandler(canvas)
-  handler.setInputAction((e: ScreenSpaceEventHandler.MotionEvent) => {
+  handler.setInputAction((e:any)=> {
     //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
     // let position: any = _viewer.scene.pickPosition(e.endPosition)
     // if (!position) {
@@ -28,24 +27,20 @@ onMounted(() => {
     let position = cartesian2ToCartesian3(_viewer, e.endPosition)
     if (position) {
       //将笛卡尔三维坐标转为地图坐标（弧度）
-      let cartographic =
-        _viewer.scene.globe.ellipsoid.cartesianToCartographic(position)
+      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) ?? ''
-          : '' // 海拔
+        let needElevation: boolean = camera_alt < 250 && (_viewer.camera.pitch < -(Math.PI/180)*80)
+        let elevStr = needElevation? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2)?? '' : '' // 海拔
 
-        if (isDecimal.value) {
-          //如果是十进制度
+        if(isDecimal.value) {   //如果是十进制度
           lonlatStr.value = `经度：${nowLonStr} , 纬度：${nowLatStr} , 海拔(m)：${elevStr}`
-        } else {
+        }
+        else {
           lonlatStr.value = `经度：${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度：${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)：${elevStr}`
         }
       } catch (e) {}
@@ -56,12 +51,10 @@ onMounted(() => {
 function lonlatClick() {
   let elevStr = lonlatStr.value.split('海拔')[1]
   if(isDecimal.value){
-    lonlatStr.value =
-      `经度：${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度：${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)` +
-      elevStr
-  } else {
-    lonlatStr.value =
-      `经度：${nowLonStr} , 纬度：${nowLatStr} , 海拔(m)` + elevStr
+    lonlatStr.value = `经度：${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度：${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)` + elevStr
+  }
+  else {
+    lonlatStr.value = `经度：${nowLonStr} , 纬度：${nowLatStr} , 海拔(m)` + elevStr
   }
   isDecimal.value = !isDecimal.value
 }

src/components/styles/cesium-compass.css

@@ -52,8 +52,7 @@ screen and (max-height: 420px) {
     right: 1.8rem;
     top: 65vh;
     width: 2rem;
-    border: 1px solid rgba(255, 255, 255, 0.8);
-    border-radius: .3rem .3rem .3rem .3rem;
+    border-radius: .5rem .5rem .5rem .5rem;
     font-weight: 300;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -76,23 +75,27 @@ screen and (max-height: 420px) {
     position: relative;
     text-align: center;
     font-size: 1.2rem;
-    color: #FFFFFF;
+    color: #2c2c2c;
+    background: #FFFFFF;
+    border-radius: .5rem .5rem 0 0;
     padding-bottom: 4px;
 }
 .navigation-control-icon-zoom-in:hover {
-    background: rgba(204, 204, 204, 0.78);
-    border-radius: .3rem .3rem 0 0;
+    background: rgb(223, 223, 223);
+    border-radius: .5rem .5rem 0 0;
 }
 /* - 按钮*/
 .navigation-control-icon-zoom-out {
     position: relative;
     text-align: center;
     font-size: 1.4rem;
-    color: #FFFFFF;
+    background: #FFFFFF;
+    color: #2c2c2c;
+    border-radius: 0 0 .5rem .5rem;
 }
 .navigation-control-icon-zoom-out:hover {
-    background: rgba(204, 204, 204, 0.78);
-    border-radius: 0 0 .3rem .3rem;
+    background: rgb(223, 223, 223);
+    border-radius: 0 0 .5rem .5rem;
 }
 /* reset 按钮*/
 .navigation-control-icon-reset {
@@ -119,7 +122,7 @@ screen and (max-height: 420px) {
     top: 0;
     width: 6rem;;
     height: 6rem;;
-    fill: rgba(255, 255, 255, 0.5);
+    fill: #5b5b5b;
 }
 
 .compass-outer-ring-background {
@@ -129,7 +132,7 @@ screen and (max-height: 420px) {
     width: 44px;
     height: 44px;
     border-radius: 44px;
-    border: 12px solid rgba(47, 53, 60, 0.8);
+    border: 12px solid rgb(255, 255, 255);
     box-sizing: content-box;
 }
 
@@ -139,7 +142,7 @@ screen and (max-height: 420px) {
     top: 0;
     width: 95px;
     height: 95px;
-    fill: #faf6f6;
+    fill: #5b5b5b;
 }
 
 .compass-gyro-active {
@@ -153,7 +156,7 @@ screen and (max-height: 420px) {
     width: 2rem;
     height: 2rem;
     border-radius: 33px;
-    background-color: rgba(47, 53, 60, 0.8);
+    background-color: rgba(250, 250, 250, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.2);
     box-sizing: content-box;
 }

src/utils/DataIO.ts

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

src/utils/map/angle.ts

@@ -1,3 +1,6 @@
+import {getAzimuth} from "@/utils/map/geocomputation.ts";
+import {Cartesian3} from "cesium";
+
 class Angle {
     constructor() {}
 
@@ -8,32 +11,47 @@ class Angle {
      */
     static DecimalDegree2DMS(decimal_var: number|string){
         if(!decimal_var.toString().includes('.'))
-      return decimal_var.toString() + "°0'0''"
+            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
+            let minutes = Number(decimalStr[1]) / Math.pow(10,decimalStr[1].length) * 60
             if(!minutes.toString().includes('.'))
-        return degreeStr + '°' + minutes.toString() + "'0''"
+                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) +
-          "''"
-        )
+                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
+    }
+
 }
 
 export { Angle }

src/utils/map/geocomputation.ts

@@ -5,7 +5,7 @@
  * @LastEditTime: 2024-04-01 14:05:43
  * @Description: 地理计算
  */
-import { Cartesian3, Math as Cesium_Math } from 'cesium'
+import {Cartesian3, Cartographic, EllipsoidGeodesic, Math as Cesium_Math, Matrix4, Transforms} from 'cesium'
 /**
  * 计算空间中一点到一条直线的最短距离的交点（在不考虑地球曲率的情况下）
  * @param lineStart 直线的起点：[longitude1, latitude1, height1]
@@ -84,4 +84,59 @@ function isOnLineSegment(
   */
 }
 
-export { getClosestPoint, isOnLineSegment }
+
+/**
+ * 计算距离，单位米
+ * @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 }