feat: 添加geojson、kml接口，实现地形剖面分析的数值解算

src/components/map/BottomBar.vue

@@ -5,9 +5,10 @@
 -->
 <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 {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)
@@ -29,7 +30,7 @@ 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)+'m'?? '' : '高度过高'
+        let elevStr = needElevation? Cartographic.fromCartesian(position).height.toFixed(2)+'m'?? '' : '高度过高'
 
         if(isDecimal.value) {   //如果是十进制度
           lonlatStr.value = `经度: ${nowLonStr}°, 纬度: ${nowLatStr}°, 高度: ${elevStr}`
@@ -45,7 +46,6 @@ onMounted(()=>{
 
 function lonlatClick() {
   let elevStr = lonlatStr.value.split('高度')[1]
-  console.log(elevStr)
   if(isDecimal.value){
     lonlatStr.value = `经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)}, 高度` + elevStr
   }
@@ -53,6 +53,7 @@ function lonlatClick() {
     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>
 

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'
 const viewerDivRef = ref<HTMLDivElement>()
 let viewer: Viewer
@@ -65,7 +66,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

@@ -5,7 +5,9 @@
  * @LastEditTime: 2024-04-01 14:05:43
  * @Description: 地理计算
  */
-import {Cartesian3, Cartographic, EllipsoidGeodesic, Math as Cesium_Math, Matrix4, Transforms} from 'cesium'
+import {Cartesian3, Cartographic, EllipsoidGeodesic, Math as Cesium_Math, Matrix4, Transforms, Viewer} from 'cesium'
+import {Angle} from "@/utils/map/angle.ts";
+
 /**
  * 计算空间中一点到一条直线的最短距离的交点（在不考虑地球曲率的情况下）
  * @param lineStart 直线的起点：[longitude1, latitude1, height1]
@@ -104,7 +106,7 @@ function getDistance(p1:Cartesian3, p2: Cartesian3): number
  * 计算方位角，单位度
  * @param p1 起点
  * @param p2 终点
- * @param digits 保留小数位数，默认为保留1位小数
+ * @param digits 保留小数位数，默认保留1位小数
  */
 function getAzimuth(p1:Cartesian3, p2: Cartesian3, digits=1): string
 {
@@ -139,4 +141,25 @@ function getPolygonArea(vertexs: Cartesian3[]) {
   return Math.abs(area)
 }
 
+/**
+ * 获取坐标点的海拔高度
+ * @param viewer 地图Viewer
+ * @param pos 坐标点 Cartographic|Cartesian3|[lon,lat]
+ */
+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 }