Cesium 地形剖面图

<!--
 * @Author: 苹果园dog
 * @Date: 2021-08-23 10:38:27
 * @LastEditTime: 2021-08-24 19:02:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: 
-->
<template>
  <div class="main">
    <div id="cesiumContainer"></div>
    <div class="controlRegion">
      <button @click="btnStart">开始</button>
      <button @click="btnClear">清除</button>
      <button @click="btnStop">关闭</button>
    </div>
    <div id="profileChart"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import cesiumCommon from '../../commonUtil/cesiumCommon.js'
import CesiumProfile from './CesiumProfile.js'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      cesiumProfile: null
    }
  },
  //方法集合
  methods: {
    btnStart() {//开始
      this.cesiumProfile.startDraw((positions) => {
        this.cesiumProfile.getChartData(positions, (newPositions) => {
          this.cesiumProfile.createProfileChart(newPositions)
        })
      })
    },
    btnStop() {
        this.cesiumProfile.close();
    },
    btnClear() {
      this.cesiumProfile.clear();
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    cesiumCommon.init3D()
    let t = new CesiumProfile(viewer, {
      toolTip: 'profiletooltip',
      entityNames: ['profileDrawEntities'],
      chartID: 'profileChart'
    })
    this.cesiumProfile = t
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {}
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

#cesiumContainer,
.main {
  width: 100%;
  height: 100%;
}

.main {
  position: relative;
}

#profileChart {
  position: absolute;
  width: 500px;
  height: 500px;
  bottom: 50px;
  left: 200px;
}

.controlRegion {
  position: absolute;
  top: 20px;
  left: 20px;
  background: white;
}
</style>

CesiumProfile.prototype.createProfileChart = function (profileData) {
    if (!this.lineChart) {
        this.lineChart = echarts.init(document.getElementById(this.chartID));
    }

    var lineoption = {
        title: {
            text: '剖面分析'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: [
            {
                type: 'category',
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '线',
                type: 'line',
                data: profileData
            }
        ]
    };
    this.lineChart.setOption(lineoption);
    document.getElementById(this.chartID).style.backgroundColor = 'rgba(255, 255, 255, 1)';
    document.getElementById(this.chartID).style.display = "block";
    $(window).resize(this.lineChart.resize);
}