vite+vue3创建cesium （ts/js）

news2025/1/24 22:36:43

在要创建项目的文件夹。输入cmd

1.搭建第一个Vite项目。

npm init vite@latest

安装Cesium插件

cesium插件：vite-plugin-cesium

npm i cesium vite-plugin-cesium vite -D

配置cesium 在vite.config.ts/vite.config.js文件中

import cesium from 'vite-plugin-cesium';
export default defineConfig({ plugins: [vue(),cesium()]
})

清空style.css中的样式

//可选
* {
  margin: 0;
  padding: 0, ;
  box-sizing: border-box
}

配置App.vue

清空一切不需要的，设置样式使得全屏。

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
</script>
<template>
  <HelloWorld />
</template>
<style scoped></style>

配置HelloWorld.vue

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script setup>
import {onMounted} from "vue";
import * as Cesium from 'cesium';
onMounted(()=>{
  let viewer = new Cesium.Viewer("cesiumContainer",)
})
</script>
<style >
#cesiumContainer{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

没有影像

要去官网获取token或者加载第三方地图（天地图，高德）

<script setup lang="ts">
import * as Cesium from "cesium";
import { onMounted } from "vue";
// 封装的资源，直接调用
import FFCesium from "./FFCesium V1.0.0.confuse.min.js";
onMounted(() => {
  // init();
  // ffCesium();
  let viewer = new Cesium.Viewer("cesiumContainer");
});

function ffCesium() {
  let viewerOption = {
    animation: false, //是否创建动画小器件，左下角仪表
    baseLayerPicker: false, //是否显示图层选择器
    baseLayer: false,
    fullscreenButton: false, //是否显示全屏按钮
    geocoder: false, //是否显示geocoder小器件，右上角查询按钮
    homeButton: false, //是否显示Home按钮
    infoBox: false, //是否显示信息框
    sceneModePicker: false, //是否显示3D/2D选择器
    scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, //是否显示时间轴
    navigationHelpButton: false, //是否显示右上角的帮助按钮
    shadows: true, //是否显示背影
    shouldAnimate: true,
  }; //初始化
  const ffCesium = new FFCesium("cesiumContainer", viewerOption);
  ffCesium.addTdtImgLayer();
}

function init() {
  // 官方申请的token
  Cesium.Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNmI0MDRkZi04NzhjLTQyYmMtYjQxOC1iNzc2MDA1MmM4ZjIiLCJpZCI6OTAwMTAsImlhdCI6MTY1MDA3NTM0MX0.mGMDeDFon6i_AOEfTs3pEq30wRCipCWL3O-bzLHswtw";
  const viewer = new Cesium.Viewer("cesiumContainer", {
    homeButton: false,
    baseLayerPicker: false, //地图图层组件
    fullscreenButton: false, //全屏组件
    geocoder: false, //地理编码搜索组件
    infoBox: false, //信息框
    sceneModePicker: false, //场景模式
    selectionIndicator: false, //选取指示器组件
    timeline: false, //时间轴
    navigationHelpButton: false, //帮助按钮
    navigationInstructionsInitiallyVisible: false,
    animation: false,
    vrButton: false,
  });
  // logo
  viewer._cesiumWidget._creditContainer.style.display = "none";
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(118.03505, 37.75472, 1000),
  });
}
</script>

<template>
  <!-- <h1>cesium</h1> -->
  <div id="cesiumContainer"></div>
</template>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

效果