Vue+Cesium快速搭建的方法步骤(无需配置)
方式一：直接引入（最简单）
1.安装Cesium（Vue搭建可以看我上一期的文章）
npm i cesium -save
2.将node_modules\cesium\Build\Cesium文件夹拷贝到项目的public文件中
3.在public\index.html引入Cesium
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
<title><%= htmlWebpackPlugin.options.title %></title>
<!--在这里引入Cesium和css文件-->
<script src="Cesium/Cesium.js"></script>
<link href="Cesium/Widgets/widgets.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4.加载Cesium
当我们在index.html中引入了Cesium.js后，默认Cesium对象就挂载到了Window对象上面，在Vue文件中加载：
<template>
<div class="home">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
export default {
data() {
return {
map: {}
}
},
components: {},
created() {},
mounted() {
const viewer = new window.Cesium.Viewer('cesiumContainer')
console.log(viewer)
},
computed: {},
methods: {
initMap() {}
}
}
</script>
<style scoped lang="scss">
.home {
width: 100%;
height: 100%;
}
#cesiumContainer {
height: 100%;
width: 100%;
}
</style>
5.运行后我们可能会遇到报错Failed to resolve loader: sass-loader
需要引入 sass-loader 和 node-sass 包：
cnpm install sass-loader -D cnpm install node-sass -D
6.接下来就可以看到地球啦！
方式二：使用vue-cli-plugin-cesium 插件安装cesium（需要申请key）
（因为插件基于webpack的，当前插件只支持 VueCLI3.0+ 版本）
1.安装vue-cli-plugin-cesium
vue add vue-cli-plugin-cesium
2.但最后结果都会报错：ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
3.经多次踩坑之后发现，一切问题都是安装的vue-cli脚手架版本太高所致。
卸载vue-cli2：npm uninstall vue-cli -g卸载vue-cli3：npm uninstall @vue/cli -g
vue安装：
npm install -g @vue/cli （安装的是最新版） npm install vue-cli@2.9.6 （指定版本为3.0以下版本） npm install -g @vue/cli@4.5.17（指定版本为3.0以上版本）
其他博主4.5.17版本的vue-cli安装cesium可以成功，所以我就也安装了这个版本。
4.新建项目，重新安装vue-cli-plugin-cesium
安装完成后运行可能会遇到：Error: error:0308010c:digital envelope routines::unsupported [Node Error Solved]修改你的node版本为16.16.0
5.在vue项目中打开main.js，添加在cesium官网申请到的key值：
import { createApp } from 'vue'
import App from './App.vue'
import 'cesium/Widgets/widgets.css'
Cesium.Ion.defaultAccessToken = '申请的key值';
createApp(App).mount('#app')
6.运行项目即可：
npm run serve
到此这篇关于Vue+Cesium快速搭建的方法步骤(无需配置)的文章就介绍到这了,更多相关Vue Cesium搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了Vue3+Vite使用双token实现无感刷新，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
今天小编就为大家分享一篇vue.js 添加 fastclick的支持方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
vue源码学习之Object.defineProperty 对数组监听
这篇文章主要介绍了vue源码学习之Object.defineProperty 对数组监听，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发)
这篇文章主要介绍了Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
在企业开发过程中,往往有着明确的前后端的分工,前端负责接收、使用接口,后端负责编写、处理接口,下面这篇文章主要给大家介绍了关于vue3项目实战中的接口调用的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue进阶构造属性，从4个方面来进行讲解：Directive、Mixin 混入、Extends 继承、provide 和 inject，感兴趣的小伙伴们，赶快来看一下2021-05-05
这篇文章主要介绍了让你30分钟快速掌握vue3，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了Vue实现下拉滚动加载数据的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要给大家介绍了关于如何基于Vue-cli快速搭建项目的完整步骤，文中通过示例代码以及图片将搭建的步骤一步步介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
本文主要介绍了vue el-table实现递归嵌套的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
最新评论