cesium+vue3+vite

1.创建vite项目

        https://blog.csdn.net/m0_61118311/article/details/129843808

2.开始配置Cesium

2.1 下载Cesium

npm i cesium vite-plugin-cesium vite -D

注意：这里下载的是vite-plugin-cesium插件和cesium两个，因为是vite，所以下载vite-plugin-cesium，这可以帮助我们进行配置，如果是vuecli脚手架直接npm i cesium即可，其配置我这里没有尝试。

2.2 项目配置

2.2.1 在vite.config.js里进行配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'


export default defineConfig({
  plugins: [vue(), cesium],

2.2.2 Cesium静态资源

将node_modules中的cesium/Build/Cesium复制粘贴至public

这个文件夹中的四个子文件夹均是Cesium的静态资源，包括了Cesium的基本样式等。

2.2.3 main.js配置

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import '../public/Cesium/Widgets/widgets.css' //引入cesium静态资源样式，否则基本样式混乱



createApp(App).mount('#app')

2.2.4 设置Cesium基本路径

按之前所看的博客，并没有涉及该步骤，但如果不设置该步骤，地球无法出来且浏览控制台查看网络会发现静态资源地址不正确

在  在vite.config.js里进行配置

​
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'


export default defineConfig({
  plugins: [vue(), cesium],
  define: {
    CESIUM_BASE_URL: JSON.stringify('/public/Cesium') // 设置 Cesium 基本 URL 路径
  }
})

​

3. 开始写Cesium代码

3.1 清空style.css

3.2 App.vue修改

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>

<style>
html,body,#app{
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}
</style>

3.3 HelloWorld.vue修改

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import {onMounted} from "vue";
import * as Cesium from 'cesium';
onMounted(async()=>{
  Cesium.Ion.defaultAccessToken = '你的token' //官网可以免费申请
  let viewer = new Cesium.Viewer("cesiumContainer",{
    infoBox: false
  })
})
</script>
<style >
#cesiumContainer{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

注意：使用路由的话只需要正常按路由修改App.vue，配置路由即可。

至此三维地球就可以被加载出来了。

4. 加载3DTiles数据

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import {onMounted} from "vue";
import * as Cesium from 'cesium';
onMounted(async()=>{
  Cesium.Ion.defaultAccessToken = 'xxx'
  let viewer = new Cesium.Viewer("cesiumContainer",{
    infoBox: false
  })

  const tileset = await Cesium.Cesium3DTileset.fromUrl(
    "http://xxxxxx/xxxxx/tileset.json",{
  });
    viewer.scene.primitives.add(tileset);
    viewer.zoomTo(tileset);
})
</script>
<style >
#cesiumContainer{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

加载这个并没有什么值得写，但发现现在的博客都是以下写法：

const tileset = new Cesium.Cesium3DTileset({
    "http://xxxx/xxxx/xxxx/tileset.json"
  });
 viewer.scene.primitives.add(tileset);
 viewer.zoomTo(tileset);

在之前的cesium版本这样写没有问题，但cesium进行了更新，官方示例中改为上面那种写法，否则会报'cannot read properties of undefined (reading 'updatetransform')'错误。（本人出现这样的问题了，更改后确实解决了，提供参考！）

PS: 我的配置是：