在vue3中使用Cesium的保姆教程

news2025/5/17 17:12:13

1. 软件下载与安装

1. node安装

Vue.js 的开发依赖于 Node.js 环境，因此我们首先需要安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它允许你在服务器端运行 JavaScript 代码，同时也为前端开发提供了强大的工具支持。

官网下载 Node.js，Node.js 中文网地址：下载 | Node.js 中文网。在下载页面中，你可以根据自己的系统版本选择合适的安装包。一般来说，推荐下载最新版本的 Node.js，以确保你能够使用最新的特性和功能。

安装比较简单，可以参考：node安装步骤，完成node安装，下载安装完成后

2. 检查是否安装成功

打开window+r快捷键打开，输入cmd，回车，然后输入node -v命令

安装成功显示node版本

node -v

2. 介绍npm、cnpm、yarn、pnpm

1.npm

npm是 node.js 的模块依赖管理工具

常见场景：

允许用户从 npm 服务器下载别人编写的第三方包到本地使用。
允许用户从 npm 服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到 npm 服务器供别人使用。

2. cnpm

使用 npm 安装包时，需要去 npm 仓库获取，而 npm 仓库在国外，很不稳定，有时获取会失败。淘宝搭建了一个国内npm服务器，会定时拉取国外npm仓库内容，把国外的搬运到国内。

设置使用淘宝镜像

npm install -g cnpm --registry=http://registry.npmmirror.com

检查是否安装成功：cnpm -v 安装成功后，后续用npm还是使用cnpm安装都可以。如下图：cnpm安装成功

3. yarn

官网：yarn - npm

快速：Yarn缓存了它下载的每个包，所以它再也不需要下载同一个包了。它还几乎同时执行所有操作，以最大限度地提高资源利用率。这意味着安装速度更快。
可靠：使用详细但简洁的锁定文件格式和确定性的安装操作算法，Yarn能够保证在一个系统上运行的任何安装在另一个系统上将完全相同。
安全：在执行代码之前，Yarn使用校验和来验证每个安装包的完整性安装

安装yarn

npm install --global yarn

查看版本

yarn --version

yarn 是用 yarn add 代替 npm install
yarn remove 代替 npm uninstall

安装依赖模块
        yarn add [package]
        yarn add [package]@[version]
        yarn add [package]@[tag]
删除依赖模块：yarn remove [package]
更新依赖模块
        yarn upgrade [package]
        yarn upgrade [package]@[version]
        yarn upgrade [package]@[tag]
配置源。yarn默认的源地址：https://registry.yarnpkg.com ，如果下载太慢，可以修改源
查看镜像源：yarn config get registry
绑定镜像源：yarn config set registry https://registry.npmmirror.com
删除镜像源（注意这里是 delete）：yarn config delete registry

4. pnpm

pnpm 由 npm/yarn 衍生而来，解决了 npm/yarn 内部潜在的 bug，极大的优化了性能，扩展了使用场景。被誉为最先进的包管理工具。

安装pnpm

npm install -g pnpm

pnpm add 安装软件包及其依赖的任何软件包。默认情况下，任何新软件包都安装为生产依赖项。

pnpm add sax      # 保存到 dependencies
pnpm add -D sax   # 保存到 devDependencies
pnpm add -O sax   # 保存到 optionalDependencies
pnpm add -g sax   # 安装包到全局
pnpm add sax@next   #从 next 标签下安装
pnpm add sax@3.0.0  #安装指定版本 3.0.0

2. 创建vue3项目

1. 使用 Vue CLI 创建 Vue 3 项目

这里用cnpm作为演示案列，也可以使用yarn、pnpm等管理工具。

1. 安装 Vue CLI

如果你还没有安装 Vue CLI，可以通过 npm（Node Package Manager）来安装。打开终端或命令提示符并运行：

npm install -g @vue/cli

2. 创建项目

vue create my-vue-project

在提示中选择 Vue 3 的配置。Vue CLI 会让你选择一系列预设，你可以选择手动选择特性，然后确保选择了 Vue 3。

3. 进入项目

cd my-vue-project

4. 安装依赖包

cnpm install

5. 运行项目

cnpm run dev

2. 使用Vite创建Vue3项目

1.全局安装Vite

cnpm install -g create-vite

2. 创建项目

cnpm create vite@latest my-vue-project -- --template vue

3.进入项目、安装依赖、运行项目

如使用Vue Cli安装3、4、5步骤一样

3. 通过命令下载cesium

通过命令下载Cesium和Plugin

cnpm install cesium

cnpm install vite-plugin-cesium -D

vite.config.js配置如下：

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


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

4. 在组件中使用cesium

import * as Cesium from "cesium";

设置容器

<template>
  <div class="cesium" id="cesiumContainer" style="width: 100%;height: 100vh;"></div>
</template>

初始化cesium地图：

const cesiumConfig = {
        // 主页按钮
        homeButton: false,
        // 场景模式选择器
        sceneModePicker: false,
        // 全屏按钮
        fullscreenButton: false,
        // 是否显示点击要素之后显示的信息
        infoBox: false,
        // 要素选中框
        selectionIndicator: false,
        // 影像切换
        baseLayerPicker: false,
        // 启用了阴影效果
        shadows: true,
        // 启用动画
        shouldAnimate: true,
        // 是否显示动画控件
        animation: false,
        // 是否显示时间线控件
        timeline: false,
        // 是否显示地名查找控件
        geocoder: false,
        // 是否显示帮助信息控件
        navigationHelpButton: false,
        contextOptions: {
            contextType: 2, // Webgl2:2 ; WebGPU:3
        },
        // 版权信息
        creditContainer: document.createElement('div')
    }

 viewer = new Cesium.Viewer('cesiumContainer',cesiumConfig)

全部代码：

<template>
  <div class="cesium" id="cesiumContainer" style="width: 100%;height: 100vh;"></div>
</template>

<script setup>
    import {onMounted} from "vue";
    import * as Cesium from "cesium";
    let viewer;

    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MGQ2MGRkYS1lNDAzLTRmNjEtOGQ3ZC0xOGE2NmZhMmRhMDgiLCJpZCI6NjgzNTYsImlhdCI6MTc0NzM2MjY1OH0.flKVgGOtDCPSQc2OaWX0lyW7YblQPwFQyHduDn3_Igo';
    const cesiumConfig = {
        // 主页按钮
        homeButton: false,
        // 场景模式选择器
        sceneModePicker: false,
        // 全屏按钮
        fullscreenButton: false,
        // 是否显示点击要素之后显示的信息
        infoBox: false,
        // 要素选中框
        selectionIndicator: false,
        // 影像切换
        baseLayerPicker: false,
        // 启用了阴影效果
        shadows: true,
        // 启用动画
        shouldAnimate: true,
        // 是否显示动画控件
        animation: false,
        // 是否显示时间线控件
        timeline: false,
        // 是否显示地名查找控件
        geocoder: false,
        // 是否显示帮助信息控件
        navigationHelpButton: false,
        contextOptions: {
            contextType: 2, // Webgl2:2 ; WebGPU:3
        },
        // 版权信息
        creditContainer: document.createElement('div')
    }
    const initMap = () => {
        viewer = new Cesium.Viewer('cesiumContainer',cesiumConfig)
    }
    onMounted(() => {
        initMap();
    })
</script>

<style lang="less" scoped></style>

运行项目，效果如下：