feat: 增加距离测量、面积测量、方位角计算方法

src/components/map/BottomBar.vue

@@ -30,7 +30,7 @@ onMounted(()=>{
         nowLonStr = Math.toDegrees(cartographic.longitude).toFixed(7) // 经度
         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 = camera_alt < 250 && (_viewer.camera.pitch < Angle.degree2rad(-80))
         let elevStr = needElevation? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2)?? '' : '' // 海拔
 
         if(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() {}
 
@@ -23,8 +26,32 @@ class Angle {
         }
         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]
@@ -85,4 +85,58 @@ 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 }