Cesium 学习笔记1： 引入Cesium、修改显示/隐藏控制按钮

Cesium 学习笔记1： 引入Cesium、修改显示/隐藏控制按钮

vue3+vite项目中引入Cesium。适用于3D地理信息项目

相关配置

1. 安装 npm install cesium

2. vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// vite 提供的操作env配置变量的方法loadEnv
import { loadEnv } from 'vite';
// nodejs写法，获取项目目录
import path from 'path';
import cesium from 'vite-plugin-cesium';

// https://vitejs.dev/config/
export default({ command, mode }) => {
    return defineConfig({
        plugins: [
            vue(),
            cesium()
        ],
        // 服务器配置
        server:{
            host: '0.0.0.0',
            port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT),
            strictPort: true, // 端口被占用直接退出
            https: false, // 默认用http方式
            open: true,// 在开发服务器启动时自动在浏览器中打开应用程序
            proxy: { // 代理配置
                // 字符串简写写法
                // '/foo': '',
                // 选项写法
                '/api': {
                    target: loadEnv(mode, process.cwd()).VITE_APP_BASE_URL,
                    changeOrigin: true, // 跨域配置
                    rewrite: (path) => path.replace(/^\/api/, '')
                },
                // 正则表达式写法
                // '^/fallback/.*': {
                //   target: 'http://jsonplaceholder.typicode.com',
                //   changeOrigin: true,
                //   rewrite: (path) => path.replace(/^\/fallback/, '')
                // },
            },
            hmr:{
                overlay: true // 屏蔽服务器报错
            }
        },
        resolve:{ // 设置项目文件导入路径
            alias:{
                '@': path.resolve(__dirname,'./src')
            }
        },
        css:{
            // css预处理器
            preprocessorOptions: {
                // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
                // 给导入的路径最后加上 ;
                scss: {
                    additionalData: '@import "@/assets/styles/global.scss";'
                }
            }
        },
        build:{ // 分块打包配置
            chunkSizeWarningLimit: 1500, // 分块打包，分解块，将大块分解成更小的块
            rollupOptions: {
                output:{
                    manualChunks(id) {
                        if (id.includes('node_modules')) {
                            return id.toString().split('node_modules/')[1].split('/')[0].toString();
                        }
                    }
                }
            }
        }
    })
}

index.vue

<template>
    <div style="width: 100%;height: 700px;background-color: dodgerblue">
        <div id="credit"></div>
        <div id="cesiumContainer"></div>
    </div>
</template>
<script setup lang="ts">
    import { onMounted } from 'vue'
    import * as Cesium from 'cesium';
    import "cesium/Build/Cesium/Widgets/widgets.css";
    onMounted(() => {
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ODBjNDk2Ny0wZTE0LTRmZTQtYjhiNy1hYzU0YTU2Yzg5OTUiLCJpZCI6OTU0MTQsImlhdCI6MTY1NDQ5Nzc3Mn0.w974x050OlPt_2ASlJMwT6VPt5_D9rDCUWuqpVbBcfI'
        const viewer = new Cesium.Viewer("cesiumContainer", {
            // 根据自己的需求显示相关按钮
            geocoder: false,    // 搜索框
            homeButton: false,  // 还原视角
            sceneModePicker: false, // 3D、2D
            baseLayerPicker: false, // 切换图层
            navigationHelpButton: false, // 帮助
            animation: false,   // 时间流速
            creditContainer: 'credit',  // logo
            timeline: false, // 时间轴
            fullscreenButton: false // 全屏按钮
        });

    })
</script>

<style lang="scss">
    @import "./style.scss";
</style>

配置成功