从3DTile数据的tileset.json文件中,解析出包围盒中心点坐标。包围盒包含:box、region、sphere。
用经纬度记录数据的WGS84坐标系,WKID是4326,用地心为坐标原点的空间直角坐标来记录数据的坐标系,WKID是4979。3dTiles用的就是4979坐标系。
效果
代码
<template>
<div>
<div id="cesiumContainer"></div>
<div class="form">
<div>3DTile包围盒中心点解析结果:</div>
<div>经度:{{ 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);
},
// 解析包围盒中心点坐标
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);
}
// 是否有转换矩阵
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>