cesium入门

在vue3+vite项目中使用cesium

将cesium快速引入

1.创建vue3项目

npm cracte vite 项目名

2.选择vue框架

3.进入项目安装依赖

cd 项目名
npm install //下载依赖 也可以简写npm i

4.安装cesium依赖

npm i cesium@1.99 vite-plugin-cesium

5.修改vite.config.js文件

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()],
})

6.在任意一个vue组件中测试是否引入成功

import * as Cesium from 'cesium'
console.log(Cesium)//控制台打印Model对象表示引入成功

7.运行项目

npm run dev

申请cesium的token（项目中要用到）

1.先打开官网

https://cesium.com/

2.注册用户在这里插入图片描述

3.用电子邮箱或github注册在这里插入图片描述

4.登录成功后的界面

在这里插入图片描述

5.获取token

在这里插入图片描述

快速创建一个地球

<template>
  <div id="cesiumContainer"></div>
</template>
  
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Home",
});
</script>
  
<script setup lang="ts">
import * as Cesium from 'cesium'
import { onMounted } from 'vue';
onMounted(() => {
  //在cesium申请的token
  Cesium.Ion.defaultAccessToken = '这里放你刚刚申请的token';
  new Cesium.Viewer('cesiumContainer', {
    //地形图层
    terrainProvider: Cesium.createWorldTerrain();
  })
})
</script>
  
<style  scoped lang="scss">
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

效果预览（如果项目打开只有星空，没有地球，可能是网速有点慢，加载需要时间，等1-2分钟）：

关掉cesium自带的一些控件

<template>
  <div id="cesiumContainer"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Home",
});
</script>

<script setup lang="ts">
import * as Cesium from 'cesium'
import { onMounted } from 'vue';
onMounted(() => {
  Cesium.Ion.defaultAccessToken = '这里放你刚刚申请的token';
  // const esri = new Cesium.ArcGisMapServerImageryProvider({
  //   url: "https://services.arcgisonline.com/ArcGis/rest/services/World_Imagery/MapServer",
  //   enablePickFeatures: false,
  // })
  const viewer = new Cesium.Viewer('cesiumContainer', {
    //以下是关掉一些控件
    timeline: false,//时间轴控件
    animation: false,//动画控件
    geocoder: false,//搜索按钮
    homeButton: false,//主页按钮
    sceneModePicker: false,//投影方式按钮
    baseLayerPicker: false,//图层选择按钮
    navigationHelpButton: false,//帮助手势按钮
    fullscreenButton: false,//全屏按钮
    // imageryProvider: esri,//默认谷歌地图影像 指定为ImageryLayer
    //三维地形图层
    terrainProvider: Cesium.createWorldTerrain({
      // requestWaterMask:true//海面特效
    })
  });
  //相机定位到武汉
  //viewer.camera.flyTo({
  //  destination: Cesium.Cartesian3.fromDegrees(114.350411, 30.607792, 10000)
  //})
})
</script>

<style  scoped lang="scss">
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

:deep(.cesium-viewer-bottom) {
  display: none; //把cesium的logo去掉
}
</style>

cesium快速入门