vue全局引入cesium

在 Vue 中全局引入 Cesium 可以使得在整个项目中都可以使用 Cesium 相关的组件或者函数。下面是全局引入 Cesium 的步骤：

安装 Cesium。在命令行中输入以下命令：
npm install cesium --save
登录后复制

在 Vue 的入口文件（一般为 main.js）中引入 Cesium。
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

Vue.prototype.Cesium = Cesium
登录后复制

在组件中使用 Cesium。在组件的 <template> 中，可以使用 Cesium 的相关标签和组件，例如：
<template>
<div>
<cesium-viewer></cesium-viewer>
</div>
</template>
登录后复制
在组件的 <script> 中，也可以使用 Cesium 相关的函数和方法，例如：
export default {
mounted() {
this.viewer = new this.Cesium.Viewer('cesiumContainer')
}
}
登录后复制

相关问题

vue3引入cesium.js

在 Vue 3 中引入和配置 Cesium.js
一、安装依赖
为了在 Vue 3 项目中使用 Cesium，首先需要通过 npm 或 yarn 安装 cesium 库。
npm install cesium --save
登录后复制
或者
yarn add cesium
登录后复制
二、修改 Webpack 配置
由于 Cesium 的一些模块可能不兼容默认的 Webpack 设置，在 vue.config.js 文件中添加特定配置可以解决潜在的问题[^4]：
const path = require('path');

module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'cesium$': 'cesium/Cesium'
}
},
module: {
unknownContextRegExp: /\/cesium\/.*\.js$/,
unknownContextCritical: false,
exprContextRegExp: /\/cesium\/.*\.js$/,
exprContextCritical: false
}
},
chainWebpack(config) {
config.plugin('html').tap(args => {
args[0].title = 'Cesium in Vue';
return args;
});
}
};
登录后复制
三、全局初始化设置
为了让整个应用程序都能访问到 Cesium 对象以及其资源路径，可以在项目的入口文件 main.ts 或者 main.js 进行如下操作[^2]:
import { createApp } from 'vue';
import App from './App.vue';

// 引入cesium核心库及其样式表
import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';

// 设置Cesium所需的Token和其他基础URL配置
Cesium.Ion.defaultAccessToken = 'your_access_token_here'; // 替换成自己的token
window.CESIUM_BASE_URL = '/libs/';

createApp(App).mount('#app');
登录后复制
四、创建并注册 Earth 组件
接下来定义一个新的组件来承载地球视图逻辑。这里假设该组件名为 EarthComponent.vue:
<template>
<div id="cesiumContainer"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import * as Cesium from 'cesium';

export default defineComponent({
name: 'EarthComponent',
setup() {
let viewer;

onMounted(() => {
viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider : Cesium.createWorldTerrain()
});

document.body.style.margin = "0";
document.body.style.overflow = "hidden";
document.documentElement.style.height = "100%";
document.body.style.height = "100%";
const containerDiv = document.getElementById('cesiumContainer')!;
containerDiv.style.width = '100%';
containerDiv.style.height = '100vh';
});

return {};
},

unmounted() {
if (viewer) {
viewer.destroy();
}
}
});
</script>

<style scoped>
#cesiumContainer {
width: 100%;
height: 100vh;
}
</style>
登录后复制
此部分确保了只有当页面加载完成并且 DOM 已经准备好之后才会尝试渲染三维场景，并设置了必要的 CSS 来让容器占据全部浏览器窗口大小[^3]。
最后一步是在应用的主要布局或其他合适的地方导入这个新创建的地图组件即可正常使用 Cesium 功能。

vue2引入cesium.js

在 Vue 2 中引入和配置 Cesium.js
方法一：通过 HTML 文件引入 Cesium 的 JavaScript 文件
可以在 index.html 文件中直接引入 Cesium 的 JavaScript 文件：
<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:
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 对象：
{
...
"eslintConfig": {
...
"globals": {
"Cesium": true
}
},
...
}
登录后复制
这一步骤能够有效防止由于静态分析工具造成的误报警告信息[^4]。