效果如圖
傾斜攝影數(shù)據(jù)的地址：百度網(wǎng)盤 請輸入提取碼
提取碼：ztde
1.配置nginx，代理3dtiles傾斜攝影數(shù)據(jù)服務(wù)
如我的傾斜攝影數(shù)據(jù)放在D盤的某個(gè)文件夾里面，nginx可以這樣配置
?
?2.代碼里面3dtiles的url指向傾斜攝影服務(wù)地址，同時(shí)配置一系列的參數(shù)
3dtiles的配置參數(shù)如下，可根據(jù)項(xiàng)目的實(shí)際需求進(jìn)行調(diào)整文章來源：http://www.zghlxwxcb.cn/news/detail-509216.html
let tilesetJson = {
// url: 'http://127.0.0.1/data/3dtiles/b3dm/tileset.json',
url: 'http://10.10.26.46/data/3dtiles/b3dm/tileset.json',
modelMatrix: m,
// show: true, // 是否顯示圖塊集(默認(rèn)true)
skipLevelOfDetail: true, // --- 優(yōu)化選項(xiàng)。確定是否應(yīng)在遍歷期間應(yīng)用詳細(xì)級別跳過(默認(rèn)false)
baseScreenSpaceError: 1024, // --- When skipLevelOfDetailis true，在跳過詳細(xì)級別之前必須達(dá)到的屏幕空間錯(cuò)誤(默認(rèn)1024)
maximumScreenSpaceError: 32, // 數(shù)值加大，能讓最終成像變模糊---用于驅(qū)動細(xì)節(jié)細(xì)化級別的最大屏幕空間誤差(默認(rèn)16)原128
skipScreenSpaceErrorFactor: 16, // --- 何時(shí)skipLevelOfDetail是true，定義要跳過的最小屏幕空間錯(cuò)誤的乘數(shù)。與 一起使用skipLevels來確定要加載哪些圖塊(默認(rèn)16)
skipLevels: 1, // --- WhenskipLevelOfDetail是true一個(gè)常量，定義了加載圖塊時(shí)要跳過的最小級別數(shù)。為 0 時(shí)，不跳過任何級別。與 一起使用skipScreenSpaceErrorFactor來確定要加載哪些圖塊。(默認(rèn)1)
immediatelyLoadDesiredLevelOfDetail: false, // --- 當(dāng)skipLevelOfDetail是時(shí)true，只會下載滿足最大屏幕空間錯(cuò)誤的圖塊。忽略跳過因素，只加載所需的圖塊(默認(rèn)false)
loadSiblings: false, // 如果為true則不會在已加載完概況房屋后，自動從中心開始超清化房屋 --- 何時(shí)確定在遍歷期間skipLevelOfDetail是否true始終下載可見瓦片的兄弟姐妹(默認(rèn)false)
cullWithChildrenBounds: false, // ---優(yōu)化選項(xiàng)。是否使用子邊界體積的并集來剔除瓦片（默認(rèn)true）
cullRequestsWhileMoving: false, // ---優(yōu)化選項(xiàng)。不要請求由于相機(jī)移動而在返回時(shí)可能未使用的圖塊。這種優(yōu)化只適用于靜止的瓦片集(默認(rèn)true)
cullRequestsWhileMovingMultiplier: 10, // 值越小能夠更快的剔除 ---優(yōu)化選項(xiàng)。移動時(shí)用于剔除請求的乘數(shù)。較大的是更積極的剔除，較小的較不積極的剔除(默認(rèn)60)原10
preloadWhenHidden: true, // ---tileset.show時(shí) 預(yù)加載瓷磚false。加載圖塊，就好像圖塊集可見但不渲染它們(默認(rèn)false)
preloadFlightDestinations: true, // ---優(yōu)化選項(xiàng)。在相機(jī)飛行時(shí)在相機(jī)的飛行目的地預(yù)加載圖塊(默認(rèn)true)
preferLeaves: true, // ---優(yōu)化選項(xiàng)。最好先裝載葉子(默認(rèn)false)
maximumMemoryUsage: 2048, // 內(nèi)存分配變小有利于傾斜攝影數(shù)據(jù)回收，提升性能體驗(yàn)---瓦片集可以使用的最大內(nèi)存量（以 MB 為單位）(默認(rèn)512)原512 4096
progressiveResolutionHeightFraction: 0.5, // 數(shù)值偏于0能夠讓初始加載變得模糊 --- 這有助于在繼續(xù)加載全分辨率圖塊的同時(shí)快速放下圖塊層(默認(rèn)0.3)
dynamicScreenSpaceErrorDensity: 10, // 數(shù)值加大，能讓周邊加載變快 --- 用于調(diào)整動態(tài)屏幕空間誤差的密度，類似于霧密度(默認(rèn)0.00278)
dynamicScreenSpaceErrorFactor: 1, // 不知道起了什么作用沒，反正放著吧先 --- 用于增加計(jì)算的動態(tài)屏幕空間誤差的因素(默認(rèn)4.0)
dynamicScreenSpaceErrorHeightFalloff: 0.25, // --- 密度開始下降的瓦片集高度的比率(默認(rèn)0.25)
foveatedScreenSpaceError: true, // --- 優(yōu)化選項(xiàng)。通過暫時(shí)提高屏幕邊緣周圍圖塊的屏幕空間錯(cuò)誤，優(yōu)先加載屏幕中心的圖塊。一旦Cesium3DTileset#foveatedConeSize加載確定的屏幕中心的所有圖塊，屏幕空間錯(cuò)誤就會恢復(fù)正常。(默認(rèn)true)
foveatedConeSize: 0.1, // --- 優(yōu)化選項(xiàng)。當(dāng)Cesium3DTileset#foveatedScreenSpaceError為 true 時(shí)使用來控制決定延遲哪些圖塊的錐體大小。立即加載此圓錐內(nèi)的瓷磚。圓錐外的瓷磚可能會根據(jù)它們在圓錐外的距離及其屏幕空間誤差而延遲。這是由Cesium3DTileset#foveatedInterpolationCallback和控制的Cesium3DTileset#foveatedMinimumScreenSpaceErrorRelaxation。將此設(shè)置為 0.0 意味著圓錐將是由相機(jī)位置及其視圖方向形成的線。將此設(shè)置為 1.0 意味著錐體包含相機(jī)的整個(gè)視野,禁用效果(默認(rèn)0.1)
foveatedMinimumScreenSpaceErrorRelaxation: 0.0, // --- 優(yōu)化選項(xiàng)。當(dāng)Cesium3DTileset#foveatedScreenSpaceError為 true 時(shí)使用以控制中央凹錐之外的圖塊的起始屏幕空間誤差松弛。屏幕空間錯(cuò)誤將從 tileset 值開始Cesium3DTileset#maximumScreenSpaceError根據(jù)提供的Cesium3DTileset#foveatedInterpolationCallback.(默認(rèn)0.0)
// foveatedTimeDelay: 0.2, // ---優(yōu)化選項(xiàng)。使用 whenCesium3DTileset#foveatedScreenSpaceError為 true 來控制在相機(jī)停止移動后延遲瓷磚開始加載之前等待的時(shí)間（以秒為單位）。此時(shí)間延遲可防止在相機(jī)移動時(shí)請求屏幕邊緣周圍的瓷磚。將此設(shè)置為 0.0 將立即請求任何給定視圖中的所有圖塊。(默認(rèn)0.2)
luminanceAtZenith: 0.2, // --- 用于此模型的程序環(huán)境貼圖的天頂處的太陽亮度（以千坎德拉每平方米為單位）(默認(rèn)0.2)
backFaceCulling: true, // --- 是否剔除背面幾何體。當(dāng)為 true 時(shí)，背面剔除由 glTF 材質(zhì)的 doubleSided 屬性確定；如果為 false，則禁用背面剔除(默認(rèn)true)
debugFreezeFrame: false, // --- 僅用于調(diào)試。確定是否應(yīng)僅使用最后一幀的圖塊進(jìn)行渲染(默認(rèn)false)
debugColorizeTiles: false, // --- 僅用于調(diào)試。如果為 true，則為每個(gè)圖塊分配隨機(jī)顏色(默認(rèn)false)
debugWireframe: false, // --- 僅用于調(diào)試。如果為 true，則將每個(gè)圖塊的內(nèi)容渲染為線框(默認(rèn)false)
debugShowBoundingVolume: false, // --- 僅用于調(diào)試。如果為 true，則為每個(gè)圖塊渲染邊界體積(默認(rèn)false)
debugShowContentBoundingVolume: false, // --- 僅用于調(diào)試。如果為 true，則為每個(gè)圖塊的內(nèi)容渲染邊界體積(默認(rèn)false)
debugShowViewerRequestVolume: false, // --- 僅用于調(diào)試。如果為 true，則呈現(xiàn)每個(gè)圖塊的查看器請求量(默認(rèn)false)
debugShowGeometricError: false, // --- 僅用于調(diào)試。如果為 true，則繪制標(biāo)簽以指示每個(gè)圖塊的幾何誤差(默認(rèn)false)
debugShowRenderingStatistics: false, // --- 僅用于調(diào)試。如果為 true，則繪制標(biāo)簽以指示每個(gè)圖塊的命令、點(diǎn)、三角形和特征的數(shù)量(默認(rèn)false)
debugShowMemoryUsage: false, // --- 僅用于調(diào)試。如果為 true，則繪制標(biāo)簽以指示每個(gè)圖塊使用的紋理和幾何內(nèi)存（以兆字節(jié)為單位）(默認(rèn)false)
debugShowUrl: false, // --- 僅用于調(diào)試。如果為 true，則繪制標(biāo)簽以指示每個(gè)圖塊的 url(默認(rèn)false)
dynamicScreenSpaceError: true // 根據(jù)測試，有了這個(gè)后，會在真正的全屏加載完之后才清晰化房屋 --- 優(yōu)化選項(xiàng)。減少距離相機(jī)較遠(yuǎn)的圖塊的屏幕空間錯(cuò)誤(默認(rèn)false)
}最后附上完整的代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-509216.html
<template>
<div>
<div id="cesiumDemo"></div>
</div>
</template>
<script>
let viewer
let tileset1
export default {
name: 'guangbentiles',
data () {
return {
}
},
created () {
},
mounted () {
this.getCesiumDem()
},
destroyed () {
},
methods: {
// 實(shí)例cesium
getCesiumDem () {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZWFlYjAyYS0xN2JlLTQ0OTItOGNkOC05YWJlNGY0MjI2NmQiLCJpZCI6NDkyMjYsImlhdCI6MTYxNzM0NjA3N30.crkTg0Logk_JUA7BROy0r9RqTJWCi8NZpTyu4qI11Fo'
viewer = new Cesium.Viewer('cesiumDemo', {
animation: false, // 是否顯示動畫控件
baseLayerPicker: false, // 是否顯示圖層選擇控件
vrButton: false, // 是否顯示VR控件
geocoder: false, // 是否顯示地名查找控件
timeline: false, // 是否顯示時(shí)間線控件
sceneModePicker: false, // 是否顯示投影方式控件
navigationHelpButton: false, // 是否顯示幫助信息控件
navigationInstructionsInitiallyVisible: false, // 幫助按鈕，初始化的時(shí)候是否展開
infoBox: false, // 是否顯示點(diǎn)擊要素之后顯示的信息
fullscreenButton: false, // 是否顯示全屏按鈕
selectionIndicator: false, // 是否顯示選中指示框
homeButton: false, // 是否顯示返回主視角控件
scene3DOnly: false, // 如果設(shè)置為true，則所有幾何圖形以3D模式繪制以節(jié)約GPU資源
terrainProvider: new Cesium.EllipsoidTerrainProvider({}) // 不顯示地形
})
this.set3Dtitle3()
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(113.060458, 22.640675, 180),
orientation: {
heading: Cesium.Math.toRadians(20),
pitch: Cesium.Math.toRadians(-20),
roll: 0
}
})
},
// 加速器園區(qū)
set3Dtitle3 () {
let translation = Cesium.Cartesian3.fromArray([0, 0, 0])
let m = Cesium.Matrix4.fromTranslation(translation)
let tilesetJson = {
// url: 'http://127.0.0.1/data/3dtiles/b3dm/tileset.json',
url: 'http://10.10.26.46/data/3dtiles/b3dm/tileset.json',
modelMatrix: m,
// show: true, // 是否顯示圖塊集(默認(rèn)true)
skipLevelOfDetail: true, // --- 優(yōu)化選項(xiàng)。確定是否應(yīng)在遍歷期間應(yīng)用詳細(xì)級別跳過(默認(rèn)false)
baseScreenSpaceError: 1024, // --- When skipLevelOfDetailis true，在跳過詳細(xì)級別之前必須達(dá)到的屏幕空間錯(cuò)誤(默認(rèn)1024)
maximumScreenSpaceError: 32, // 數(shù)值加大，能讓最終成像變模糊---用于驅(qū)動細(xì)節(jié)細(xì)化級別的最大屏幕空間誤差(默認(rèn)16)原128
skipScreenSpaceErrorFactor: 16, // --- 何時(shí)skipLevelOfDetail是true，定義要跳過的最小屏幕空間錯(cuò)誤的乘數(shù)。與 一起使用skipLevels來確定要加載哪些圖塊(默認(rèn)16)
skipLevels: 1, // --- WhenskipLevelOfDetail是true一個(gè)常量，定義了加載圖塊時(shí)要跳過的最小級別數(shù)。為 0 時(shí)，不跳過任何級別。與 一起使用skipScreenSpaceErrorFactor來確定要加載哪些圖塊。(默認(rèn)1)
immediatelyLoadDesiredLevelOfDetail: false, // --- 當(dāng)skipLevelOfDetail是時(shí)true，只會下載滿足最大屏幕空間錯(cuò)誤的圖塊。忽略跳過因素，只加載所需的圖塊(默認(rèn)false)
loadSiblings: false, // 如果為true則不會在已加載完概況房屋后，自動從中心開始超清化房屋 --- 何時(shí)確定在遍歷期間skipLevelOfDetail是否true始終下載可見瓦片的兄弟姐妹(默認(rèn)false)
cullWithChildrenBounds: false, // ---優(yōu)化選項(xiàng)。是否使用子邊界體積的并集來剔除瓦片（默認(rèn)true）
cullRequestsWhileMoving: false, // ---優(yōu)化選項(xiàng)。不要請求由于相機(jī)移動而在返回時(shí)可能未使用的圖塊。這種優(yōu)化只適用于靜止的瓦片集(默認(rèn)true)
cullRequestsWhileMovingMultiplier: 10, // 值越小能夠更快的剔除 ---優(yōu)化選項(xiàng)。移動時(shí)用于剔除請求的乘數(shù)。較大的是更積極的剔除，較小的較不積極的剔除(默認(rèn)60)原10
preloadWhenHidden: true, // ---tileset.show時(shí) 預(yù)加載瓷磚false。加載圖塊，就好像圖塊集可見但不渲染它們(默認(rèn)false)
preloadFlightDestinations: true, // ---優(yōu)化選項(xiàng)。在相機(jī)飛行時(shí)在相機(jī)的飛行目的地預(yù)加載圖塊(默認(rèn)true)
preferLeaves: true, // ---優(yōu)化選項(xiàng)。最好先裝載葉子(默認(rèn)false)
maximumMemoryUsage: 2048, // 內(nèi)存分配變小有利于傾斜攝影數(shù)據(jù)回收，提升性能體驗(yàn)---瓦片集可以使用的最大內(nèi)存量（以 MB 為單位）(默認(rèn)512)原512 4096
progressiveResolutionHeightFraction: 0.5, // 數(shù)值偏于0能夠讓初始加載變得模糊 --- 這有助于在繼續(xù)加載全分辨率圖塊的同時(shí)快速放下圖塊層(默認(rèn)0.3)
dynamicScreenSpaceErrorDensity: 10, // 數(shù)值加大，能讓周邊加載變快 --- 用于調(diào)整動態(tài)屏幕空間誤差的密度，類似于霧密度(默認(rèn)0.00278)
dynamicScreenSpaceErrorFactor: 1, // 不知道起了什么作用沒，反正放著吧先 --- 用于增加計(jì)算的動態(tài)屏幕空間誤差的因素(默認(rèn)4.0)
dynamicScreenSpaceErrorHeightFalloff: 0.25, // --- 密度開始下降的瓦片集高度的比率(默認(rèn)0.25)
foveatedScreenSpaceError: true, // --- 優(yōu)化選項(xiàng)。通過暫時(shí)提高屏幕邊緣周圍圖塊的屏幕空間錯(cuò)誤，優(yōu)先加載屏幕中心的圖塊。一旦Cesium3DTileset#foveatedConeSize加載確定的屏幕中心的所有圖塊，屏幕空間錯(cuò)誤就會恢復(fù)正常。(默認(rèn)true)
foveatedConeSize: 0.1, // --- 優(yōu)化選項(xiàng)。當(dāng)Cesium3DTileset#foveatedScreenSpaceError為 true 時(shí)使用來控制決定延遲哪些圖塊的錐體大小。立即加載此圓錐內(nèi)的瓷磚。圓錐外的瓷磚可能會根據(jù)它們在圓錐外的距離及其屏幕空間誤差而延遲。這是由Cesium3DTileset#foveatedInterpolationCallback和控制的Cesium3DTileset#foveatedMinimumScreenSpaceErrorRelaxation。將此設(shè)置為 0.0 意味著圓錐將是由相機(jī)位置及其視圖方向形成的線。將此設(shè)置為 1.0 意味著錐體包含相機(jī)的整個(gè)視野,禁用效果(默認(rèn)0.1)
foveatedMinimumScreenSpaceErrorRelaxation: 0.0, // --- 優(yōu)化選項(xiàng)。當(dāng)Cesium3DTileset#foveatedScreenSpaceError為 true 時(shí)使用以控制中央凹錐之外的圖塊的起始屏幕空間誤差松弛。屏幕空間錯(cuò)誤將從 tileset 值開始Cesium3DTileset#maximumScreenSpaceError根據(jù)提供的Cesium3DTileset#foveatedInterpolationCallback.(默認(rèn)0.0)
// foveatedTimeDelay: 0.2, // ---優(yōu)化選項(xiàng)。使用 whenCesium3DTileset#foveatedScreenSpaceError為 true 來控制在相機(jī)停止移動后延遲瓷磚開始加載之前等待的時(shí)間（以秒為單位）。此時(shí)間延遲可防止在相機(jī)移動時(shí)請求屏幕邊緣周圍的瓷磚。將此設(shè)置為 0.0 將立即請求任何給定視圖中的所有圖塊。(默認(rèn)0.2)
luminanceAtZenith: 0.2, // --- 用于此模型的程序環(huán)境貼圖的天頂處的太陽亮度（以千坎德拉每平方米為單位）(默認(rèn)0.2)
backFaceCulling: true, // --- 是否剔除背面幾何體。當(dāng)為 true 時(shí)，背面剔除由 glTF 材質(zhì)的 doubleSided 屬性確定；如果為 false，則禁用背面剔除(默認(rèn)true)
debugFreezeFrame: false, // --- 僅用于調(diào)試。確定是否應(yīng)僅使用最后一幀的圖塊進(jìn)行渲染(默認(rèn)false)
debugColorizeTiles: false, // --- 僅用于調(diào)試。如果為 true，則為每個(gè)圖塊分配隨機(jī)顏色(默認(rèn)false)
debugWireframe: false, // --- 僅用于調(diào)試。如果為 true，則將每個(gè)圖塊的內(nèi)容渲染為線框(默認(rèn)false)
debugShowBoundingVolume: false, // --- 僅用于調(diào)試。如果為 true，則為每個(gè)圖塊渲染邊界體積(默認(rèn)false)
debugShowContentBoundingVolume: false, // --- 僅用于調(diào)試。如果為 true，則為每個(gè)圖塊的內(nèi)容渲染邊界體積(默認(rèn)false)
debugShowViewerRequestVolume: false, // --- 僅用于調(diào)試。如果為 true，則呈現(xiàn)每個(gè)圖塊的查看器請求量(默認(rèn)false)
debugShowGeometricError: false, // --- 僅用于調(diào)試。如果為 true，則繪制標(biāo)簽以指示每個(gè)圖塊的幾何誤差(默認(rèn)false)
debugShowRenderingStatistics: false, // --- 僅用于調(diào)試。如果為 true，則繪制標(biāo)簽以指示每個(gè)圖塊的命令、點(diǎn)、三角形和特征的數(shù)量(默認(rèn)false)
debugShowMemoryUsage: false, // --- 僅用于調(diào)試。如果為 true，則繪制標(biāo)簽以指示每個(gè)圖塊使用的紋理和幾何內(nèi)存（以兆字節(jié)為單位）(默認(rèn)false)
debugShowUrl: false, // --- 僅用于調(diào)試。如果為 true，則繪制標(biāo)簽以指示每個(gè)圖塊的 url(默認(rèn)false)
dynamicScreenSpaceError: true // 根據(jù)測試，有了這個(gè)后，會在真正的全屏加載完之后才清晰化房屋 --- 優(yōu)化選項(xiàng)。減少距離相機(jī)較遠(yuǎn)的圖塊的屏幕空間錯(cuò)誤(默認(rèn)false)
}
tileset1 = new Cesium.Cesium3DTileset(tilesetJson)
// 非異步加載
// viewer.scene.primitives.add(tileset)
// 異步加載
tileset1.readyPromise.then(function (tileset) {
viewer.scene.primitives.add(tileset1, 1)
}).otherwise(function (error) {
console.log(error)
})
tileset1.allTilesLoaded.addEventListener(function () {
console.log('模型已經(jīng)全部加載完成')
})
}
}
}
</script>
<style scoped>
#cesiumDemo {
width: 100vw;
height: 100vh;
}
/* 隱藏cesium標(biāo)志 */
.cesium-viewer .cesium-widget-credits {
display: none;
}
</style>到了這里，關(guān)于cesium加載3dtiles傾斜攝影數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
