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

pull/8/head
zhaipx 11 months ago
parent 32c0247870
commit aa6d6a3105

File diff suppressed because one or more lines are too long

@ -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>

@ -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()

@ -1,5 +1,24 @@
/*
* @Author: zhaipx
* @Date: {2024/4/11}
* @Description:
/**
2024/4/11 13:33
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);
})
}

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

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

Loading…
Cancel
Save