使用開源Cesium+Vue實(shí)現(xiàn)傾斜攝影三維展示功能
準(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

更多地圖功能
想要進(jìn)行更多地圖功能的開發(fā),需要下載Cesium源碼—下載地址:https://github.com/CesiumGS/cesium。
下載后的代碼,用VSCode打開,然后執(zhí)行npm install安裝依賴,然后執(zhí)行 npm run build(注意,必須先執(zhí)),
然后執(zhí)行npm start。
啟動(dòng)后點(diǎn)擊Sandcastle (built version),如下圖:

可以在頁面檢索我們想要使用的功能示例,可以輸入hello,widget等關(guān)鍵字,如下圖。

加載Arcgis Server提供的默認(rèn)矢量地圖
修改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, //時(shí)間軸控件
// animation:false, //動(dòng)畫控件
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,默認(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>頁面效果如下:

----------------------------------------------------------------------------------------------------
到此,使用開源Cesium+Vue實(shí)現(xiàn)傾斜攝影三維展示已經(jīng)介紹完了。
代碼已經(jīng)傳到Github上了,歡迎大家下載。
Github地址:https://github.com/kiba518/KibaCesium
到此這篇關(guān)于使用開源Cesium+Vue實(shí)現(xiàn)傾斜攝影三維展示的文章就介紹到這了,更多相關(guān)Cesium Vue傾斜攝影內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue中使用Cesium加載shp文件、wms服務(wù)、WMTS服務(wù)問題
- Vue2中配置Cesium全過程
- cesium開發(fā)之如何在vue項(xiàng)目中使用cesium,使用離線地圖資源
- vue中安裝使用cesium方式(親測可用)
- vue2.0項(xiàng)目集成Cesium的實(shí)現(xiàn)方法
- vue實(shí)現(xiàn)滾動(dòng)條到頂部或者到指定位置
- Vue列表如何實(shí)現(xiàn)滾動(dòng)到指定位置樣式改變效果
- vue keep-alive列表頁緩存 詳情頁返回上一頁不刷新,定位到之前位置
- vue?cesium加載點(diǎn)與定位到指定位置的實(shí)現(xiàn)方法
相關(guān)文章
基于 flexible 的 Vue 組件:Toast -- 顯示框效果
這篇文章主要介紹了基于 flexible 的 Vue 組件:Toast -- 顯示框效果,需要的朋友可以參考下2017-12-12
Vue快速實(shí)現(xiàn)通用表單驗(yàn)證功能
這篇文章主要介紹了Vue快速實(shí)現(xiàn)通用表單驗(yàn)證功能,本文通過一個(gè)小例子給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
關(guān)于ElementPlus中的表單驗(yàn)證規(guī)則詳解
這篇文章主要介紹了關(guān)于ElementPlus中的表單驗(yàn)證,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06
vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解
這篇文章主要為大家介紹了vue3 provide和inject底層組件的值不是響應(yīng)式的處理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue單頁應(yīng)用加百度統(tǒng)計(jì)代碼(親測有效)
這篇文章主要介紹了vue單頁應(yīng)用加百度統(tǒng)計(jì)代碼的解決方法,需要的朋友參考下吧2018-01-01
vue項(xiàng)目中使用bpmn為節(jié)點(diǎn)添加顏色的方法
這篇文章主要介紹了vue項(xiàng)目中使用bpmn為節(jié)點(diǎn)添加顏色的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04

