實現(xiàn)思路
- 將傾斜攝影OSGB數(shù)據(jù)轉(zhuǎn)換為3dtile(轉(zhuǎn)換方式很多，可以利用第三方工具cesiumlab)
- 利用Cesium加載GIS地圖,我這里使用的是天地圖，可以加載其他地圖都行
- 加載3dtile數(shù)據(jù)到地圖中展示
安裝插件
npm install cesium加載地圖
以加載天地圖為例，需要先到天地圖官網(wǎng)去申請開發(fā)者，獲取一個token，以下代碼直接粘貼就行，注釋中已說明
//初始化地圖
let viewer;
function initMap() {
const tianDiTuToken = '天地圖token'
const mapOption = {
url: `http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${tianDiTuToken}`,
layer: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
maximumLevel: 18
};
const imgProvider = new WebMapTileServiceImageryProvider(mapOption);
const viewerOption = {
animation: false,//是否創(chuàng)建動畫小器件，左下角儀表
baseLayerPicker: false,//是否顯示圖層選擇器
fullscreenButton: false,//是否顯示全屏按鈕
geocoder: false,//是否顯示geocoder小器件，右上角查詢按鈕
homeButton: false,//是否顯示Home按鈕
infoBox: false,//是否顯示信息框
sceneModePicker: false,//是否顯示3D/2D選擇器
scene3DOnly: false,//如果設(shè)置為true，則所有幾何圖形以3D模式繪制以節(jié)約GPU資源
selectionIndicator: false,//是否顯示選取指示器組件
timeline: false,//是否顯示時間軸
navigationHelpButton: false,//是否顯示右上角的幫助按鈕
baselLayerPicker: false,// 將圖層選擇的控件關(guān)掉，才能添加其他影像數(shù)據(jù)
shadows: true,//是否顯示背影
shouldAnimate: true,
imageryProvider: imgProvider,
}
viewer = new Viewer("map", viewerOption);
// 添加中文注記圖層
viewer.imageryLayers.addImageryProvider(
new WebMapTileServiceImageryProvider({
url: `http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=${tianDiTuToken}`,
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: false,
}));
//優(yōu)化項--關(guān)閉相關(guān)特效
viewer.scene.debugShowFramesPerSecond = true;//顯示fps
viewer.scene.moon.show = false;//月亮
viewer.scene.fog.enabled = false;//霧
viewer.scene.sun.show = false;//太陽
viewer.scene.skyBox.show = false;//天空盒
viewer.resolutionScale = 1.0;//畫面細度，默認值為1.0
//去除版權(quán)信息
viewer._cesiumWidget._creditContainer.style.display = "none";
}
加載傾斜攝影3dtitle
3Dtitle文件我這里是以nginx代理的方式訪問的，也可以直接放到項目文件夾中引用
//加載傾斜攝影圖像
function init3Dtiles() {
const tileSet = new Cesium3DTileset({
url: "http://127.0.0.1/data/tileset.json",
maximumMemoryUsage: 100,//不可設(shè)置太高，目標機子空閑內(nèi)存值以內(nèi)，防止瀏覽器過于卡
maximumScreenSpaceError: 32,//用于驅(qū)動細節(jié)細化級別的最大屏幕空間錯誤;較高的值可提供更好的性能，但視覺質(zhì)量較低。
maximumNumberOfLoadedTiles: 1000, //最大加載瓦片個數(shù)
shadows: false,//是否顯示陰影
skipLevelOfDetail: true,// 確定是否應(yīng)在遍歷期間應(yīng)用詳細級別跳過(默認false)
baseScreenSpaceError: 1024,//When skipLevelOfDetailis true，在跳過詳細級別之前必須達到的屏幕空間錯誤(默認1024)
skipScreenSpaceErrorFactor: 16,// 定義要跳過的最小屏幕空間錯誤的乘數(shù)。與 一起使用skipLevels來確定要加載哪些圖塊(默認16)
skipLevels: 1,//skipLevelOfDetail是true 一個常量，定義了加載圖塊時要跳過的最小級別數(shù)。為 0 時，不跳過任何級別。與 一起使用skipScreenSpaceErrorFactor來確定要加載哪些圖塊。(默認1)
immediatelyLoadDesiredLevelOfDetail: false,//當skipLevelOfDetail是時true，只會下載滿足最大屏幕空間錯誤的圖塊。忽略跳過因素，只加載所需的圖塊(默認false)
loadSiblings: false,// 如果為true則不會在已加載完概況房屋后，自動從中心開始超清化房屋 --- 何時確定在遍歷期間skipLevelOfDetail是否true始終下載可見瓦片的兄弟姐妹(默認false)
cullWithChildrenBounds: true,//是否使用子邊界體積的并集來剔除瓦片（默認true）
dynamicScreenSpaceError: true,//減少距離相機較遠的圖塊的屏幕空間錯誤(默認false)
dynamicScreenSpaceErrorDensity: 0.00278,//數(shù)值加大，能讓周邊加載變快 --- 用于調(diào)整動態(tài)屏幕空間誤差的密度，類似于霧密度(默認0.00278)
dynamicScreenSpaceErrorFactor: 4.0,// 用于增加計算的動態(tài)屏幕空間誤差的因素(默認4.0)
dynamicScreenSpaceErrorHeightFalloff: 0.25//密度開始下降的瓦片集高度的比率(默認0.25)
});
viewer.scene.primitives.add(tileSet);
viewer.zoomTo(tileSet);
}
加載后發(fā)現(xiàn)傾斜圖像與地圖存在一定位置和高度的偏差，這里我們需要再調(diào)整一下圖像的位置以及高度，調(diào)整代碼如下
//更新傾斜攝影位置
function update3dtilesMaxtrix(tileSet) {
//調(diào)整參數(shù)
let params = {
tx: 113.06265738392063, //模型中心X軸坐標（經(jīng)度，單位：十進制度）
ty: 22.646803971034342, //模型中心Y軸坐標（緯度，單位：十進制度）
tz: 40, //模型中心Z軸坐標（高程，單位：米）
rx: 0, //X軸（經(jīng)度）方向旋轉(zhuǎn)角度（單位：度）
ry: 0, //Y軸（緯度）方向旋轉(zhuǎn)角度（單位：度）
rz: 2, //Z軸（高程）方向旋轉(zhuǎn)角度（單位：度）
scale: 1.30//縮放比例
};
//旋轉(zhuǎn)
const mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
const my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
const mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
const rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
const rotationY = Cesium.Matrix4.fromRotationTranslation(my);
const rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
//平移
const position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
const m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
//旋轉(zhuǎn)、平移矩陣相乘
Cesium.Matrix4.multiply(m, rotationX, m);
Cesium.Matrix4.multiply(m, rotationY, m);
Cesium.Matrix4.multiply(m, rotationZ, m);
//比例縮放
const scale = Cesium.Matrix4.fromUniformScale(params.scale)
Cesium.Matrix4.multiply(m, scale, m)
console.log("矩陣m:", m);
//賦值給tileset
tileSet._root.transform = m;
}在加載傾斜攝影成功后調(diào)用以上方法：
//加載傾斜攝影圖像
function init3Dtiles() {
const tileSet = new Cesium3DTileset({
url: "http://127.0.0.1/data/tileset.json"
//...代碼省略，同上
});
viewer.scene.primitives.add(tileSet);
viewer.zoomTo(tileSet);
//調(diào)用方法
//加載后調(diào)整傾斜攝影的位置、角度等參數(shù)
tileSet.readyPromise.then((tileset) => {
update3dtilesMaxtrix(tileset);
});
}
?完整代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-509176.html
<template>
<div id="map" style='z-index:100;position: absolute;top: 0; bottom: 0;right: 0;left: 0;'></div>
</template>
<script>
import * as Cesium from "cesium";
import {Cesium3DTileset, Viewer, WebMapTileServiceImageryProvider} from "cesium";
import {onMounted} from 'vue'
export default {
name: "MapComponent",
setup() {
//初始化地圖
let viewer;
function initMap() {
const tianDiTuToken = '天地圖token'
const mapOption = {
url: `http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${tianDiTuToken}`,
layer: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
maximumLevel: 18
};
const imgProvider = new WebMapTileServiceImageryProvider(mapOption);
const viewerOption = {
animation: false,//是否創(chuàng)建動畫小器件，左下角儀表
baseLayerPicker: false,//是否顯示圖層選擇器
fullscreenButton: false,//是否顯示全屏按鈕
geocoder: false,//是否顯示geocoder小器件，右上角查詢按鈕
homeButton: false,//是否顯示Home按鈕
infoBox: false,//是否顯示信息框
sceneModePicker: false,//是否顯示3D/2D選擇器
scene3DOnly: false,//如果設(shè)置為true，則所有幾何圖形以3D模式繪制以節(jié)約GPU資源
selectionIndicator: false,//是否顯示選取指示器組件
timeline: false,//是否顯示時間軸
navigationHelpButton: false,//是否顯示右上角的幫助按鈕
baselLayerPicker: false,// 將圖層選擇的控件關(guān)掉，才能添加其他影像數(shù)據(jù)
shadows: true,//是否顯示背影
shouldAnimate: true,
imageryProvider: imgProvider,
}
viewer = new Viewer("map", viewerOption);
// 添加中文注記圖層
viewer.imageryLayers.addImageryProvider(
new WebMapTileServiceImageryProvider({
url: `http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=${tianDiTuToken}`,
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: false,
}));
//優(yōu)化項--關(guān)閉相關(guān)特效
viewer.scene.debugShowFramesPerSecond = true;//顯示fps
viewer.scene.moon.show = false;//月亮
viewer.scene.fog.enabled = false;//霧
viewer.scene.sun.show = false;//太陽
viewer.scene.skyBox.show = false;//天空盒
viewer.resolutionScale = 1.0;//畫面細度，默認值為1.0
//去除版權(quán)信息
viewer._cesiumWidget._creditContainer.style.display = "none";
}
//加載傾斜攝影圖像
function init3Dtiles() {
const tileSet = new Cesium3DTileset({
url: "http://127.0.0.1/data/tileset.json",
maximumMemoryUsage: 100,//不可設(shè)置太高，目標機子空閑內(nèi)存值以內(nèi)，防止瀏覽器過于卡
maximumScreenSpaceError: 32,//用于驅(qū)動細節(jié)細化級別的最大屏幕空間錯誤;較高的值可提供更好的性能，但視覺質(zhì)量較低。
maximumNumberOfLoadedTiles: 1000, //最大加載瓦片個數(shù)
shadows: false,//是否顯示陰影
skipLevelOfDetail: true,// 確定是否應(yīng)在遍歷期間應(yīng)用詳細級別跳過(默認false)
baseScreenSpaceError: 1024,//When skipLevelOfDetailis true，在跳過詳細級別之前必須達到的屏幕空間錯誤(默認1024)
skipScreenSpaceErrorFactor: 16,// 定義要跳過的最小屏幕空間錯誤的乘數(shù)。與 一起使用skipLevels來確定要加載哪些圖塊(默認16)
skipLevels: 1,//skipLevelOfDetail是true 一個常量，定義了加載圖塊時要跳過的最小級別數(shù)。為 0 時，不跳過任何級別。與 一起使用skipScreenSpaceErrorFactor來確定要加載哪些圖塊。(默認1)
immediatelyLoadDesiredLevelOfDetail: false,//當skipLevelOfDetail是時true，只會下載滿足最大屏幕空間錯誤的圖塊。忽略跳過因素，只加載所需的圖塊(默認false)
loadSiblings: false,// 如果為true則不會在已加載完概況房屋后，自動從中心開始超清化房屋 --- 何時確定在遍歷期間skipLevelOfDetail是否true始終下載可見瓦片的兄弟姐妹(默認false)
cullWithChildrenBounds: true,//是否使用子邊界體積的并集來剔除瓦片（默認true）
dynamicScreenSpaceError: true,//減少距離相機較遠的圖塊的屏幕空間錯誤(默認false)
dynamicScreenSpaceErrorDensity: 0.00278,//數(shù)值加大，能讓周邊加載變快 --- 用于調(diào)整動態(tài)屏幕空間誤差的密度，類似于霧密度(默認0.00278)
dynamicScreenSpaceErrorFactor: 4.0,// 用于增加計算的動態(tài)屏幕空間誤差的因素(默認4.0)
dynamicScreenSpaceErrorHeightFalloff: 0.25//密度開始下降的瓦片集高度的比率(默認0.25)
});
viewer.scene.primitives.add(tileSet);
viewer.zoomTo(tileSet);
//加載后調(diào)整傾斜攝影的位置、角度等參數(shù)
tileSet.readyPromise.then((tileset) => {
update3dtilesMaxtrix(tileset);
});
}
//更新傾斜攝影位置
function update3dtilesMaxtrix(tileSet) {
//調(diào)整參數(shù)
let params = {
tx: 113.06265738392063, //模型中心X軸坐標（經(jīng)度，單位：十進制度）
ty: 22.646803971034342, //模型中心Y軸坐標（緯度，單位：十進制度）
tz: 40, //模型中心Z軸坐標（高程，單位：米）
rx: 0, //X軸（經(jīng)度）方向旋轉(zhuǎn)角度（單位：度）
ry: 0, //Y軸（緯度）方向旋轉(zhuǎn)角度（單位：度）
rz: 2, //Z軸（高程）方向旋轉(zhuǎn)角度（單位：度）
scale: 1.30//縮放比例
};
//旋轉(zhuǎn)
const mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
const my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
const mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
const rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
const rotationY = Cesium.Matrix4.fromRotationTranslation(my);
const rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
//平移
const position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
const m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
//旋轉(zhuǎn)、平移矩陣相乘
Cesium.Matrix4.multiply(m, rotationX, m);
Cesium.Matrix4.multiply(m, rotationY, m);
Cesium.Matrix4.multiply(m, rotationZ, m);
//比例縮放
const scale = Cesium.Matrix4.fromUniformScale(params.scale)
Cesium.Matrix4.multiply(m, scale, m)
console.log("矩陣m:", m);
//賦值給tileset
tileSet._root.transform = m;
}
onMounted(() => {
initMap();
init3Dtiles()
})
}
}
</script>
<style scoped>
@import url('../../node_modules/cesium/Source/Widgets/widgets.css');
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
以上是學(xué)習(xí)Cesium加載傾斜攝影的過程，中間踩過很多坑，下一篇將踩坑的過程記錄下，希望對有遇到同樣問題的小伙伴有所幫助文章來源地址http://www.zghlxwxcb.cn/news/detail-509176.html
到了這里，關(guān)于Cesium結(jié)合GIS天地圖 加載傾斜攝影3dtile + vue3的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
