vue3集成Cesium

vue3+cesium

1.创建vue项目

npm create vite@latest

2.下载cesium

npm i cesium vite-plugin-cesium vite -D

3.修改配置

(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) 替换app.vue

<template>
  <div style="height:100%;">
        <div id="cesiumContainer" style="height:100%"></div>
    </div>
</template>
<script setup>
import { onMounted } from "@vue/runtime-core";
import * as Cesium from "cesium";

onMounted(() => {
  Cesium.Ion.defaultAccessToken = '官网点击申请的token'
  const viewer = new Cesium.Viewer('cesiumContainer', {
            infoBox: false, // If set to false, the InfoBox widget will not be created.
        });
});
</script>
<style>
html,
body,
#app,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>