vue3.x+element-plus+cesium整合_cesium elementui-优快云博客

本文链接：https://blog.youkuaiyun.com/Free2140/article/details/113854582

本文介绍了如何使用Vue CLI创建项目并集成Cesium库，展示如何创建Cesium三维场景组件，实现实时坐标信息在状态栏显示，并解决标绘功能的Bug。通过npm包管理，逐步构建了一个包含ArcGIS地图和屏幕空间事件处理的交互式应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标绘功能还有一些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');