使用開源Cesium+Vue實(shí)現(xiàn)傾斜攝影三維展示功能

更新時(shí)間：2022年07月20日 08:55:23 作者：kiba518

這篇文章主要介紹了使用開源Cesium+Vue實(shí)現(xiàn)傾斜攝影三維展示,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

準(zhǔn)備工作

VUE開發(fā)工具：Visual studio Code

傾斜攝影轉(zhuǎn)換工具：CesiumLab—下載地址：http://www.cesiumlab.com/

三維顯示：Cesium，api參考網(wǎng)站：https://cesium.com/learn/cesiumjs/ref-doc/Camera.html#setView

下圖為CesiumLab提供的數(shù)據(jù)處理流程圖，我們可以參考學(xué)習(xí)。

功能實(shí)現(xiàn)

首先我們安裝VsCode，然后安裝Vue，然后依次操作，新建文件夾kibacesium，打開VsCode—打開文件夾kibacesium—點(diǎn)擊終端—在終端內(nèi)輸入命令npm install -g @vue/cli@4下載vue腳手架4；命令如下。

npm i vue -g
npm uninstall vue-cli -g 卸載舊版本
npm cache clean --force 清除緩存
npm install -g @vue/cli@4  安裝最新版Vue腳手架 Vue CLI 4   
npm install npm@latest 更新npm到最新版本，避免編譯出問題

準(zhǔn)備好vue后，創(chuàng)建vue項(xiàng)目，項(xiàng)目名稱kibacesium。

vue create kibacesium

在彈出的選項(xiàng)里，選擇Vue3，如下圖。

Vue項(xiàng)目創(chuàng)建完成后，會(huì)在我們的創(chuàng)建的文件夾kibacesium下再創(chuàng)建一個(gè)文件夾kibacesium，所以我們需要使用VsCode重新打開文件夾，路徑kibacesium/kibacesium。

然后執(zhí)行命令：

npm run serve

如下圖，項(xiàng)目運(yùn)行成功。

然后安裝cesium的插件——vue-cli-plugin-cesium（只支持 VueCLI3.0+ 版本）。

參考網(wǎng)站：https://github.com/isboyjc/vue-cli-plugin-cesium

安裝命令

vue add vue-cli-plugin-cesium

插件安裝過程中會(huì)有三個(gè)詢問，內(nèi)容如下：

詢問一

Please choose a version of 'cesium' from this list
請?jiān)诹斜碇羞x擇 cesium 的版本

在此選擇想使用的 Cesium 版本

詢問二

Whether to import styles globally. 
This operation will automatically import widgets.css in main.js
是否全局引入樣式,該操作將自動(dòng)在main.js引入widgets.css？

此項(xiàng)默認(rèn)為 yes，該操作將自動(dòng)在 main.js 引入 widgets.css，即全局引入 Cesium 的 css 樣式

如果此項(xiàng)設(shè)置為 no，那么開發(fā)時(shí)我們要手動(dòng)引入widgets.css樣式文件，引入命令如下

import "cesium/Widgets/widgets.css"

詢問三

Whether to add sample components to the project components directory
是否添加示例組件到項(xiàng)目components目錄?

此選項(xiàng)默認(rèn)為 yes，該操作會(huì)自動(dòng)在 src/components 文件夾下生成 CesiumExample 文件夾，此文件夾中包含一些 Cesium 的使用示例供參考

如果此項(xiàng)設(shè)置為 no，則不生成示例文件

生成的示例中每個(gè)文件為一個(gè)模塊，可直接模塊引入至項(xiàng)目中查看。

cesium的插件安裝完成后，代碼結(jié)構(gòu)如下圖（注意，這里我并沒有配置vue.config.js文件）：

項(xiàng)目里增加了CesiumExample文件夾和一個(gè)實(shí)例vue文件。

運(yùn)行前，我們再執(zhí)行一次npm install，重新安裝一下依賴，避免編譯會(huì)報(bào)錯(cuò)。

然后修改helloWorld.Vue文件如下：

<template>
  <div>
    <No01InitVue></No01InitVue>
  </div>
 
</template>
 
<script>
import No01InitVue from './CesiumExample/No01-init.vue'
export default {
  name: 'HelloWorld',
   components: {
    No01InitVue
  },
  props: {
    msg: String
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

然后執(zhí)行命令：

npm run serve

網(wǎng)站啟動(dòng)后，在瀏覽器輸入http://localhost:8080/訪問，頁面如下：

PS：修改package.json里的代碼驗(yàn)證規(guī)則，增加"no-undef": "off"，因?yàn)镃esium是被注入的對象，不添加這個(gè)規(guī)則就必須一直在Cesium對象相關(guān)代碼上面加注釋——// eslint-disable-next-line no-undef

加載傾斜攝影

傾斜攝影切片

首先安裝CesiumLab，然后打開CesiumLab，默認(rèn)網(wǎng)址：http://localhost:9003/index.html。

點(diǎn)擊傾斜模型切片，然后在數(shù)據(jù)路徑輸入傾斜攝影文件夾。

如果輸入正確的傾斜攝影文件夾，那么空間參考和零點(diǎn)坐標(biāo)會(huì)自動(dòng)讀取出來。

然后在右側(cè)存儲(chǔ)類型中添加輸出路徑，并未clt文件命名。

然后點(diǎn)擊提交處理。

處理完成后，系統(tǒng)會(huì)把切片的傾斜攝影發(fā)布成服務(wù)，點(diǎn)擊分發(fā)服務(wù)——3dtiles服務(wù)，如下圖所示：

顯示傾斜攝影

在項(xiàng)目中增加文件——No02-3D.vue，使用我們剛剛發(fā)布服務(wù)地址，將三維圖像展示處理，輸入代碼如下：

<template>
  <div class="map-box">
    <div id="cesiumContainer"></div>
  </div>
</template>
 
<script>
export default {
  name: "",
  mounted() {
    this.show3DTile();
  }
  ,
  methods: {
    show3DTile() {
      var url = 'http://192.168.19.112:9003/model/tEn5ey1J3/tileset.json';
      // eslint-disable-next-line no-unused-vars
      const viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain(),
      });
      window.viewer = viewer;
      // eslint-disable-next-line no-unused-vars
      let tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        url: url,
        // modelMatrix: Cesium.Matrix4.fromArray([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]),
        baseScreenSpaceError: 1024,
        //【重要】數(shù)值加大，能讓最終成像變模糊
        skipScreenSpaceErrorFactor: 16,
        skipLevels: 1,
        immediatelyLoadDesiredLevelOfDetail: false,
        loadSiblings: false,
        cullWithChildrenBounds: true,
        skipLevelOfDetail: true, //開啟跳級加載
        //這個(gè)參數(shù)默認(rèn)是false，同等條件下，葉子節(jié)點(diǎn)會(huì)優(yōu)先加載。但是Cesium的tile加載優(yōu)先級有很多考慮條件，
        //這個(gè)只是其中之一，如果skipLevelOfDetail=false，這個(gè)參數(shù)幾乎無意義。所以要配合skipLevelOfDetail=true來使用，
        //此時(shí)設(shè)置preferLeaves=true。這樣我們就能最快的看見符合當(dāng)前視覺精度的塊，對于提升大數(shù)據(jù)以及網(wǎng)絡(luò)環(huán)境不好的前提下有一點(diǎn)點(diǎn)改善意義。
        preferLeaves: true,
        //【重要】內(nèi)存建議顯存大小的50%左右，內(nèi)存分配變小有利于傾斜攝影數(shù)據(jù)回收，提升性能體驗(yàn)
        maximumMemoryUsage: 1024
        //控制切片視角顯示的數(shù)量，可調(diào)整性能
        // maximumScreenSpaceError: 2,//最大的屏幕空間誤差
        // maximumNumberOfLoadedTiles: 100000, //最大加載瓦片個(gè)數(shù)
      }));
      window.viewer.flyTo(tileset)
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
      });
    }
  }
};
</script>
<style scoped>
.map-box {
  width: 100%;
  height: 100%;
}
 
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

頁面效果如下：