快捷導(dǎo)航

Vue+Cesium快速搭建的方法步驟(無需配置)

更新時間：2024年08月02日 10:54:09 作者：王八八。

本文主要介紹了Vue+Cesium快速搭建的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

方式一：直接引入（最簡單）

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

當(dāng)我們在index.html中引入了Cesium.js后，默認(rèn)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的，當(dāng)前插件只支持 VueCLI3.0+ 版本）

1.安裝vue-cli-plugin-cesium

vue add vue-cli-plugin-cesium

2.但最后結(jié)果都會報錯：ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.

3.經(jīng)多次踩坑之后發(fā)現(xiàn)，一切問題都是安裝的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官網(wǎng)申請到的key值：

import { createApp } from 'vue'
import App from './App.vue'
import 'cesium/Widgets/widgets.css'
Cesium.Ion.defaultAccessToken = '申請的key值';

createApp(App).mount('#app')

6.運行項目即可：