使用開源Cesium+Vue實現(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í)。
功能實現(xiàn)
首先我們安裝VsCode，然后安裝Vue，然后依次操作，新建文件夾kibacesium，打開VsCode—打開文件夾kibacesium—點擊終端—在終端內(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項目，項目名稱kibacesium。
vue create kibacesium
在彈出的選項里，選擇Vue3，如下圖。
Vue項目創(chuàng)建完成后，會在我們的創(chuàng)建的文件夾kibacesium下再創(chuàng)建一個文件夾kibacesium，所以我們需要使用VsCode重新打開文件夾，路徑kibacesium/kibacesium。
然后執(zhí)行命令：
npm run serve
如下圖，項目運行成功。
然后安裝cesium的插件——vue-cli-plugin-cesium（只支持 VueCLI3.0+ 版本）。
參考網(wǎng)站：https://github.com/isboyjc/vue-cli-plugin-cesium
安裝命令
vue add vue-cli-plugin-cesium
插件安裝過程中會有三個詢問，內(nèi)容如下：
詢問一
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？
此項默認(rèn)為 yes，該操作將自動在 main.js 引入 widgets.css，即全局引入 Cesium 的 css 樣式
如果此項設(shè)置為 no，那么開發(fā)時我們要手動引入widgets.css樣式文件，引入命令如下
import "cesium/Widgets/widgets.css"
詢問三
Whether to add sample components to the project components directory 是否添加示例組件到項目components目錄?
此選項默認(rèn)為 yes，該操作會自動在 src/components 文件夾下生成 CesiumExample 文件夾，此文件夾中包含一些 Cesium 的使用示例供參考
如果此項設(shè)置為 no，則不生成示例文件
生成的示例中每個文件為一個模塊，可直接模塊引入至項目中查看。
cesium的插件安裝完成后，代碼結(jié)構(gòu)如下圖（注意，這里我并沒有配置vue.config.js文件）：
項目里增加了CesiumExample文件夾和一個實例vue文件。
運行前，我們再執(zhí)行一次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>然后執(zhí)行命令：
npm run serve
網(wǎng)站啟動后，在瀏覽器輸入http://localhost:8080/訪問，頁面如下：
PS：修改package.json里的代碼驗證規(guī)則， 增加"no-undef": "off"，因為Cesium是被注入的對象，不添加這個規(guī)則就必須一直在Cesium對象相關(guān)代碼上面加注釋——// eslint-disable-next-line no-undef
更多地圖功能
想要進行更多地圖功能的開發(fā)，需要下載Cesium源碼—下載地址：https://github.com/CesiumGS/cesium。
下載后的代碼，用VSCode打開，然后執(zhí)行npm install安裝依賴，然后執(zhí)行 npm run build（注意，必須先執(zhí)），
然后執(zhí)行npm start。
啟動后點擊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, //時間軸控件
// 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，默認(rèn)網(wǎng)址：http://localhost:9003/index.html。
點擊傾斜模型切片，然后在數(shù)據(jù)路徑輸入傾斜攝影文件夾。
如果輸入正確的傾斜攝影文件夾，那么空間參考和零點坐標(biāo)會自動讀取出來。
然后在右側(cè)存儲類型中添加輸出路徑，并未clt文件命名。
然后點擊提交處理。
處理完成后，系統(tǒng)會把切片的傾斜攝影發(fā)布成服務(wù)，點擊分發(fā)服務(wù)——3dtiles服務(wù)，如下圖所示：
顯示傾斜攝影
在項目中增加文件——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, //開啟跳級加載
//這個參數(shù)默認(rèn)是false，同等條件下，葉子節(jié)點會優(yōu)先加載。但是Cesium的tile加載優(yōu)先級有很多考慮條件，
//這個只是其中之一，如果skipLevelOfDetail=false，這個參數(shù)幾乎無意義。所以要配合skipLevelOfDetail=true來使用，
//此時設(shè)置preferLeaves=true。這樣我們就能最快的看見符合當(dāng)前視覺精度的塊，對于提升大數(shù)據(jù)以及網(wǎng)絡(luò)環(huán)境不好的前提下有一點點改善意義。
preferLeaves: true,
//【重要】內(nèi)存建議顯存大小的50%左右，內(nèi)存分配變小有利于傾斜攝影數(shù)據(jù)回收，提升性能體驗
maximumMemoryUsage: 1024
//控制切片視角顯示的數(shù)量，可調(diào)整性能
// maximumScreenSpaceError: 2,//最大的屏幕空間誤差
// maximumNumberOfLoadedTiles: 100000, //最大加載瓦片個數(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實現(xiàn)傾斜攝影三維展示已經(jīng)介紹完了。
代碼已經(jīng)傳到Github上了，歡迎大家下載。
Github地址：https://github.com/kiba518/KibaCesium
到此這篇關(guān)于使用開源Cesium+Vue實現(xiàn)傾斜攝影三維展示的文章就介紹到這了,更多相關(guān)Cesium Vue傾斜攝影內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)移動端input上傳視頻、音頻，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
使用vue.js實現(xiàn)聯(lián)動效果的示例代碼
本篇文章主要介紹了使用vue.js實現(xiàn)聯(lián)動效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
Vue是當(dāng)前很火的一款MVVM的輕量級框架，它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的。因為它提供了簡潔易于理解的api，使得我們很容易上手。這篇文章給大家介紹了vue雙向數(shù)據(jù)綁定問題，感興趣的朋友一起看看吧2017-10-10
capture事件修飾符的作用是給元素添加一個監(jiān)聽器，當(dāng)元素發(fā)生冒泡時，先觸發(fā)帶有該修飾符的元素。這篇文章給大家介紹了Vue 事件修飾符capture 的使用，需要的朋友參考下吧2017-12-12
讓多個組件使用同一個掛載點，并動態(tài)切換，這就是動態(tài)組件。這篇文章主要介紹了Vue動態(tài)組件 ,需要的朋友可以參考下2017-08-08
vue router點擊打開新的標(biāo)簽頁的方法(最新推薦)
vue router點擊打開新的標(biāo)簽頁的方法,只需要在router-link中加入target="_blank"即可在新的頁面打開標(biāo)簽,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
今天小編就為大家分享一篇vuejs選中當(dāng)前樣式active的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue項目如何引入bootstrap、elementUI、echarts
這篇文章主要介紹了Vue項目如何引入bootstrap、elementUI、echarts,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
今天小編就為大家分享一篇vue實現(xiàn)點擊追加選中樣式效果，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在使用vue開發(fā)項目的時候,很多使用會import很多模塊,這篇文章主要給大家介紹了關(guān)于vue中import導(dǎo)入三種方式的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02