vue3.x+element-plus+cesium整合

标绘功能还有一些Bug没有解决，以后有时间慢慢完善吧，代码先不放了。

一、npm包下载安装
1、安装最新版vue-cli
npm i @vue/cli -g
2、安装element-plus
npm i element-plus --save
3、安装Cesium
npm i cesium
二、创建项目
1、初始化Vue项目
vue create cesiumapp
2、创建Cesium三维场景组件

<template>
  <div id="cesiumContainer">
    <div id="slider"></div>
  </div>
</template>
<script>
export default {
     
  name: "CesiumContainer",
  mounted: function () {
     
    let viewer = new this.$Cesium.Viewer("cesiumContainer", {
     
      imageryProvider: new this.$Cesium.ArcGisMapServerImageryProvider({
     
        url:
          "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
      }),
      baseLayerPicker: false, 
      animation: false, 
      homeButton: false,
      timeline: false,
    });
    //提供viewer对象给其他地方使用
    window.viewer = viewer;
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
#cesiumContainer {
     
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style> 

3、创建状态栏显示坐标信息

<template>
  <div id="statusBar">
    <span>{
     {
      lonInfo }}</span>
    <span>{
     {
      latInfo }}</span>
    <span class="heightSpan">{
     {
      heightInfo }}</span>
  </div>
</template>

<script>
let _self = null;
export default {
     
  name: "StatusBar",
  data() {
     
    return {
     
      lonInfo: "",
      latInfo: "",
      heightInfo: "",
    };
  },
  props: {
     
    msg: String,
  },
  methods: {
     
    //初始化数据
    data: function () {
     
      _self = this;
    },
  },
  mounted: function () {
     
    this.data();
    var handler = new _self.$Cesium.ScreenSpaceEventHandler(
      window.viewer.scene.canvas
    );

    handler.setInputAction(function (movement) {
     
      // 处理鼠标移动事件
      // 更新鼠标位置 
      var ellipsoid = window.viewer.scene.globe.ellipsoid;
      var cartesian = window.viewer.scene.camera.pickEllipsoid(
        movement.endPosition,
        ellipsoid
      );
      if (cartesian) {
     
        //能获取，显示坐标
        var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        var lon = _self.$Cesium.Math.toDegrees(cartographic.longitude).toFixed(
          8
        );
        var lat = _self.$Cesium.Math.toDegrees(cartographic.latitude).toFixed(8);
        var height = Math.ceil(
          window.viewer.camera.positionCartographic.height
        );
        _self.lonInfo = "经度：" + lon;
        _self.latInfo = "纬度：" + lat;
        if (height >= 1000) {
     
          height = Math.floor(height / 1000);
          _self.heightInfo = "高度：" + height + "千米";
        } else {
     
          _self.heightInfo = "高度：" + height + "米";
        }
      }
    }, _self.$Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#statusBar {
     
  position: absolute;
  text-align: right;
  left: 0;
  bottom: 0;
  color: white;
  width: 100%;
  height: 22px;
  background-color: rgba(34, 34, 34, 0.7);
  float: left;
}
.heightSpan {
     
  margin-right: 10px;
}
</style>

4、引用element-plus、cesium

import {
      createApp } from 'vue'
import App from './App.vue'
import ElementUI from "element-plus"
import "element-plus/lib/theme-chalk/index.css"
//Cesium静态资源路径设置
window.CESIUM_BASE_URL = '/static/Cesium';
import * as Cesium from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
const Vue=createApp(App);
//使用Element-plus
Vue.use(ElementUI);
//Cesium设置为全局变量
Vue.config.globalProperties.$Cesium = Cesium;
Vue.mount('#app');