從3DTile數(shù)據(jù)的tileset.json文件中姨裸,解析出包圍盒中心點(diǎn)坐標(biāo)悲敷。包圍盒包含:box覆履、region蹋盆、sphere费薄。
用經(jīng)緯度記錄數(shù)據(jù)的WGS84坐標(biāo)系,WKID是4326栖雾,用地心為坐標(biāo)原點(diǎn)的空間直角坐標(biāo)來記錄數(shù)據(jù)的坐標(biāo)系义锥,WKID是4979。3dTiles用的就是4979坐標(biāo)系岩灭。
效果
1665740109(1).png
代碼
<template>
<div>
<div id="cesiumContainer"></div>
<div class="form">
<div>3DTile包圍盒中心點(diǎn)解析結(jié)果:</div>
<div>經(jīng)度:{{ lon }}</div>
<div>緯度:{{ lat }}</div>
<div>高度:{{ height }}</div>
</div>
</div>
</template>
<script>
export default {
name: "Calc3DTileCenter",
data() {
return {
lon: 0,
lat: 0,
height: 0,
};
},
mounted() {
this.initViewer();
this.load3DTile();
},
methods: {
initViewer() {
let defaultRect = Cesium.Rectangle.fromDegrees(90, 20, 130, 50);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = defaultRect;
window.viewer = new Cesium.Viewer("cesiumContainer", {
animation: false,
shouldAnimate: true,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
infoBox: false,
navigationInstructionsInitiallyVisible: false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
}),
});
window.viewer.scene.debugShowFramesPerSecond = true;
},
// 加載3DTile
load3DTile() {
// box
let url = "data/BatchTableHierarchy/tileset.json";
// region
// let url = "data/Tileset/tileset.json";
// sphere
// let url = "data/ceke/tileset.json";
this.calc3DTileCenter(url);
let tileset = new Cesium.Cesium3DTileset({
url: url,
});
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset);
},
// 解析包圍盒中心點(diǎn)坐標(biāo)
calc3DTileCenter(url) {
axios.get(url).then((response) => {
let data = response.data;
let root = data.root;
let boundingVolume = root.boundingVolume;
let modelCenter;
if (boundingVolume.hasOwnProperty("box")) {
let x = boundingVolume.box[0];
let y = boundingVolume.box[1];
let z = boundingVolume.box[2];
let w = 1;
modelCenter = new Cesium.Cartesian4(x, y, z, w);
} else if (boundingVolume.hasOwnProperty("region")) {
let x = (boundingVolume.region[0] + boundingVolume.region[2]) / 2;
let y = (boundingVolume.region[1] + boundingVolume.region[3]) / 2;
let z = (boundingVolume.region[4] + boundingVolume.region[5]) / 2;
let cartographic = new Cesium.Cartographic(x, y, z);
let wgs84Cartesian3 = Cesium.Cartographic.toCartesian(cartographic);
modelCenter = new Cesium.Cartesian4(wgs84Cartesian3.x, wgs84Cartesian3.y, wgs84Cartesian3.z, 1);
} else if (boundingVolume.hasOwnProperty("sphere")) {
let x = boundingVolume.sphere[0];
let y = boundingVolume.sphere[1];
let z = boundingVolume.sphere[2];
let w = 1;
modelCenter = new Cesium.Cartesian4(x, y, z, w);
}
// 是否有轉(zhuǎn)換矩陣
if (root.hasOwnProperty("transform")) {
let transform = root.transform;
let matrix4 = Cesium.Matrix4.fromColumnMajorArray(transform);
let wgs84Cartesian4 = Cesium.Matrix4.multiplyByVector(matrix4, modelCenter, new Cesium.Cartesian4());
let wgs84Cartesian3 = Cesium.Cartesian3.fromCartesian4(wgs84Cartesian4);
let wgs84Cartographic = Cesium.Cartographic.fromCartesian(wgs84Cartesian3);
let lon = Cesium.Math.toDegrees(wgs84Cartographic.longitude);
let lat = Cesium.Math.toDegrees(wgs84Cartographic.latitude);
let height = wgs84Cartographic.height;
this.lon = lon;
this.lat = lat;
this.height = height;
} else {
let wgs84Cartographic = Cesium.Cartographic.fromCartesian(modelCenter);
let lon = Cesium.Math.toDegrees(wgs84Cartographic.longitude);
let lat = Cesium.Math.toDegrees(wgs84Cartographic.latitude);
let height = wgs84Cartographic.height;
this.lon = lon;
this.lat = lat;
this.height = height;
}
});
},
},
};
</script>
<style scoped>
#cesiumContainer {
position: absolute;
width: 100%;
height: 100%;
}
.form {
position: absolute;
background-color: #ffffff;
padding: 5px;
top: 5px;
left: 5px;
}
</style>