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

src/App.vue

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

src/assets/js/RouteManageViewer.js

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

src/assets/js/measureViewer.js

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

src/assets/js/weatherCharts.ts

@@ -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
+            }
+        ]
+    })
+}

src/assets/js/weatherRequest.ts

@@ -31,8 +31,13 @@ function query_surface_forecast(lon: number,lat:number)
     })
 }
 
-//查询未来24小时，指定位置和高度的高空气象变量信息
+/** 查询未来24小时，指定位置和高度的高空气象变量信息
-function query_upper_forecast(lat:number, lon: number, level:number){
+ * @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}

src/components/page/RouteManagePage.vue

@@ -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.routeParams.isClose =  selectedRoute.value.isClose
-		routeViewer = new RouteManageViewer(window.viewer,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)
+	let response : Promise<any>
-			.then(res=>{
+	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 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),
+		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 setChartOptions(timeSeries:string[], temp: number[], windSpeed:number[], wind360: number[], precip:number[], humidity?:number[]) {
+function levelChanged(key: string | number) {
-	let windDirection = wind360.map(item=>{
+	selectedLevel.value = key
-		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 lat = selectedRoute.value.points[routePtNumber.value-1].lat
-		let str = ['北风','东北风','东风','东南风','南风','西南风','西风','西北风']
+	let lon = selectedRoute.value.points[routePtNumber.value-1].lon
-		if(item<=arr[0] || item>arr[7]){
+	if(lat && lon){
-			return str[0]+': '+ Math.round(item)+'°'
+		queryWeather(lon,lat, Number(key))
-		}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'];
-	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
 	}
-		]
-	})
 }
-
 </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%">
-
+							<!--	Echarts气象信息绘图区	-->
-<!--								<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>-->
 						</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;
 }

src/components/toolbar.vue

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

vite.config.ts

@@ -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/,'')
       }