Merge branch 'devzpx' into dev

# Conflicts:
#	src/components/map/BottomBar.vue
#	src/utils/DataIO.ts
#	src/utils/map/geocomputation.ts
pull/8/head
zhaipx 11 months ago
commit 2c45764989

File diff suppressed because one or more lines are too long

@ -5,40 +5,37 @@
-->
<script setup lang="ts">
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'
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)
onMounted(() => {
onMounted(()=>{
let _viewer = window.viewer
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 =
_viewer.scene.globe.ellipsoid.cartesianToCartographic(position)
try {
let cartographic = _viewer.scene.globe.ellipsoid.cartesianToCartographic(position);
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 =
camera_alt < 250 && _viewer.camera.pitch < -(Math.PI / 180) * 80
let elevStr = needElevation
? _viewer.scene.globe.getHeight(cartographic)?.toFixed(2) + 'm' ?? ''
: '高度过高'
let needElevation: boolean = camera_alt < 250 && (_viewer.camera.pitch < -(Math.PI/180)*80)
let elevStr = needElevation? Cartographic.fromCartesian(position).height.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) {
lonlatStr.value =
`经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)}, 高度` +
elevStr
} else {
if(isDecimal.value){
lonlatStr.value = `经度: ${Angle.DecimalDegree2DMS(nowLonStr)}, 纬度: ${Angle.DecimalDegree2DMS(nowLatStr)}, 高度` + 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>

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

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

@ -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 {
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]
@ -91,50 +86,42 @@ function isOnLineSegment(
*/
}
/**
*
* @param p1
* @param p2
*/
function getDistance(p1: Cartesian3, p2: Cartesian3): number {
let point1cartographic = Cartographic.fromCartesian(p1)
let point2cartographic = Cartographic.fromCartesian(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
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东为xp1为原点
const localMatrix = Transforms.eastNorthUpToFixedFrame(p1)
//求世界坐标到局部坐标的变换矩阵
const worldToLocalMatrix = Matrix4.inverse(localMatrix, new Matrix4())
//p1在局部坐标系的位置即局部坐标原点
const localPosition1 = Matrix4.multiplyByPoint(
worldToLocalMatrix,
p1,
new Cartesian3(),
)
const localPosition1 = Matrix4.multiplyByPoint(worldToLocalMatrix, p1, new Cartesian3())
//p2在局部坐标系的位置
const localPosition2 = Matrix4.multiplyByPoint(
worldToLocalMatrix,
p2,
new Cartesian3(),
)
const localPosition2 = Matrix4.multiplyByPoint(worldToLocalMatrix, p2, new Cartesian3())
//弧度
const angle = Math.atan2(
localPosition2.x - localPosition1.x,
localPosition2.y - localPosition1.y,
)
const angle = Math.atan2(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,
getDistance,
getAzimuth,
getPolygonArea,
/**
*
* @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