创建vue3项目并集成cesium插件运行

创建vue3项目并集成cesium插件

一、vue项目创建

1、前期准备 node.js&npm或yarn 本地开发环境已经安装好。

参考安装

2、安装vue-cli，要求3以上版本

#先查看是否已经安装
vue -V#安装
npm install -g @vue/cli@4.5.17

示例：Idea工具 页面 Terminal 窗口 安装查看

cmd 命令窗口 查看

3、如果版本不合适，协助重装

#查看版本
vue -V #全局卸载
npm uninstall -g vue-cli

4、创建项目

vue create  vue_cesium_project

示例图

 选择版本，Vue3，点击鼠标下键，然后回车

5、创建完成后进入项目目录

 6、启动项目

yarn serve

示例图

 两个访问地址

  # 自己访问的地址- Local:   http://localhost:8080/ # 同网段别的电脑访问你服务器的地址- Network: http://192.168.1.2:8080/

访问结果

另外这些依赖和配置文件都是创建项目时下载的

 二、配置cesium地图插件

1、安装cesium插件依赖

#默认安装最新的
yarn add cesium#卸载插件
yarn remove cesium#安装指定版本的
yarn add cesium@1.96.0#安装指定版本到测试环境
yarn add cesium@1.96.0 -D

安装成功

 配置文件变化

 cesium目录内容

Build文件夹是打包之后的Cesium库文件（压缩）。

Source文件夹是Cesium整个项目工程的重中之重，涉及到的所有类的源码和自定义shader（渲染）源码都存储在此文件夹里，可以通过阅读源码研究每个类、属性、方法及事件的实现原理。

node_modules 文件夹的目录结构通常是因为 Cesium 使用了 npm 或者其他类似的包管理工具来管理其依赖项和开发环境。

.husky 文件夹通常用于存放 Husky 工具的配置文件和钩子脚本。
.husky 文件夹用于配置 Git 钩子（Git hooks）和相关脚本。

Husky 是一个 Git 钩子工具，它可以让开发人员在 Git 操作的不同阶段执行自定义的脚本，比如在提交代码前执行代码格式化、Lint 检查、单元测试等操作。在 .husky 文件夹中通常会包含一些预定义的 Git 钩子脚本，比如 pre-commit、pre-push 等。开发人员可以根据需要自定义 Git 钩子脚本，并将其放置在 .husky 文件夹中相应的钩子文件中，例如 pre-commit 钩子脚本会在提交代码前执行。配置 Husky 工具的方式通常是在项目的 package.json 文件中添加相应的配置项，例如指定钩子脚本的路径和需要执行的命令等。

 2、卸载后安装指定版本

依赖自动删除

安装指定版本，去官网看看：Downloads – Cesium

找稳定版本方法：GitHub - CesiumGS/cesium: An open-source JavaScript library for world-class 3D globes and maps :earth_americas:

 

比如我们就按照1.99版本

 安装结果

如果安装到开发环境：

 会生成在这里。

整体package.json引用

{"name": "vue_cesium_1","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"cesium": "1.96.0","core-js": "^3.6.5","vue": "^3.0.0","vue-router": "^4.0.0-0","vuex": "^4.0.0-0"},"devDependencies": {"@open-wc/webpack-import-meta-loader": "^0.4.7","@vue/cli-plugin-babel": "~4.5.17","@vue/cli-plugin-eslint": "~4.5.17","@vue/cli-service": "~4.5.17","@vue/compiler-sfc": "^3.0.0","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-vue": "^7.0.0","sass": "^1.26.5","sass-loader": "^8.0.2","strip-pragma-loader": "^1.0.0"},"eslintConfig": {"root": true,"env": {"node": true},"extends": ["plugin:vue/vue3-essential","eslint:recommended"],"parserOptions": {"parser": "babel-eslint"},"rules": {}},"browserslist": ["> 1%","last 2 versions","not dead"]
}

 3、配置入口文件main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'createApp(App).use(store).use(router).mount('#app')

申请令牌步骤：参考

如果不加令牌，也可以，只不过访问不到具体的地图数据。

注意：cesium类的引用问题

#正常情况
import Cesium from 'cesium/Build/Cesium/Cesium';#非正常情况，容易报错，除非你加了其他配置
import Cesium from 'cesium/Cesium';

如果报错，是什么错误呢

This dependency was not found:* cesium/Cesium in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!
./node_modules/vue-loader-v16/dist??ref--1-1!./src/App.vue?vue&type=script&lang=jsTo install it, you can run: npm install --save cesium/Cesium

 大概是找不到cesium相关类。

vue.config.js 配置文件新增然后配置填写内容

// Vue 项目中引入 webpack 模块，以便对 webpack 构建配置进行自定义和扩展。
// webpack 是一个流行的 JavaScript 模块打包工具，Vue CLI 在底层使用 webpack 来进行项目的构建和打包。
const webpack = require('webpack')
const path = require('path')// 引入 Node.js 的 path 模块，以便在 Vue 项目中处理文件路径的操作。
const CopyWebpackPlugin = require('copy-webpack-plugin')// 引入 webpack 插件,以便在 Vue 项目中使用该插件来进行文件复制操作。
const cesiumSource = 'node_modules/cesium/Build/Cesium'// 指定 Cesium 库的源代码路径.module.exports = { // 导出一个对象模块，可以在其他文件中使用 require 来引入这个模块。// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。publicPath: './', // 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')assetsDir: './static', // 当运行 vue-cli-service build 时生成的生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录  默认为"",默认与生成的index.html同级.productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建   这玩意设置成false之后，能把打包后的文件大小减小80%   当时我的项目大小是8m+  设成false之后变成了2m+     productionSourceMap:false,之后，就不会生成map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题，并且不想被看到源码，就把productionSourceMap 置为false，既可以减少包大小，也可以加密源码。// 1.是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。// 2.设置为 true 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。// 3.如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: 'error'。这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败。lintOnSave: false, // 是否开启eslintdevServer: {open: true // 在启动开发服务器时自动打开浏览器}, // (config)：表示传入的参数，即 webpack 的配置对象，可以在这里进行对 webpack 的配置项进行修改和定制。configureWebpack: (config) => { // 表示在 webpack 配置中进行自定义配置。let plugins = []plugins = [// 配置了一个 webpack 的插件 DefinePlugin，用于定义环境变量 CESIUM_BASE_URL。new webpack.DefinePlugin({CESIUM_BASE_URL: JSON.stringify('')// 是设置 Cesium 的基础 URL 为静态资源目录，以便在项目中正确加载和引用 Cesium 相关资源文件。}), // CopyWebpackPlugin 是 webpack 的一个插件，可以在 webpack 构建过程中复制文件或目录，通常用于处理静态资源文件的复制操作。// 将 cesiumSource 目录下的 Workers 目录中的所有文件复制到构建输出目录的 static/Workers 目录中。new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), to: 'Workers' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }])]return {module: {unknownContextCritical: false, // 表示在 webpack 处理模块时，遇到未知的上下文时不会报错，即不会抛出错误。默认情况下，webpack 在遇到未知上下文时会抛出错误，这可能会导致构建失败。rules: [ // 定义了一组模块处理规则，包括对 JavaScript 文件的处理规则。{test: /\.js$/, // 指定匹配的文件类型为 .js 文件。enforce: 'pre', // 表示该 Loader 的执行优先级是最高的，会在其他 Loader 之前执行。// include 表示只对指定的目录或文件进行处理，其他目录或文件不会被处理。// 告诉 webpack 只对指定目录下的模块进行处理，这里指定的目录是 Cesium 库的源码目录。这样可以确保 webpack 只处理 Cesium 源码，而不会对其他模块进行处理，提高构建效率并避免不必要的问题。include: path.resolve(__dirname, 'node_modules/cesium/Source'),sideEffects: false, // 含义是告诉 webpack 模块没有副作用，可以进行一些额外的优化处理,进行 Tree Shaking 优化。。use: [{ // 使用了 strip-pragma-loader 来处理模块，该 Loader 可以去除指定的注释。loader: 'strip-pragma-loader',options: {pragmas: {debug: false}}}]},{test: /.js$/,include: path.resolve(__dirname, 'node_modules/cesium/Source'),// 用于指定模块加载器.使用了名为 @open-wc/webpack-import-meta-loader 的加载器。// 该加载器是为了处理 JavaScript 中的 import.meta.url，在构建过程中将 import.meta.url 替换为文件的实际路径，以便在构建后的代码中使用。use: { loader: require.resolve('@open-wc/webpack-import-meta-loader') }}]},optimization: { // 用于配置 webpack 的优化选项。usedExports: true, // 表示启用 Tree Shaking，即在打包时移除未使用的代码，以减小最终打包文件的体积，提高应用性能。splitChunks: { // 这是 webpack 的代码分割配置，用于将打包后的代码分割成多个包，以便更好地利用浏览器缓存，提升加载速度和性能。maxInitialRequests: Infinity, // 允许并行加载的最大请求数，默认为 3。minSize: 0, // 拆分模块的最小大小，默认为 30000 字节。maxSize: 250000, // 拆分模块的最大大小，默认为 0，表示没有限制。cacheGroups: { // 缓存组配置，用于定义拆分规则。vendor: { // 缓存组名称，用于将来自 node_modules 的模块打包成一个单独的包。test: /[\\/]node_modules[\\/]/, // 正则表达式用于匹配 node_modules 目录下的模块。priority: -10, // 缓存组的优先级，数值越大优先级越高。chunks: 'all', // 表示包含所有类型的 chunk。name (module) { // 根据模块的 context（上下文）生成名称，通常是模块的文件夹名或者包名，用于最终生成的文件名称。// 这是 webpack 中的一个变量，用于获取当前模块的上下文（context），即模块所在的目录路径。// 这是一个正则表达式匹配，用于从模块的上下文中提取模块所在的包名。[\\/]: 匹配斜杠 / 或反斜杠 \。// node_modules[\\/]: 匹配 node_modules/ 或 node_modules\，表示模块在 node_modules 目录下。// (.*?): 匹配任意字符，非贪婪模式，即尽可能少地匹配字符。// ([\\/]|$): 匹配斜杠 / 或反斜杠 \，或者字符串结尾 $，用于确定包名的结束位置。// 这是正则表达式中捕获组的索引，表示获取第一个捕获组的内容，即包名。const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]// 这是对提取的包名进行处理，将其中的 @ 符号替换为空字符串，通常是因为包名中的 @ 符号是用来表示作用域的，例如 @babel/core 中的 @babel 是一个作用域，需要将其去除。//  这是模板字符串，用于生成最终的包名字符串，格式为 npm.包名。return `npm.${packageName.replace('@', '')}`}},commons: { // 缓存组名称，用于将来自 cesium 模块的模块打包成一个单独的包。name: 'Cesium', // 最终生成的文件名称。test: /[\\/]node_modules[\\/]cesium/, // 正则表达式用于匹配 cesium 模块。priority: 10, // 缓存组的优先级，数值越大优先级越高。chunks: 'all' // 表示包含所有类型的 chunk。}}}},output: { // 配置输出的文件信息sourcePrefix: ' '// 是其中的一个选项，用于设置在生成的打包文件中每行代码前添加的前缀。},// 这个配置项表示当 webpack 碰到 AMD 模块的 toUrl 方法未定义时是否报错。通常情况下，AMD 模块规范中有一个 toUrl 方法用于将模块名称转换为实际的模块文件路径，但是在某些情况下，该方法可能会未定义。// 设置 toUrlUndefined: true 表示即使 toUrl 方法未定义，webpack 也不会报错，而是继续处理这些模块，以免因为一个小问题导致整个构建过程中断。amd: {toUrlUndefined: true},resolve: { // 用于配置模块解析的选项，包括模块路径、模块文件的别名等。alias: { // 用于指定模块的别名，使得在代码中可以使用别名来引用模块，而不需要使用相对路径或绝对路径。'@': path.resolve('src') // 表示将 '@' 别名映射到项目中的 src 目录，即当代码中使用 '@' 别名时，webpack 将会解析为项目的 src 目录路径。}},node: { // node 是用于配置 webpack 在 Node.js 环境中模拟的一些全局变量和模块的选项。fs: 'empty', //  禁止 webpack 对 fs 模块的解析，通常用于在客户端项目中避免引入 Node.js 中的文件系统模块，因为在浏览器环境下无法使用。Buffer: false, //  禁止 webpack 对 Buffer 全局对象的解析，通常用于在客户端项目中避免引入 Node.js 中的 Buffer 对象，因为在浏览器环境下无法使用。http: 'empty', // 'empty': 禁止 webpack 对 http 模块的解析，通常用于在客户端项目中避免引入 Node.js 中的 HTTP 模块，因为在浏览器环境下无法使用。https: 'empty',zlib: 'empty' // 禁止 webpack 对 zlib 模块的解析，通常用于在客户端项目中避免引入 Node.js 中的压缩模块，因为在浏览器环境下无法使用。},// plugins 是一个变量，应该是一个包含了需要引入的 webpack 插件的数组。// 表示引入的插件将会按照数组 plugins 中的顺序依次应用到 webpack 构建过程中。plugins: plugins}}
}

这是一个整体的配置，大家可以根据需求自行调整。 

4、App.vue 文件配置

<template><router-view />
</template><style lang="scss">
html,
body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;
}
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #2c3e50;width: 100%;height: 100%;
}
</style>

路由文件router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import CesiumContainer from '../views/CesiumContainer.vue'
const routes = [{path: '/',name: 'CesiumContainer',component: CesiumContainer}
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

 使用 Cesium 对象进行操作，在 mounted 生命周期钩子中创建 Cesium 场景。CesiumContainer.vue 文件

<template><div id="cesiumContainer"></div>
</template><script>
import 'cesium/Build/Cesium/Widgets/widgets.css'
import { onMounted } from 'vue'
import { Viewer } from 'cesium' // OR  /* import * as Cesium from 'cesium' */
import * as Cesium from 'cesium'export default {name: 'CesiumContainer',setup() {onMounted(() => {Cesium.Ion.defaultAccessToken = 'xxxxxxxxxxxx.....yUkGXAtmJBA'/* eslint no-new: */var viewer = new Viewer('cesiumContainer', {animation: true, // 动画小组件baseLayerPicker: true, // 底图组件，选择三维数字地球的底图（imagery and terrain）。fullscreenButton: false, // 全屏组件vrButton: true, // VR模式geocoder: true, // 地理编码（搜索）组件homeButton: true, // 首页，点击之后将视图跳转到默认视角infoBox: true, // 信息框sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。selectionIndicator: true, // 是否显示选取指示器组件timeline: true, // 时间轴navigationHelpButton: true, // 帮助提示，如何操作数字地球。// 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。navigationInstructionsInitiallyVisible: true})})}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#cesiumContainer {width: 100%;height: 100%;
}
</style>

index.html文件不变默认挂载app。 

5、启动验证

6、访问页面：

到此，创建vue3项目并集成cesium插件运行，暂时分享完毕，后期我们会深入讲解，敬请期待！