From 7e9096eab928c1e2f5429c1c3e75b2e07ba5fe19 Mon Sep 17 00:00:00 2001
From: zhaipx <zhaipeixiu@htsdfp.com>
Date: Mon, 20 May 2024 11:23:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=BC=95=E5=85=A5Echarts=E5=BA=93?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=89=96=E9=9D=A2=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BE=EF=BC=88=E9=9D=99=E6=80=81=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ProfileAnalysis.vue | 145 +++++++++++++++++++++++++++++
 src/components/map/SceneViewer.vue |  39 ++++----
 src/utils/map/draw/drawPolyline.ts |   7 +-
 3 files changed, 168 insertions(+), 23 deletions(-)
 create mode 100644 src/components/ProfileAnalysis.vue

diff --git a/src/components/ProfileAnalysis.vue b/src/components/ProfileAnalysis.vue
new file mode 100644
index 0000000..8f012f0
--- /dev/null
+++ b/src/components/ProfileAnalysis.vue
@@ -0,0 +1,145 @@
+<!--
+  文件描述：地形剖面图组件
+  创建时间：2024/4/23 9:55
+  创建人：Zhaipeixiu
+-->
+<script setup lang="ts">
+import {onMounted, ref} from 'vue'
+import * as echarts from 'echarts'
+const emit = defineEmits(['confirmDia'])
+let showDia = ref<boolean>(false)
+
+const openDia = (): void => {
+  showDia.value = true
+}
+
+const closeDia = (): void => {
+  showDia.value = false
+}
+
+const confirmDia = (): void => {
+  emit('confirmDia', '弹窗内容事件处理完毕，信息传给父组件。')
+}
+
+/**
+ *  绘制折线图
+ * @param xData x数组
+ * @param yData y数组，以面积线绘制
+ * @param yData2 y数组，以折线绘制
+ */
+const drawChart = (xData:number[],yData:number[],yData2:number[]) => {
+  let myChart = echarts.init(document.getElementById('profileChart'))
+  // 绘制图表
+  myChart.setOption({
+    legend:{
+      show: true,
+      type: 'plain',
+      top: '7%',
+      data:[
+        {
+          name: 'groundLine',
+          itemStyle: 'inherit',
+          lineStyle: 'inherit',
+        },
+        {
+        name: 'airLine',
+        itemStyle: 'inherit',
+        lineStyle: 'inherit',
+      }]
+    },
+    tooltip: {
+      show: true,
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross'
+      },
+      formatter:'地表高度: {c0}<br>航线高度: {c1}'
+    },
+    xAxis: {
+      data: xData,
+      name: '距离',
+      nameTextStyle: {
+        fontWeight:'bolder',
+        fontSize: 14
+      },
+      nameLocation: 'end',
+      axisLine:{
+        onZero: false,
+        show: true,    // 是否显示坐标轴轴线
+        symbol: ['none', 'arrow'],
+        symbolSize: [7, 10]
+      },
+      axisLabel: {
+        formatter: '{value} m',
+        margin: 5,
+      },
+      axisTick: {
+        show: true,    // 是否显示坐标轴刻度
+        inside: true,     // 坐标轴刻度是否朝内，默认朝外
+        alignWithLabel: true,
+        lineStyle: {
+          color: '#000000',     //刻度线的颜色
+          type: 'solid',    //坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
+        },
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: '高度',
+      nameTextStyle: {
+        fontWeight:'bolder',
+        fontSize: 14
+      },
+      nameLocation: 'end',
+      position: 'left',
+      axisLabel: {
+        formatter: '{value} m'
+      },
+      axisLine: {
+        show: true,
+        symbol: ['none', 'arrow'],
+        symbolSize: [7, 10]
+      }
+    },
+    series: [
+      {
+        name:'groundLine',
+        type: 'line',
+        data: yData,
+        areaStyle: {
+          color: '#37a5fb',
+          opacity: 0.5
+        }
+      },
+      {
+        name:'airLine',
+        type: 'line',
+        data: yData2,
+      }
+    ]
+  });
+}
+
+// vue3中规定，使用了 <script setup> 的组件是默认私有的：
+// 一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露
+defineExpose({
+  openDia,
+  closeDia,
+  drawChart,
+})
+
+
+</script>
+
+<template>
+<div id="profileChart" v-show="showDia">
+</div>
+</template>
+
+<style scoped>
+#profileChart{
+  width: 700px;
+  height: 500px;
+  position: relative;
+}
+</style>
diff --git a/src/components/map/SceneViewer.vue b/src/components/map/SceneViewer.vue
index b8b0259..6e37af0 100644
--- a/src/components/map/SceneViewer.vue
+++ b/src/components/map/SceneViewer.vue
@@ -7,11 +7,12 @@
 -->
 <template>
   <div id="cesium-viewer" ref="viewerDivRef"></div>
+  <ProfileAnalysis ref="profileChart"></ProfileAnalysis>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { Viewer, Ion, Cartesian3, CustomDataSource, Color } from 'cesium'
+import {onMounted, ref, watch} from 'vue'
+import {Viewer, Ion, CustomDataSource, Cartesian3} from 'cesium'
 import 'cesium/Build/Cesium/Widgets/widgets.css'
 import {
   TDTLayerType,
@@ -22,9 +23,8 @@ 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'
+import ProfileAnalysis from "@/components/ProfileAnalysis.vue";
+
 const viewerDivRef = ref<HTMLDivElement>()
 let viewer: Viewer
 window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/'
@@ -32,14 +32,10 @@ window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/'
 
 Ion.defaultAccessToken =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YjU4MjJlMS0wMWE4LTRhOWQtYjQ1OC04MTgzMzFhMzQ5ZjAiLCJpZCI6MTE1ODUxLCJpYXQiOjE2NjkyMDM1MzN9.8ajEuv3VKYg8wvFiQlUWWY6Ng6JfY4PuVgRyStL1B-E'
-// 修改相机的默认矩形范围
-// window.Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
-//   window.Cesium.Rectangle.fromDegrees(
-//     75.0, // 西经
-//     0.0, // 南纬
-//     140.0, // 东经
-//     60.0, // 北纬
-//   )
+
+// 绑定地形剖面图弹窗
+let profileChart = ref<InstanceType<typeof ProfileAnalysis> | null>(null)
+let linePoints = ref<number>(-1)
 
 onMounted(() => {
   //初始化
@@ -67,13 +63,22 @@ onMounted(() => {
 
   // 挂载在window，供全局组件共享
   window.viewer = viewer
-  inputGeoJson(viewer)
+
   //绘制多边形
-  const drawPolyline = new CreatePolyline(viewer,true,true,{})
+  const drawPolyline = new CreatePolyline(viewer,false,true,{})
+  linePoints.value = drawPolyline.positions.length
   drawPolyline.start()
-  // const drawPolygon = new DrawPolygon(viewer,true)
-  // drawPolygon.start()
+  profileChart.value?.openDia()
+  profileChart.value?.drawChart([0,1,2,3,4,5,6,7,8,9],
+      [-70,800,300,400,23,232,435,243,234,343],
+      [90,900,900,600,235,262,535,643,734,443])
 })
+
+
+watch(linePoints, (newValue, OldValue): void => {
+  console.log("数据变化了",linePoints.value, newValue, OldValue)
+})
+
 </script>
 
 <style scoped>
diff --git a/src/utils/map/draw/drawPolyline.ts b/src/utils/map/draw/drawPolyline.ts
index 5691015..a9cb2cf 100644
--- a/src/utils/map/draw/drawPolyline.ts
+++ b/src/utils/map/draw/drawPolyline.ts
@@ -102,9 +102,7 @@ export default class CreatePolyline {
   }
 
   //左单击回调事件
-  private leftClickCallBack = (
-    event: ScreenSpaceEventHandler.PositionedEvent,
-  ) => {
+  private leftClickCallBack = (event: ScreenSpaceEventHandler.PositionedEvent) => {
     //根据屏幕坐标判断是否为同一点
     if (this.isSamplePosition(event.position.clone())) return
 
@@ -195,9 +193,6 @@ export default class CreatePolyline {
       console.log(profile)
     }
     this.clearEvent()
-    console.log('end:' + this.positions.length.toString())
-    console.log(this.positions)
-    console.log(this.polyline.controlPointsID.length)
     //结束绘制进入编辑模式
     this.polyline.removeControlPoints()
     const editTool = new EditGeometry(this.viewer, this.polyline.geometry!)