使用vite创建vue3的Cesium基础项目

使用vite创建vue3的Cesium基础项目

1. 使用vite创建vue3项目：可以参考官方文档Vite官方中文文档

   1.1 在指定文件夹路径下使用npm（前提是已经安装好了node）：

   npm create vite@latest
   

   1.2 cd到创建的项目文件夹：

   cd 项目文件夹
   npm install
   npm run dev（可以暂时先不运行，等安装完Cesium再运行）
   

2. 安装并使用Cesium;

   2.1 找到插件：vue插件，
   
   找到社区插件，
   
   ctrl+F搜索“Cesium”，找到Cesium的插件使用教程：Cesium插件
   
   就能找到Cesium的安装和基本配置教程：
   

   2.2 安装Cesium

   npm i cesium vite-plugin-cesium vite -D
   # yarn add cesium vite-plugin-cesium vite -D
   

   2.3 基本配置：

   1. vite.config.js
      在项目的vite.config.js文件中添加：

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

      添加完成后如下：

      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
      在App.vue中添加：

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

      这里有几个问题解读一下：
      （1）需要有一个dom节点来承载Cesium加载的地图，所以创建一个<div id="cesiumContainer"></div>。
      （2）需要在初始化的时候使用钩子函数onMounted来加载，否则会一片空白onMounted(() => { const viewer = new Cesium.Viewer('cesiumContainer') })
      （3）写样式的时候记得加#app，因为创建的dom节点是挂载在#app节点下的；我按照其他的教程来写css样式的时候会有问题，加载的地图很小，所以在<style scoped>我把原来的scoped删了，并且加上#app就好多了。现在就已经基本可以看见地图了

   3. 个人问题

      3.1 我刚开始加载的地图只占页面的一部分，所以我手动调整了src/style.css文件中的代码：max-width: 100%;

      #app {
        max-width: 100%;
        margin: 0 auto;
        padding: 2rem;
        text-align: center;
      }
      

      3.2 报错

      这样写可能会报错：

      <script setup>
      import * as Cesium from 'cesium';
      import { onMounted } from 'vue';
      onMounted(() => {
        let viewer = new Cesium.Viewer('cesiumContainer')
      })
      </script>
      

      
      搜了搜有两种解决方案：
      （1）禁用infobox，自己设计信息面板。 但是这样点物体就不会弹窗显示信息了

      <script setup>
      import * as Cesium from 'cesium';
      import { onMounted } from 'vue';
      onMounted(() => {
        let viewer = new Cesium.Viewer('cesiumContainer', { infoBox: false, })
      })
      </script>
      

      （2）设置沙箱的权限

      <script setup>
      import * as Cesium from 'cesium';
      import { onMounted } from 'vue';
      onMounted(() => {
        let viewer = new Cesium.Viewer('cesiumContainer')
        let iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0];
        iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');
        iframe.setAttribute('src', '');
      })
      </script>
      

3. 效果展示;