準備工作
VUE開發工具：Visual studio Code
傾斜攝影轉換工具：CesiumLab—下載地址：http://www.cesiumlab.com/
三維顯示：Cesium，api參考網站：https://cesium.com/learn/cesiumjs/ref-doc/Camera.html#setView
下圖爲CesiumLab提供的數據處理流程圖，我們可以參考學習。
功能實現
首先我們安裝VsCode，然後安裝Vue，然後依次操作，新建文件夾kibacesium，打開VsCode—打開文件夾kibacesium—點擊終端—在終端內輸入命令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到最新版本，避免編譯出問題
準備好vue後，創建vue項目，項目名稱kibacesium。
vue create kibacesium
在彈出的選項裏，選擇Vue3，如下圖。
Vue項目創建完成後，會在我們的創建的文件夾kibacesium下再創建一個文件夾kibacesium，所以我們需要使用VsCode重新打開文件夾，路徑kibacesium/kibacesium。
然後執行命令：
npm run serve
如下圖，項目運行成功。
然後安裝cesium的插件——vue-cli-plugin-cesium（只支持 VueCLI3.0+ 版本）。
參考網站：https://github.com/isboyjc/vue-cli-plugin-cesium
安裝命令
vue add vue-cli-plugin-cesium
插件安裝過程中會有三個詢問，內容如下：
詢問一
Please choose a version of 'cesium' from this list
請在列表中選擇 cesium 的版本
在此選擇想使用的 Cesium 版本
詢問二
Whether to import styles globally.
This operation will automatically import widgets.css in main.js
是否全局引入樣式,該操作將自動在main.js引入widgets.css？
此項默認爲 yes，該操作將自動在 main.js 引入 widgets.css，即全局引入 Cesium 的 css 樣式
如果此項設置爲 no，那麼開發時我們要手動引入widgets.css樣式文件，引入命令如下
import "cesium/Widgets/widgets.css"
詢問三
Whether to add sample components to the project components directory
是否添加示例組件到項目components目錄?
此選項默認爲 yes，該操作會自動在 src/components 文件夾下生成 CesiumExample 文件夾，此文件夾中包含一些 Cesium 的使用示例供參考
如果此項設置爲 no，則不生成示例文件
生成的示例中每個文件爲一個模塊，可直接模塊引入至項目中查看。
cesium的插件安裝完成後，代碼結構如下圖（注意，這裏我並沒有配置vue.config.js文件）：
項目裏增加了CesiumExample文件夾和一個實例vue文件。
運行前，我們再執行一次npm install，重新安裝一下依賴，避免編譯會報錯。
然後修改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>
然後執行命令：
npm run serve
網站啓動後，在瀏覽器輸入http://localhost:8080/訪問，頁面如下：
PS：修改package.json裏的代碼驗證規則， 增加"no-undef": "off"，因爲Cesium是被注入的對象，不添加這個規則就必須一直在Cesium對象相關代碼上面加註釋——// eslint-disable-next-line no-undef
更多地圖功能
想要進行更多地圖功能的開發，需要下載Cesium源碼—下載地址：https://github.com/CesiumGS/cesium。
下載後的代碼，用VSCode打開，然後執行npm install安裝依賴，然後執行 npm run build（注意，必須先執），
然後執行npm start。
啓動後點擊Sandcastle (built version)，如下圖：
可以在頁面檢索我們想要使用的功能示例，可以輸入hello，widget等關鍵字，如下圖。
加載Arcgis Server提供的默認矢量地圖
修改No01-init.vue代碼如下：
<template>
<div class="map-box">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
export default {
name: "",
mounted() {
// var viewer = new Cesium.CesiumWidget('cesiumContainer')
// eslint-disable-next-line no-undef
//var viewer = new Cesium.Viewer("cesiumContainer");
// eslint-disable-next-line no-console
// console.log(viewer)
this.init();
}
,
methods: {
init() {
let url = "http://192.168.1.1:6080/arcgis/rest/services/SampleWorldCities/MapServer";
// eslint-disable-next-line no-undef
let geogle = new Cesium.ArcGisMapServerImageryProvider({ url: url });
// eslint-disable-next-line no-undef
this.viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false, //是否顯⽰圖層選擇控件
selectionIndicator: false,
// geocoder: false, //是否顯⽰地名查找控件
// sceneModePicker: false, //是否顯⽰投影⽅式控件
// navigationHelpButton: false, //是否顯⽰幫助信息控件
// homeButton: false, //是否顯⽰Home按鈕
// fullscreenButton: false, //是否顯⽰全屏按鈕
// timeline:false, //時間軸控件
// animation:false, //動畫控件
imageryProvider: geogle,
// terrainProvider:new Cesium.createWorldTerrain({
// requestVertexNormals:true,
// requestWaterMask:true
// }),
});
},
}
};
</script>
<style scoped>
.map-box {
width: 100%;
height: 100%;
}
#cesiumContainer {
width: 100%;
height: 100%;
}
</style>
界面如下：
加載傾斜攝影
傾斜攝影切片
首先安裝CesiumLab，然後打開CesiumLab，默認網址：http://localhost:9003/index.html。
點擊傾斜模型切片，然後在數據路徑輸入傾斜攝影文件夾。
如果輸入正確的傾斜攝影文件夾，那麼空間參考和零點座標會自動讀取出來。
然後在右側存儲類型中添加輸出路徑，並未clt文件命名。
然後點擊提交處理。
處理完成後，系統會把切片的傾斜攝影發佈成服務，點擊分發服務——3dtiles服務，如下圖所示：
顯示傾斜攝影
在項目中增加文件——No02-3D.vue，使用我們剛剛發佈服務地址，將三維圖像展示處理，輸入代碼如下：
<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,
//【重要】數值加大，能讓最終成像變模糊
skipScreenSpaceErrorFactor: 16,
skipLevels: 1,
immediatelyLoadDesiredLevelOfDetail: false,
loadSiblings: false,
cullWithChildrenBounds: true,
skipLevelOfDetail: true, //開啓跳級加載
//這個參數默認是false，同等條件下，葉子節點會優先加載。但是Cesium的tile加載優先級有很多考慮條件，
//這個只是其中之一，如果skipLevelOfDetail=false，這個參數幾乎無意義。所以要配合skipLevelOfDetail=true來使用，
//此時設置preferLeaves=true。這樣我們就能最快的看見符合當前視覺精度的塊，對於提升大數據以及網絡環境不好的前提下有一點點改善意義。
preferLeaves: true,
//【重要】內存建議顯存大小的50%左右，內存分配變小有利於傾斜攝影數據回收，提升性能體驗
maximumMemoryUsage: 1024
//控制切片視角顯示的數量，可調整性能
// maximumScreenSpaceError: 2,//最大的屏幕空間誤差
// maximumNumberOfLoadedTiles: 100000, //最大加載瓦片個數
}));
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>
頁面效果如下：
----------------------------------------------------------------------------------------------------
到此，使用開源Cesium+Vue實現傾斜攝影三維展示已經介紹完了。
代碼已經傳到Github上了，歡迎大家下載。
Github地址：https://github.com/kiba518/KibaCesium
----------------------------------------------------------------------------------------------------
注：此文章爲原創，任何形式的轉載都請聯繫作者獲得授權並註明出處！
若您覺得這篇文章還不錯，請點擊下方的【推薦】，非常感謝！
https://www.cnblogs.com/kiba/p/16455532.html
