Merge branch 'devzpx' into dev

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

src/components/map/BottomBar.vue

@@ -5,40 +5,37 @@
 -->
 <script setup lang="ts">
 import { Angle } from '@/utils/map/angle.ts'
-import { ScreenSpaceEventHandler, Math, ScreenSpaceEventType } from 'cesium'
+import {ScreenSpaceEventHandler, Math, ScreenSpaceEventType, Cartesian3, 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";
+import {elevationProfile} from "@/utils/map/SpatialAnalysis.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 =
+      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,15 +46,14 @@ 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
+  elevationProfile(window.viewer, Cartesian3.fromDegrees(119.0,30.05),Cartesian3.fromDegrees(119.05,30.0),500)
 }
 </script>
 
@@ -86,13 +82,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

@@ -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,7 +67,7 @@ onMounted(() => {
 
   // 挂载在window，供全局组件共享
   window.viewer = viewer
-
+  inputGeoJson(viewer)
   //绘制多边形
   // const drawPolyline = new CreatePolyline(viewer)
   // drawPolyline.start()

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/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 }