From 32c024787038847a4c1a204a35248ca852fa48c6 Mon Sep 17 00:00:00 2001
From: zhaipx <zhaipeixiu@htsdfp.com>
Date: Thu, 11 Apr 2024 11:04:47 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=9D=A1=EF=BC=8C=E6=81=A2=E5=A4=8D=E7=BD=97=E7=9B=98=E6=B7=B1?=
 =?UTF-8?q?=E8=89=B2=E9=80=8F=E6=98=8E=E6=A0=B7=E5=BC=8F=EF=BC=8C=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E7=9B=B8=E6=9C=BA=E5=88=9D=E5=A7=8B=E8=A7=86=E8=A7=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   2 +-
 src/components/map/BottomBar.vue              |  26 +-
 src/components/map/SceneViewer.vue            |   4 +-
 .../styles/cesium-compass.css                 | 382 +++++++++---------
 src/utils/map/camera.ts                       |   4 +-
 src/utils/map/sceneViewer.ts                  |   4 +-
 6 files changed, 207 insertions(+), 215 deletions(-)
 rename src/{components => }/styles/cesium-compass.css (81%)

diff --git a/src/App.vue b/src/App.vue
index e030980..e64afae 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,7 @@ import BottomBar from '@/components/map/BottomBar.vue'
 </script>
 
 <style>
-@import 'components/styles/cesium-compass.css';
+@import 'styles/cesium-compass.css';
 #map {
   width: 100vw;
   height: 100vh;
diff --git a/src/components/map/BottomBar.vue b/src/components/map/BottomBar.vue
index 2dcf03b..7d1aa18 100644
--- a/src/components/map/BottomBar.vue
+++ b/src/components/map/BottomBar.vue
@@ -7,6 +7,7 @@
 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";
 let nowLatStr: string, nowLonStr: string
 let lonlatStr = ref('')
 let isDecimal = ref(true)
@@ -17,13 +18,6 @@ onMounted(()=>{
   let handler = new ScreenSpaceEventHandler(canvas)
   handler.setInputAction((e:any)=> {
     //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
-    // let position: any = _viewer.scene.pickPosition(e.endPosition)
-    // if (!position) {
-    //   position = _viewer.scene.camera.pickEllipsoid(
-    //     e.startPosition,
-    //     _viewer.scene.globe.ellipsoid,
-    //   )
-    // }
     let position = cartesian2ToCartesian3(_viewer, e.endPosition)
     if (position) {
       //将笛卡尔三维坐标转为地图坐标（弧度）
@@ -35,13 +29,14 @@ onMounted(()=>{
         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 elevStr = needElevation? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2)+'m'?? '' : '高度过高'
 
         if(isDecimal.value) {   //如果是十进制度
-          lonlatStr.value = `经度：${nowLonStr} , 纬度：${nowLatStr} , 海拔(m)：${elevStr}`
+          lonlatStr.value = `经度: ${nowLonStr}°, 纬度: ${nowLatStr}°, 高度: ${elevStr}`
         }
         else {
-          lonlatStr.value = `经度：${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度：${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)：${elevStr}`
+          lonlatStr.value = `经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)},
+          高度: ${elevStr}`
         }
       } catch (e) {}
     }
@@ -49,12 +44,13 @@ onMounted(()=>{
 })
 
 function lonlatClick() {
-  let elevStr = lonlatStr.value.split('海拔')[1]
+  let elevStr = lonlatStr.value.split('高度')[1]
+  console.log(elevStr)
   if(isDecimal.value){
-    lonlatStr.value = `经度：${Angle.DecimalDegree2DMS(nowLonStr)} , 纬度：${Angle.DecimalDegree2DMS(nowLatStr)} , 海拔(m)` + elevStr
+    lonlatStr.value = `经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)}, 高度` + elevStr
   }
   else {
-    lonlatStr.value = `经度：${nowLonStr} , 纬度：${nowLatStr} , 海拔(m)` + elevStr
+    lonlatStr.value = `经度: ${nowLonStr}°, 纬度: ${nowLatStr}°, 高度` + elevStr
   }
   isDecimal.value = !isDecimal.value
 }
@@ -74,7 +70,7 @@ function lonlatClick() {
   bottom: 1px;
   left: 0;
   width: 100vw;
-  height: 2.3rem;
+  height: 1.7rem;
   background-color: rgba(47, 53, 60, 0.8);
   color: #fff;
   font-size: 0.7rem;
@@ -83,9 +79,9 @@ function lonlatClick() {
   padding: 0;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 #lonlatText{
-  margin-left: 2rem;
   background: none;
   border: none;
   color: #ffffff;
diff --git a/src/components/map/SceneViewer.vue b/src/components/map/SceneViewer.vue
index ff931e6..8fde3dc 100644
--- a/src/components/map/SceneViewer.vue
+++ b/src/components/map/SceneViewer.vue
@@ -39,7 +39,7 @@ Ion.defaultAccessToken =
 //     60.0, // 北纬
 //   )
 
-onMounted(async () => {
+onMounted( () => {
   //初始化
   viewer = initViewer(viewerDivRef.value as HTMLElement)
   // 性能优化
@@ -61,7 +61,7 @@ onMounted(async () => {
   viewer.terrainProvider = getTDTTerrainProvider()
   // 标记点图层，存储所有地标点
   const markerLayer = new CustomDataSource('Marker')
-  await viewer.dataSources.add(markerLayer)
+  viewer.dataSources.add(markerLayer)
 
   // 挂载在window，供全局组件共享
   window.viewer = viewer
diff --git a/src/components/styles/cesium-compass.css b/src/styles/cesium-compass.css
similarity index 81%
rename from src/components/styles/cesium-compass.css
rename to src/styles/cesium-compass.css
index ef34d47..6fc10ee 100644
--- a/src/components/styles/cesium-compass.css
+++ b/src/styles/cesium-compass.css
@@ -1,193 +1,189 @@
-/*重写比例尺、罗盘、缩放控件样式 */
-
-/*比例尺背景*/
-.distance-legend {
-    position: absolute;
-    padding-left: 0;
-    padding-right: 0;
-    right: .1rem;
-    height: 2rem;
-    bottom: .2rem;
-    font-weight: bolder;
-    box-sizing: content-box;
-    z-index: 2;
-}
-/*比例尺文本*/
-.distance-legend-label {
-    display: inline-block;
-    font-family: 'Roboto', sans-serif;
-    padding-left: .5rem;
-    font-size: .9rem;
-    line-height: 1rem;
-    color: #FFFFFF;
-    width: 7.5rem;
-    text-align: center;
-}
-/*比例尺线段*/
-.distance-legend-scale-bar {
-    border-left: .1rem solid #FFFFFF;
-    border-right: .1rem solid #FFFFFF;
-    border-bottom: .1rem solid #FFFFFF;
-    position: absolute;
-    height: .7rem;
-    top: 1rem;
-}
-
-@media print {
-    .distance-legend {
-        display: none;
-    }
-}
-
-@media screen and (max-width: 700px),
-screen and (max-height: 420px) {
-    .distance-legend {
-        display: none;
-    }
-}
-
-/*缩放按钮外边框*/
-.navigation-controls {
-    position: absolute;
-    right: 1.8rem;
-    top: 65vh;
-    width: 2rem;
-    border-radius: .5rem .5rem .5rem .5rem;
-    font-weight: 300;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.naviagation-control:active {
-    color: #FFF;
-}
-
-.navigation-control-last {
-    cursor: pointer;
-    border-bottom: 1px solid #b5b4b4;
-    border-bottom: 0;
-}
-/* + 按钮*/
-.navigation-control-icon-zoom-in {
-    position: relative;
-    text-align: center;
-    font-size: 1.2rem;
-    color: #2c2c2c;
-    background: #FFFFFF;
-    border-radius: .5rem .5rem 0 0;
-    padding-bottom: 4px;
-}
-.navigation-control-icon-zoom-in:hover {
-    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;
-    background: #FFFFFF;
-    color: #2c2c2c;
-    border-radius: 0 0 .5rem .5rem;
-}
-.navigation-control-icon-zoom-out:hover {
-    background: rgb(223, 223, 223);
-    border-radius: 0 0 .5rem .5rem;
-}
-/* reset 按钮*/
-.navigation-control-icon-reset {
-    position: relative;
-    height: 0;
-    fill: rgba(255, 255, 255, 0.8);
-    padding: 0 0 0 0;   /* 显示reset按钮： padding: 0 0 1.5rem 0; */
-    box-sizing: content-box;
-}
-
-/*罗盘*/
-.compass {
-    pointer-events: auto;
-    position: absolute;
-    right: 0;
-    top: 50vh;
-    width: 6rem;
-    height: 6rem;
-    overflow: hidden;
-}
-
-.compass-outer-ring {
-    position: absolute;
-    top: 0;
-    width: 6rem;;
-    height: 6rem;;
-    fill: #5b5b5b;
-}
-
-.compass-outer-ring-background {
-    position: absolute;
-    top: 14px;
-    left: 14px;
-    width: 44px;
-    height: 44px;
-    border-radius: 44px;
-    border: 12px solid rgb(255, 255, 255);
-    box-sizing: content-box;
-}
-
-.compass-gyro {
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    width: 95px;
-    height: 95px;
-    fill: #5b5b5b;
-}
-
-.compass-gyro-active {
-    fill: #68ADFE;
-}
-
-.compass-gyro-background {
-    position: absolute;
-    top: 31px;
-    left: 31px;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 33px;
-    background-color: rgba(250, 250, 250, 0.8);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-sizing: content-box;
-}
-
-.compass-gyro-background:hover+.compass-gyro {
-    fill: #68ADFE;
-}
-
-.compass-rotation-marker {
-    position: absolute;
-    top: 0;
-    width: 95px;
-    height: 95px;
-    fill: #68ADFE;
-}
-
-@media screen and (max-width: 700px),
-screen and (max-height: 420px) {
-    .navigation-controls {
-        display: none;
-    }
-    .compass {
-        display: none;
-    }
-}
-
-@media print {
-    .navigation-controls {
-        display: none;
-    }
-    .compass {
-        display: none;
-    }
-}
+/*重写比例尺、罗盘、缩放控件样式 */
+
+/*比例尺背景*/
+.distance-legend {
+    position: absolute;
+    padding-left: 0;
+    padding-right: 0;
+    right: .1rem;
+    height: 2rem;
+    bottom: .2rem;
+    font-weight: bolder;
+    box-sizing: content-box;
+    z-index: 2;
+}
+/*比例尺文本*/
+.distance-legend-label {
+    display: inline-block;
+    font-family: 'Roboto', sans-serif;
+    padding-left: .5rem;
+    font-size: .8rem;
+    color: #FFFFFF;
+    width: 7.5rem;
+    text-align: center;
+}
+/*比例尺线段*/
+.distance-legend-scale-bar {
+    border-left: .1rem solid #FFFFFF;
+    border-right: .1rem solid #FFFFFF;
+    border-bottom: .1rem solid #FFFFFF;
+    position: absolute;
+    height: .7rem;
+    top: 1rem;
+}
+
+@media print {
+    .distance-legend {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 700px),
+screen and (max-height: 420px) {
+    .distance-legend {
+        display: none;
+    }
+}
+
+/*缩放按钮外边框*/
+.navigation-controls {
+    position: absolute;
+    right: 1.8rem;
+    top: 65vh;
+    width: 2rem;
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    border-radius: .3rem .3rem .3rem .3rem;
+    font-weight: 300;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.naviagation-control:active {
+    color: #FFF;
+}
+
+.navigation-control-last {
+    cursor: pointer;
+    border-bottom: 1px solid #b5b4b4;
+    border-bottom: 0;
+}
+/* + 按钮*/
+.navigation-control-icon-zoom-in {
+    position: relative;
+    text-align: center;
+    font-size: 1.2rem;
+    color: #FFFFFF;
+    padding-bottom: 4px;
+}
+.navigation-control-icon-zoom-in:hover {
+    background: rgba(204, 204, 204, 0.78);
+    border-radius: .3rem .3rem 0 0;
+}
+/* - 按钮*/
+.navigation-control-icon-zoom-out {
+    position: relative;
+    text-align: center;
+    font-size: 1.4rem;
+    color: #FFFFFF;
+}
+.navigation-control-icon-zoom-out:hover {
+    background: rgba(204, 204, 204, 0.78);
+    border-radius: 0 0 .3rem .3rem;
+}
+/* reset 按钮*/
+.navigation-control-icon-reset {
+    position: relative;
+    height: 0;
+    fill: rgba(255, 255, 255, 0.8);
+    padding: 0 0 0 0;   /* 显示reset按钮： padding: 0 0 1.5rem 0; */
+    box-sizing: content-box;
+}
+
+/*罗盘*/
+.compass {
+    pointer-events: auto;
+    position: absolute;
+    right: 0;
+    top: 50vh;
+    width: 6rem;
+    height: 6rem;
+    overflow: hidden;
+}
+
+.compass-outer-ring {
+    position: absolute;
+    top: 0;
+    width: 6rem;;
+    height: 6rem;;
+    fill: rgba(255, 255, 255, 0.5);
+}
+
+.compass-outer-ring-background {
+    position: absolute;
+    top: 14px;
+    left: 14px;
+    width: 44px;
+    height: 44px;
+    border-radius: 44px;
+    border: 12px solid rgba(47, 53, 60, 0.8);
+    box-sizing: content-box;
+}
+
+.compass-gyro {
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 95px;
+    height: 95px;
+    fill: #faf6f6;
+}
+
+.compass-gyro-active {
+    fill: #68ADFE;
+}
+
+.compass-gyro-background {
+    position: absolute;
+    top: 31px;
+    left: 31px;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 33px;
+    background-color: rgba(47, 53, 60, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-sizing: content-box;
+}
+
+.compass-gyro-background:hover+.compass-gyro {
+    fill: #68ADFE;
+}
+
+.compass-rotation-marker {
+    position: absolute;
+    top: 0;
+    width: 95px;
+    height: 95px;
+    fill: #68ADFE;
+}
+
+@media screen and (max-width: 700px),
+screen and (max-height: 420px) {
+    .navigation-controls {
+        display: none;
+    }
+    .compass {
+        display: none;
+    }
+}
+
+@media print {
+    .navigation-controls {
+        display: none;
+    }
+    .compass {
+        display: none;
+    }
+}
diff --git a/src/utils/map/camera.ts b/src/utils/map/camera.ts
index bb60749..bb7f44f 100644
--- a/src/utils/map/camera.ts
+++ b/src/utils/map/camera.ts
@@ -8,8 +8,8 @@ function flyToChina(viewer: Viewer) {
   viewer.camera.flyTo({
     destination: Cartesian3.fromDegrees(103.84, 31.15, 10350000),
     orientation: {
-      heading: Math.toRadians(348.4202942851978),
-      pitch: Math.toRadians(-89.74026687972041),
+      heading: Math.toRadians(0),
+      pitch: Math.toRadians(-90),
       roll: Math.toRadians(0),
     },
     complete: function callback() {
diff --git a/src/utils/map/sceneViewer.ts b/src/utils/map/sceneViewer.ts
index f34ed52..ddffcfb 100644
--- a/src/utils/map/sceneViewer.ts
+++ b/src/utils/map/sceneViewer.ts
@@ -53,14 +53,14 @@ 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
   // 设置更高的缩放惯性以使缩放操作更平滑
   viewer.scene.screenSpaceCameraController.inertiaZoom = 0.9
   // 限制相机缩放
   viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200 //相机的高度的最小值
-  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000 //相机高度的最大值
+  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 10350000 //相机高度的最大值
   // 设置设备像素比，可能会影响渲染性能
   // viewer.resolutionScale = window.devicePixelRatio
   // 视图重绘后确保清晰度