ChenZhuo
/
GCSGUI
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature: 气象信息高度层显示、航点label增加，视觉优化

Browse Source
devzpx
zhaipx 7 months ago
parent 1974872153
commit 4c200020a3
8 changed files with 290 additions and 199 deletions
Show Stats Download Patch File Download Diff File

8
src/App.vue
Unescape Escape View File

@ -1,9 +1,11 @@
<template>
<n-message-provider>
<n-dialog-provider>
<n-modal-provider>
<RouterView/>
</n-modal-provider>
<n-notification-provider>
<n-modal-provider>
<RouterView/>
</n-modal-provider>
</n-notification-provider>
</n-dialog-provider>
</n-message-provider>
</template>

19
src/assets/js/RouteManageViewer.js
Unescape Escape View File

@ -3,11 +3,11 @@ import * as Cesium from 'cesium'
export default class RouteManageViewer {
constructor(viewer, isClose) {
constructor(viewer) {
this.viewer = viewer
this.scene = viewer.scene
this.routeParams = {
isClose: isClose,
isClose: false,
height: 0,
}
this.positions = []
@ -48,7 +48,7 @@ export default class RouteManageViewer {
this.viewer.entities.add(airlineEntity)
degreesArr.forEach((pt,index)=>{
let vertexEntity = new Cesium.Entity({
id: line.unicode + "-航点" + index,
id: line.unicode + "-航点" + (index+1),
position: pt,
point: {
color: Cesium.Color.WHITE,
@ -57,6 +57,19 @@ export default class RouteManageViewer {
outlineWidth: 2,
disableDepthTestDistance:99000000,
// heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
},
label:{
text: "航点 " + (index+1),
font: "2.5rem sans-serif",
fillColor: Cesium.Color.WHITE,
style: Cesium.LabelStyle.FILL,
eyeOffset: new Cartesian3(0,0,50),
horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
verticalOrigin: Cesium.VerticalOrigin.TOP,
scale: 0.4,
showBackground: true,
backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.99),
backgroundPadding: new Cesium.Cartesian2(15, 7),
}
});
this.viewer.entities.add(vertexEntity)

1
src/assets/js/measureViewer.js
Unescape Escape View File

@ -510,7 +510,6 @@ export default class MeasureViewer {
this._showResultArea()
this.stopAreaMeasure()
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
}
_showResultArea(){

153
src/assets/js/weatherCharts.ts
Unescape Escape View File

@ -0,0 +1,153 @@
import * as echarts from "echarts";
import {EChartsType} from "echarts";
/**
* 天气图表Echarts的配置函数
* @param wChart 图表对象
* @param timeSeries 时间序列
* @param temp 温度
* @param windSpeed 风速
* @param wind360 风向
* @param precip 降水
* @param humidity 湿度（暂未使用）
*/
export const setChartOptions = (wChart: EChartsType, timeSeries:string[], temp: number[], windSpeed:number[],
wind360: number[], precip:number[], humidity?:number[]) =>{
let windDirection = wind360.map(item=>{
let arr = [22.5, 22.5+45, 22.5+45*2, 22.5+45*3, 22.5+45*4, 22.5+45*5, 22.5+45*6, 22.5+45*7]
let str = ['北风','东北风','东风','东南风','南风','西南风','西风','西北风']
if(item<=arr[0] || item>arr[7]){
return str[0]+': '+ Math.round(item)+'°'
}else if(arr[0] <=item && item<=arr[1]){
return str[1]+' : '+ Math.round(item)+'°'
}else if(arr[1] <=item && item<=arr[2]){
return str[2]+' : '+ Math.round(item)+'°'
}else if(arr[2] <=item && item<=arr[3]){
return str[3]+' : '+ Math.round(item)+'°'
}else if(arr[3] <=item && item<=arr[4]){
return str[4]+' : '+ Math.round(item)+'°'
}else if(arr[4] <=item && item<=arr[5]){
return str[5]+' : '+ Math.round(item)+'°'
}else if(arr[5] <=item && item<=arr[6]){
return str[6]+' : '+ Math.round(item)+'°'
}else if(arr[6] <=item && item<=arr[7]){
return str[7]+' : '+ Math.round(item)+'°'
}
})
let colors = ['#5470C6', '#91CC75', '#EE6666'];
wChart.setOption({
backgroundColor:'#101014',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
}
},
color: colors,
grid: [
{x: '7%', y: '7%', height: '40%', left: '12%',right: '15%'},
{x: '7%', y2: '7%', height: '38%', left: '12%',right: '15%', bottom: '10%'}
],
legend: {
data:['风速','降水','温度']
},
xAxis: [
{
show: false,//隐藏了x轴
type: 'category',
gridIndex: 0,//对应前面grid的索引位置（第一个）
axisTick: {
alignWithLabel: true
},
data: windDirection,
},
{
type: 'category',
gridIndex: 1, //对应前面grid的索引位置（第二个）
axisTick: {
alignWithLabel: true
},
data: timeSeries,
}
],
//y轴，不管有几个x轴，几个y轴，或者图，只要找到他对应的grid图的序号索引就可以精准匹配
yAxis: [
{
type: 'value',
gridIndex: 1,//对应前面grid的索引位置（第二个）
splitLine: {show: false},
position: 'right',
axisLine: {
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value}ml'
}
},
{
type: 'value',
gridIndex: 1,
nameLocation: 'middle',
name: '温度',
nameTextStyle: {
padding: 25
},
splitLine: {show: false},
position: 'left',
axisLine: {
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value}°C'
}
},
{
type: 'value',
gridIndex: 0,
name: '风速',
nameTextStyle: {
padding: 25
},
position: 'left',
splitLine: {show: false},
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value}',
fontSize: 12,//y轴坐标轴上的字体大小
}
}
],
series: [
{
name:'风速',
type: "line",
xAxisIndex: 0,
yAxisIndex: 2,
data: windSpeed,
},
{
name:'降水',
type:'bar',
xAxisIndex: 1,
yAxisIndex: 0,
data: precip
},
{
name:'温度',
type:'line',
xAxisIndex: 1,
yAxisIndex: 1,
data:temp
}
]
})
}

28
src/assets/js/weatherRequest.ts
Unescape Escape View File

@ -31,8 +31,13 @@ function query_surface_forecast(lon: number,lat:number)
})
}
//查询未来24小时，指定位置和高度的高空气象变量信息
function query_upper_forecast(lat:number, lon: number, level:number){
/** 查询未来24小时，指定位置和高度的高空气象变量信息
* @param lon 经度
* @param lat 纬度
* @param level 气压高度 hPa
*/
function query_upper_forecast(lon: number, lat:number, level:number){
let timestamp = Date.now().toString()
return axios({
method: "POST",
@ -50,5 +55,20 @@ function query_upper_forecast(lat:number, lon: number, level:number){
})
}
export {query_upper_forecast, query_surface_forecast}
/**
* 查询高度层
*/
function requireWeatherLevel(){
let timestamp = Date.now().toString()
return axios({
method: "POST",
url: "/onlinetest/htfp/weather/v1/info/queryLevelsAvailable",
headers: {
"Content-Type": "application/json",
"timestamp": timestamp,
"signature": CryptoJS.HmacSHA1('/htfp/weather/v1/info/queryLevelsAvailable', timestamp)
},
data: { dataSource: "GFS" }
})
}
export {query_upper_forecast, query_surface_forecast,requireWeatherLevel}

275
src/components/page/RouteManagePage.vue
Unescape Escape View File

@ -13,12 +13,16 @@ import {EChartsType} from "echarts";
import {transLonlat2Car3} from "@/utils/map/geocomputation.ts";
import {drawEcharts_RouteDetection, profileAnalyse} from "@/utils/map/SpatialAnalysis.ts";
import RouteManageViewer from "@/assets/js/RouteManageViewer.js";
import {query_surface_forecast} from "@/assets/js/weatherRequest.ts";
import {query_surface_forecast, query_upper_forecast, requireWeatherLevel} from "@/assets/js/weatherRequest.ts";
import {setChartOptions} from "@/assets/js/weatherCharts.ts";
import type { NotificationType } from 'naive-ui'
import { useNotification } from 'naive-ui'
let myChart: EChartsType = undefined
let weatherChart: EChartsType = undefined
let routeStore = useRouteStore()
let selectedRouteCode = ref(null)
let selectedLevel = ref(null)
let showPtList = ref(true)
let selectedRoute = ref<Airline>(newAirline())
let routesInstore = ref<{ value: string|number; label: string}[]>(null)
@ -49,14 +53,27 @@ let routeCode = [
value: 5,
}
]
let levelOptions :any[] = []
let levelOptions = ref<any[]>()
const notification = useNotification()
const notify = (type: NotificationType, title: string, detail: string) =>{
notification[type]({
title: title,
meta: detail,
duration: 3000,
closable: true,
keepAliveOnHover: true
})
}
onBeforeUnmount(()=>{
clearInterval(timer)
})
onMounted(()=>{
getTime()
routeViewer = new RouteManageViewer(window.viewer)
myChart = echarts.init(document.getElementById('echarts-profile'),'dark')
weatherChart = echarts.init(document.getElementById('weatherChart'),'dark')
timer = setInterval(getTimesInterval, 1000);
routeStore.addRoute(route)
routeStore.addRoute(route2)
routeStore.addRoute(route3)
@ -67,12 +84,25 @@ onMounted(()=>{
label: route.name
}
})
requireWeatherLevel().then(res=>{
console.log(res)
// 查询失败
if(!res.data.success){
notify('error', '气象信息查询失败', res.data.message)
return
}
levelOptions.value = res.data.data.levelsAvailableList[0].pressureLevels.map((level,index)=>{
return {
value: level,
label: level+'hPa/ '+ res.data.data.levelsAvailableList[0].heightLevels[index] + 'm'
}
})
levelOptions.value.reverse()
levelOptions.value.unshift({value: -1, label: '地面'})
selectedLevel.value = -1
})
})
function getTime(){
timer = setInterval(getTimesInterval, 1000);
}
function getTimesInterval() {
let now = new Date();
@ -84,7 +114,7 @@ function getTimesInterval() {
let seconds = now.getSeconds().toString().padStart(2, '0'); // 秒
// 格式化时间
nowTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
nowTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
// 航线选择回调
@ -92,13 +122,12 @@ function checkRoute(key:number|string){
new Promise((resolve,reject)=>{
selectedRoute.value = routeStore.flyRoute.filter(element => element.unicode === String(key))[0]
if(selectedRoute.value == null) reject('未找到航线')
routeViewer = new RouteManageViewer(window.viewer,selectedRoute.value.isClose)
routeViewer.routeParams.isClose = selectedRoute.value.isClose
window.viewer.flyTo(routeViewer.addAirLine(selectedRoute.value), {duration: 2})
queryWeather(selectedRoute.value.points[0].lon,selectedRoute.value.points[0].lat)
setTimeout(()=>resolve('success'),2500)
}).then((result)=>{
//绘制图表
//绘制地形图表
let Cartain3 = transLonlat2Car3(selectedRoute.value.points)
// 计算地形剖面，默认采样间隔为1km
let res = profileAnalyse(window.viewer, Cartain3, 1000)
@ -112,6 +141,7 @@ function checkRoute(key:number|string){
console.log(orderArr,hArr)
// 弹出图表窗口
drawEcharts_RouteDetection(myChart, res.distanceArray, res.elevationArray, orderArr, hArr)
}).catch((err)=>{
uiMsg.error(err)
})
@ -171,178 +201,62 @@ function handlePtSelect(key:any, index:number) {
//查询上一航点的气象信息
function prevPtWeather() {
routePtNumber.value -= 1
window.viewer.flyTo(window.viewer.entities.getById(selectedRoute.value.unicode + "-航点" + (routePtNumber.value).toString()),
{duration: 1})
let lat = selectedRoute.value.points[routePtNumber.value-1].lat
let lon = selectedRoute.value.points[routePtNumber.value-1].lon
if(lat && lon){
queryWeather(lon,lat)
queryWeather(lon,lat, selectedLevel.value)
}
}
//查询下一航点的气象信息
function nextPtWeather() {
routePtNumber.value += 1
window.viewer.flyTo(window.viewer.entities.getById(selectedRoute.value.unicode + "-航点" + (routePtNumber.value).toString()),
{duration: 1})
let lat = selectedRoute.value.points[routePtNumber.value-1].lat
let lon = selectedRoute.value.points[routePtNumber.value-1].lon
if(lat && lon){
queryWeather(lon,lat)
queryWeather(lon,lat, selectedLevel.value)
}
// TODO: 考虑高度
}
function queryWeather(lon:number,lat:number,level?: number) {
query_surface_forecast(lon,lat)
.then(res=>{
let weatherData = res.data.data
let timeArr = weatherData.time.map(item=>{
let i = item.indexOf('T')
return item.slice(i+1,i+3) + '时'
})
setChartOptions(timeArr.slice(0,8),weatherData.temp.slice(0,8),weatherData.windSpeed.slice(0,8),
weatherData.wind360.slice(0,8), weatherData.precip.slice(0,8),weatherData.humidity.slice(0,8))
})
}
function setChartOptions(timeSeries:string[], temp: number[], windSpeed:number[], wind360: number[], precip:number[], humidity?:number[]) {
let windDirection = wind360.map(item=>{
let arr = [22.5, 22.5+45, 22.5+45*2, 22.5+45*3, 22.5+45*4, 22.5+45*5, 22.5+45*6, 22.5+45*7]
let str = ['北风','东北风','东风','东南风','南风','西南风','西风','西北风']
if(item<=arr[0] || item>arr[7]){
return str[0]+': '+ Math.round(item)+'°'
}else if(arr[0] <=item && item<=arr[1]){
return str[1]+' : '+ Math.round(item)+'°'
}else if(arr[1] <=item && item<=arr[2]){
return str[2]+' : '+ Math.round(item)+'°'
}else if(arr[2] <=item && item<=arr[3]){
return str[3]+' : '+ Math.round(item)+'°'
}else if(arr[3] <=item && item<=arr[4]){
return str[4]+' : '+ Math.round(item)+'°'
}else if(arr[4] <=item && item<=arr[5]){
return str[5]+' : '+ Math.round(item)+'°'
}else if(arr[5] <=item && item<=arr[6]){
return str[6]+' : '+ Math.round(item)+'°'
}else if(arr[6] <=item && item<=arr[7]){
return str[7]+' : '+ Math.round(item)+'°'
let response : Promise<any>
if(level==null|| level==-1){ //地面
response = query_surface_forecast(lon,lat)
}else{
response = query_upper_forecast(lon,lat, level)
}
response.then(res=>{
// 查询失败
if(!res.data.success){
notify('error', '气象信息查询失败', res.data.message)
return
}
})
let colors = ['#5470C6', '#91CC75', '#EE6666'];
weatherChart.setOption({
backgroundColor:'#101014',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
}
},
color: colors,
grid: [
{x: '7%', y: '7%', height: '40%', left: '12%',right: '15%'},
{x: '7%', y2: '7%', height: '38%', left: '12%',right: '15%', bottom: '10%'}
],
legend: {
data:['风速','降水','温度']
},
xAxis: [
{
show: false,//隐藏了x轴
type: 'category',
gridIndex: 0,//对应前面grid的索引位置（第一个）
axisTick: {
alignWithLabel: true
},
data: windDirection,
},
{
type: 'category',
gridIndex: 1, //对应前面grid的索引位置（第二个）
axisTick: {
alignWithLabel: true
},
data: timeSeries,
}
],
//y轴，不管有几个x轴，几个y轴，或者图，只要找到他对应的grid图的序号索引就可以精准匹配
yAxis: [
{
type: 'value',
gridIndex: 1,//对应前面grid的索引位置（第二个）
splitLine: {show: false},
position: 'right',
axisLine: {
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value}ml'
}
},
{
type: 'value',
gridIndex: 1,
nameLocation: 'middle',
name: '温度',
nameTextStyle: {
padding: 25
},
splitLine: {show: false},
position: 'left',
axisLine: {
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value}°C'
}
},
{
type: 'value',
gridIndex: 0,
name: '风速',
nameTextStyle: {
padding: 25
},
position: 'left',
splitLine: {show: false},
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value}',
textStyle: {
fontSize: 12//y轴坐标轴上的字体大小
}
}
}
],
series: [
{
name:'风速',
type: "line",
xAxisIndex: 0,
yAxisIndex: 2,
data: windSpeed,
},
{
name:'降水',
type:'bar',
xAxisIndex: 1,
yAxisIndex: 0,
data: precip
},
{
name:'温度',
type:'line',
xAxisIndex: 1,
yAxisIndex: 1,
data:temp
}
]
let weatherData = res.data.data
let timeArr = weatherData.time.map(item=>{
let i = item.indexOf('T')
return item.slice(i+1,i+3) + '时'
})
if(!Reflect.has(weatherData,'precip')){
weatherData.precip = Array.from({length:timeArr.length},(v,k)=>0)
}
setChartOptions(weatherChart, timeArr.slice(0,8),weatherData.temp.slice(0,8),weatherData.windSpeed.slice(0,8),
weatherData.wind360.slice(0,8), weatherData.precip.slice(0,8),weatherData.humidity.slice(0,8))
})
}
function levelChanged(key: string | number) {
selectedLevel.value = key
let lat = selectedRoute.value.points[routePtNumber.value-1].lat
let lon = selectedRoute.value.points[routePtNumber.value-1].lon
if(lat && lon){
queryWeather(lon,lat, Number(key))
}
}
</script>
<template>
@ -383,7 +297,11 @@ function setChartOptions(timeSeries:string[], temp: number[], windSpeed:number[]
<n-radio :key="r.value" :value="r.value">
{{ r.label }}
</n-radio>
<n-button size="small" type="error" style="height: 1.5rem; padding-top: 1px">删除</n-button>
<n-button-group>
<!-- TODO: 下发、删除功能实现-->
<n-button secondary size="small" type="info" style="height: 1.3rem; margin: 0 3px 4px 0">下发</n-button>
<n-button secondary size="small" type="error" style="height: 1.3rem; margin-bottom: 4px">删除</n-button>
</n-button-group>
</n-space>
</n-space>
@ -430,7 +348,7 @@ function setChartOptions(timeSeries:string[], temp: number[], windSpeed:number[]
<n-button type="success" size="tiny">重新绘图</n-button>
</n-space>
<div id="echarts-profile">
<!-- Echarts绘图区 -->
<!-- Echarts地形剖面绘图区 -->
</div>
</n-flex>
</n-layout-content>
@ -497,7 +415,7 @@ function setChartOptions(timeSeries:string[], temp: number[], windSpeed:number[]
</n-flex>
<n-divider style="margin: .2rem -.5rem"></n-divider>
<n-flex vertical class="border">
<n-flex vertical>
<n-row style="margin-left: 1rem; margin-top: .5rem;"><n-ellipsis><h3>气象信息</h3></n-ellipsis></n-row>
<n-space justify="space-around" class="routePtSelector">
<n-button size="small" @click="prevPtWeather" :disabled="routePtNumber<=1">
@ -511,22 +429,11 @@ function setChartOptions(timeSeries:string[], temp: number[], windSpeed:number[]
<n-space justify="center">
<n-ellipsis>{{nowTime}}</n-ellipsis>
<n-select style="width: 7rem" size="tiny" :options="levelOptions" placeholder="选择高度层"></n-select>
<n-select style="width: 10rem" size="tiny" :options="levelOptions" v-model:value="selectedLevel"
@update:value="levelChanged" placeholder="选择高度层"></n-select>
</n-space>
<n-scrollbar x-scrollable id="weatherChart" style="height:41.5vh; width: 100%">
<!-- <n-card class="wCard" size="small" title="卡片">-->
<!-- </n-card>-->
<!-- <n-card class="wCard" size="small" title="卡片">-->
<!-- </n-card>-->
<!-- <n-card class="wCard" size="small" title="卡片">-->
<!-- </n-card>-->
<!-- <n-card class="wCard" size="small" title="卡片">-->
<!-- </n-card>-->
<!-- <n-card class="wCard" size="small" title="卡片">-->
<!-- </n-card>-->
<!-- <n-card class="wCard" size="small" title="卡片">-->
<!-- </n-card>-->
<!-- Echarts气象信息绘图区 -->
</n-scrollbar>
</n-flex>
</n-layout-content>
@ -572,11 +479,7 @@ function setChartOptions(timeSeries:string[], temp: number[], windSpeed:number[]
.routePtSelector:hover{
background: rgb(24, 24, 28);
}
.wCard {
width: 4vw;
height: 39vh;
display: inline-block
}
.border{
border: #22ee22 solid 1px;
}

3
src/components/toolbar.vue
Unescape Escape View File

@ -287,7 +287,8 @@ function manageLayer(){
*/
function startDrawRoute(routeParams) {
showRouteModal.value = false
let drawLine = new RouteManageViewer(window.viewer, routeParams.isClose)
let drawLine = new RouteManageViewer(window.viewer)
drawLine.routeParams.isClose =routeParams.isClose
drawLine.routeParams.height = routeParams.height
drawLine.start().then(result => {
console.log(result)

2
vite.config.ts
Unescape Escape View File

@ -30,7 +30,7 @@ export default defineConfig({
server: {
proxy: {
'/onlinetest': {
target: 'http://123.57.54.1:10323/',
target: 'http://172.10.0.195:10323/',
changeOrigin: true,
rewrite: path => path.replace(/^\/onlinetest/,'')
}

Write Preview
Loading…
Cancel
Save