在vue3中使用Cesium保姆篇

 

1.首先新建一个vue项目

Vue.js - 渐进式 JavaScript 框架 | Vue.js

可以直接到管网中查看命令通过npm来创建一个vue3的项目 

然后通过命令下载1.99的版本的cesium和plugin 

npm i [email protected] vite-plugin-cesium 

下载完了以后

2.引入cesium

首先找到vue的vite.config.js 文件

在里面引入刚才下载的插件并使用，代码如下

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),cesium()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3.在组件中使用cesium

import * as Cesium from 'cesium'  *as代表所有

 当然，这个是写在组件加载后的，自然还要引入onMounted

下面直接上组件的代码

效果如下

4.获取cesium的token 

 代码中用到了cesium的token,如果不知道token在哪取的话可以看这篇文章如何获得cesium的token-CSDN博客

 当然我们如果在项目中使用三位地图的话肯定不要左下角的的logo的，由于cesium的api没办法关闭，所以就只能用css样式来控制了，

代码如下

 

这样可以让logo隐藏掉但是，由于是在vue3中， v-deep已经废弃了，

会报以下警告

解决方法如下

 vue3中使用::v-deep报错 ::v-deep usage as a combinator has been deprecated. Use :deep(＜inner-selector＞)-CSDN博客

 这样就可以实现一个简单的三维地图了

5.坐标转换

在cesium中用到的坐标是笛卡尔坐标，所以我们的经纬度需要进行转换后才能使用

当然不光有经纬度转笛卡尔坐标，还

 const Cartesian = Cesium.Cartesian3.fromDegrees(119.56985, 34.20513, 10000)//经度 纬度 高度

  console.log(Cartesian, 'Cartesian');//转换后的笛卡尔坐标

有笛卡尔坐标转经纬度

 //笛卡尔转弧度坐标
  //返回的是弧度坐标
  const Cartographic = Cesium.Cartographic.fromCartesian(Cartesian)
//经纬度是角度坐标，再通过弧度坐标转换为角度坐标，自己也可以将这段封装成为一个方法
  let lon = Cesium.Math.toDegrees(Cartographic.longitude)
  let lat = Cesium.Math.toDegrees(Cartographic.latitude)
  console.log(lon, 'lon');
  console.log(lat, 'lat');

 这样就获得了我们平时用到的经纬度了

暂时更到这里，后续还会更新