vue2引入cesium

### 在 Vue 2 中引入和配置 Cesium.js #### 方法一：通过 HTML 文件引入 Cesium 的 JavaScript 文件 可以在 `index.html` 文件中直接引入 Cesium 的 JavaScript 文件： ```html <script src="Cesium/Cesium.js"></script> ``` 这种方法简单易行，但是可能会遇到全局变量未定义的问题[^1]。 #### 方法二：在入口文件中引入 Cesium 库 尝试在项目的 `index.js` 或者其他入口文件中引入 Cesium 依赖库。然而这样做会引发错误，因为默认情况下 Webpack 并不支持这种加载方式。官方博客提供了详细的教程说明如何从 Webpack 整合 Cesium NPM 模块并探索更高级别的优化配置[^2]。 #### 方法三：在 main.ts (或 main.js) 中引入 Cesium 对于 TypeScript 用户来说，在 `main.ts` 文件内可以这样操作来初始化 Cesium: ```typescript import { Ion } from 'cesium'; import 'cesium/Build/Cesium/Widgets/widgets.css'; Ion.defaultAccessToken = '第一步申请的 Access Token'; window.CESIUM_BASE_URL = '/libs'; ``` 这段代码不仅设置了访问令牌还指定了资源的基础路径[^3]。 #### 解决常见问题 当采用方法一时，如果遇到了类似 “Cesium is not defined”的报错提示，则应该修改 `package.json` 文件中的 ESLint 设置部分，添加如下内容以允许全局使用 Cesium 对象： ```json { ... "eslintConfig": { ... "globals": { "Cesium": true } }, ... } ``` 这一步骤能够有效防止由于静态分析工具造成的误报警告信息[^4]。

### 在 Vue 2 中引入和配置 Cesium 1.103.0 #### 安装依赖项 为了在 Vue 2 项目中使用 Cesium 1.103.0，需要先安装必要的 npm 包。通过命令行工具执行以下命令来安装 cesium： ```bash npm install [email protected] --save ``` 这会下载并保存指定版本的 Cesium 到项目的 `node_modules` 文件夹下。 #### 配置 Webpack 由于 Cesium 的构建文件较大，默认情况下可能会遇到性能问题或打包体积过大的情况。因此建议修改 webpack 配置以优化加载速度。可以在 vue.config.js 中添加如下设置[^1]: ```javascript const path = require('path'); module.exports = { configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, 'src'), Cesium: path.resolve(__dirname, 'node_modules/cesium') } }, module: { rules: [ { test: /\.js$/, include: /cesium/, use: [{ loader: 'babel-loader' }] }, { test: /\.(png|jpg|gif|svg|woff|woff2)$/, exclude: /(cesium\/Build)/, use: ['url-loader'] }, { test: /\.(glsl|vs|fs|vert|frag)$/, exclude: /node_modules/, use: ['raw-loader', 'glslify-loader'] } ] } }, chainWebpack(config) { config.plugin('html').tap(args => { args[0].title = "Cesium Example"; return args; }); } }; ``` 此配置解决了路径别名定义、Babel 编译以及资源处理等问题。 #### 初始化 Cesium Viewer 组件 创建一个新的组件用于展示 Cesium 场景视图，在 src/components/CesiumViewer.vue 内编写代码如下所示: ```vue <template> <div id="cesiumContainer"></div> </template> <script> import * as Cesium from 'cesium'; export default { name: 'CesiumViewer', mounted() { this.initCesium(); }, methods: { initCesium() { const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain(), shouldAnimate: true }); // 添加标绘功能支持 let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); function addDrawingTools(viewer){ // 实现点、线、面绘制逻辑... } addDrawingTools(viewer); window.viewer = viewer; // 方便调试时访问全局变量 } } } </script> <style scoped> #cesiumContainer { width: 100%; height: calc(100vh - 8px); /* 考虑到页面布局调整 */ } </style> ``` 上述模板包含了基本的地图初始化过程，并预留了扩展接口以便后续实现更复杂的交互特性如点、线、面绘制等功能。 #### 注册自定义组件 最后一步是在 main.js 或者 App.vue 中注册刚刚创建好的 CesiumViewer 组件，使其成为应用的一部分： ```javascript // main.js or App.vue import Vue from 'vue'; import App from './App.vue'; import CesiumViewer from '@/components/CesiumViewer'; Vue.component('cesium-viewer', CesiumViewer); new Vue({ render: h => h(App), }).$mount('#app'); ``` 现在应该能够在应用程序中看到一个完整的三维地球仪界面，并可以进一步开发所需的地理信息系统(GIS) 功能。