vue項目引入cesium,創(chuàng)建3d地球,快速上手~

這篇具有很好參考價值的文章主要介紹了vue項目引入cesium,創(chuàng)建3d地球,快速上手~。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

最近開發(fā)的可視化項目中用到cesium庫,準備把自己從中學習的功能,全部記錄下來,完整項目demo預覽地址:點擊預覽完整項目

引入ceium

網(wǎng)上有很多種引入,在此只介紹一種最簡單的,也是本項目中使用的.
首先要先有一個cesium的庫,這里我建議直接npm下載,自己也可以從github下載

npm install cesium@1.8

因為不同版本可能有所出入,本系列都將采用1.82版本,之后在項目node_modules文件下找到我們下載好的依賴.

vue引入cesium,cesium筆記,vue.js,3d,javascript
之后我們找到cesium>build下的文件,框起來的文件就是我們需要的,第一個是經(jīng)過編譯壓縮的,第二個是完整未壓縮的,我建議兩個都拷貝走.開發(fā)的時候引入第一個,如果出現(xiàn)報錯會有報錯的詳細,而壓縮的則沒有,生產(chǎn)的時候換成壓縮的,體積小.之后復制到項目的public文件下

vue引入cesium,cesium筆記,vue.js,3d,javascript

然后在項目piblic下index.html引入該文件(以引入完整的為例)

      <!-- cesium導入 -->
      <script src="./Cesium2/Cesium.js"></script>
      <!-- cesium樣式文件 -->
      <link rel="stylesheet" href="./Cesium2/Widgets/widgets.css" />

初始化地球

初始化準備工作,先準備一個標簽

<template>
  <div>
    <div id="cesium-container"></div>
  </div>
</template>

注意這個標簽要設置寬高,不然你看不見東西.

  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      //要提前準備一個token(這個沒有也沒關系,后面我們不用這個)
      //Cesium 官網(wǎng)注冊的key https://ion.cesium.com/signin
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDZkMmIwZS01ZTFmLTRlYTEtOGRjNy05M2I0MzU4OTlhZTMiLCJpZCI6MTMzNDUwLCJpYXQiOjE2ODEzNTM3OTN9.6fKSEcApT4KcZE-iTJp4HrNKjTlc3mgDYZuF79cL0Ig'
      //如果沒有上面的那個token,你生成的界面沒有地球是正常的
      //第一個參數(shù)是標簽的id,第二個參數(shù)是相關配置,我們先不寫
      new Cesium.Viewer('cesium-container', {})
    },
  }

之后看見下面的效果,就證明前面的都沒問題.

vue引入cesium,cesium筆記,vue.js,3d,javascript

文檔api介紹

推薦一個中文文檔,當然網(wǎng)上還有好多.
http://cesium.xin/cesium/cn/Documentation1.62/index.html
進入文檔,搜索剛才我們初始化的方法

vue引入cesium,cesium筆記,vue.js,3d,javascript
寫的很清楚,參數(shù)含義,使用方法.之后用不明白的可以查看文檔.

之后我們根據(jù)文檔的配置,去除我們不需要的功能,(我們只要一個地球)

    init() {
      //Cesium 官網(wǎng)注冊的key https://ion.cesium.com/signin
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDZkMmIwZS01ZTFmLTRlYTEtOGRjNy05M2I0MzU4OTlhZTMiLCJpZCI6MTMzNDUwLCJpYXQiOjE2ODEzNTM3OTN9.6fKSEcApT4KcZE-iTJp4HrNKjTlc3mgDYZuF79cL0Ig'
      window.viewer = new Cesium.Viewer('cesium-container', {
        terrainProvider: Cesium.createWorldTerrain(),//創(chuàng)建全球范圍內(nèi)的地形數(shù)據(jù)集
        geocoder: false, // 是否顯示搜索按鈕
        homeButton: false, // 是否顯示主頁按鈕
        animation: false, // 是否顯示左下角的儀表盤
        baseLayerPicker: false, // 是否顯示圖層選擇器按鈕，右上角那個地圖圖標
        fullscreenButton: false, // 是否顯示全屏按鈕
        sceneModePicker: false, // 是否顯示右上角的模式切換按鈕
        selectionIndicator: false, // 是否顯示選取指示器組件
        timeline: false, // 是否顯示下邊的時間軸
        navigationHelpButton: false, // 是否顯示右上角的幫助按鈕

        vrButton: false, // 是否顯示VR按鈕
        infoBox: false, // 是否顯示提示信息
        navigationInstructionsInitiallyVisible: true, // 是不顯示導航
        scene3DOnly: true, // 是否指定僅為三維模式，全部使用三維模式可節(jié)約 GPU 資源
      })
      viewer.cesiumWidget.creditContainer.style.display = "none";// 隱藏Logo，水印
    },

之后再刷新頁面,就可以得到一個純凈的地球頁面

vue引入cesium,cesium筆記,vue.js,3d,javascript
到此我們就完成了一個可視化的3d地球.

封裝js

因為后面還有很多的功能,我們不可能每個組件內(nèi)都寫一堆cesium的代碼,所以我們將所有有關cesium的東西都封裝在一起,在需要的地方引入即可.
新建一個js文件,我們就叫Xcesium.js.之后將我們剛才初始化的方法加入到封裝類.(如果你后續(xù)不需要那么多功能,你也可以不封裝)

class XCesium {
  constructor() { }
  initData() {
    this.viewer = null
  }
  // 初始化
  init() {
    //Cesium 官網(wǎng)注冊的key https://ion.cesium.com/signin
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDZkMmIwZS01ZTFmLTRlYTEtOGRjNy05M2I0MzU4OTlhZTMiLCJpZCI6MTMzNDUwLCJpYXQiOjE2ODEzNTM3OTN9.6fKSEcApT4KcZE-iTJp4HrNKjTlc3mgDYZuF79cL0Ig'
    this.viewer = new Cesium.Viewer('cesium-container', {
      terrainProvider: Cesium.createWorldTerrain(),//創(chuàng)建全球范圍內(nèi)的地形數(shù)據(jù)集
      geocoder: false, // 是否顯示搜索按鈕
      homeButton: false, // 是否顯示主頁按鈕
      animation: false, // 是否顯示左下角的儀表盤
      baseLayerPicker: false, // 是否顯示圖層選擇器按鈕，右上角那個地圖圖標
      fullscreenButton: false, // 是否顯示全屏按鈕
      sceneModePicker: false, // 是否顯示右上角的模式切換按鈕
      selectionIndicator: false, // 是否顯示選取指示器組件
      timeline: false, // 是否顯示下邊的時間軸
      navigationHelpButton: false, // 是否顯示右上角的幫助按鈕

      vrButton: false, // 是否顯示VR按鈕
      infoBox: false, // 是否顯示提示信息
      navigationInstructionsInitiallyVisible: true, // 是不顯示導航
      scene3DOnly: true, // 是否指定僅為三維模式，全部使用三維模式可節(jié)約 GPU 資源
      requestRenderMode: true, // 啟用請求渲染模式
      // https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer
      // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      //   url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
      // })
    })
    this.viewer.cesiumWidget.creditContainer.style.display = "none";// 隱藏Logo，水印
    return this.viewer
  }
}
export default new XCesium()

之后在我們的組件引入

我們把返回的實例掛載到window,不要用Viewer命名,容易混淆
為什么掛載在window,因為vue.data對數(shù)據(jù)進行劫持,造成性能損耗
XViewer可以理解為我們創(chuàng)建的整個場景實例,可以直接.方法名調(diào)用官方的方法
XCesium是我們自己封的類,可以直接.方法名調(diào)用我們自己寫的方法

import  XCesium  from '@/utils/Xcesium.js'
export default {
  mounted() {
    //初始化
    window.XViewer = XCesium.init()
    console.log('window.XViewer', window.XViewer);
    console.log('XCesium',XCesium);
  },
}

vue引入cesium,cesium筆記,vue.js,3d,javascript
可以看到兩個輸出結果,XViewer是一個Viwer類,可以在官方文檔中搜索Viwer類方法使用,例如后面最常用的飛行flyTo聚焦zoomTo,而XCesium是我們自己封裝的類,后續(xù)我們寫的方法可以在此類下直接調(diào)用.

本文主要介紹如何引入cesium并生成3d地球,并在項目中封裝自己的cesium.后續(xù)教程基于此封裝繼續(xù)延伸!文章來源地址http://www.zghlxwxcb.cn/news/detail-537328.html