Cesium 解析3DTile的包围盒中心点坐标

从3DTile数据的tileset.json文件中，解析出包围盒中心点坐标。包围盒包含：box、region、sphere。
用经纬度记录数据的WGS84坐标系，WKID是4326，用地心为坐标原点的空间直角坐标来记录数据的坐标系，WKID是4979。3dTiles用的就是4979坐标系。

效果

1665740109(1).png

代码

<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>