引入傾斜模型數據

  // 加載3DTiles數據let tileset;try {tileset = await Cesium.Cesium3DTileset.fromUrl("/api/3DTiles/b3dm_qx/tileset.json");viewer.value.scene.primitives.add(tileset); // 傾斜模型添加到場景中viewer.value.zoomTo(tileset); // 視角定位到傾斜模型的位置} catch (error) {console.log(`Error loading tileset: ${error}`);}

await Cesium.Cesium3DTileset.fromUrl("/api/3DTiles/b3dm_qx/tileset.json")

傾斜模型的數據通過nginx代理本地文件夾以接口的形式獲取；如果傾斜模型數據較小可直接放到項目文件Public目錄下，以絕對路徑的形式引入即可；

nginx代理本地文件夾相關操作鏈接

效果展示

調整傾斜模型位置

  let tileset;try {tileset = await Cesium.Cesium3DTileset.fromUrl("/api/3DTiles/b3dm_qx/tileset.json");viewer.value.scene.primitives.add(tileset);viewer.value.zoomTo(tileset);// +++++++++// 原始點let boundingSphere = tileset.boundingSphere;let cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);let longitude = cartographic.longitude;let latitude = cartographic.latitude;let height = cartographic.height;// 世界坐標let origin = Cesium.Cartesian3.fromRadians(cartographic.longitude,cartographic.latitude,cartographic.height);// 偏移后點let offset = Cesium.Cartesian3.fromRadians(longitude,latitude,height - 10);// 計算向量let translate = Cesium.Cartesian3.subtract(offset,origin,new Cesium.Cartesian3());tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translate);viewer.value.scene.globe.depthTestAgainstTerrain = false; // 開啟深度測試} catch (error) {console.log(`Error loading tileset: ${error}`);}

完整代碼

<template><div id="cesiumContainer"></div>
</template><script setup>
import { onMounted, ref } from "vue";
const viewer = ref(null);const initCesium = async () => {// 1.引入tokenCesium.Ion.defaultAccessToken = "xxxxxxxxx";// 2.三維地球初始化viewer.value = new Cesium.Viewer("cesiumContainer", {animation: true, //是否創建動畫小器件，左下角儀表shouldAnimate: true,fullscreenButton: false, //是否顯示全屏按鈕geocoder: false, //是否顯示geocoder小器件，右上角查詢按鈕homeButton: false, //是否顯示Home按鈕infoBox: false, //是否顯示信息框sceneModePicker: false, //是否顯示3D/2D選擇器scene3DOnly: false, //如果設置為true，則所有幾何圖形以3D模式繪制以節約GPU資源selectionIndicator: false, // 是否顯示選取指示器組件timeline: false, // 是否顯示時間軸navigationHelpButton: false,// 是否顯示右上角的幫助按鈕baselLayerPicker: false, // 將圖層選擇的控件關掉，才能添加其他影像數據shadows: false, // 是否顯示背影baseLayerPicker: false, // 是否顯示圖層選擇器orderIndependentTranslucency: false, //去掉大氣層黑圈});// 加載3DTiles數據let tileset;try {tileset = await Cesium.Cesium3DTileset.fromUrl("/api/3DTiles/b3dm_qx/tileset.json");viewer.value.scene.primitives.add(tileset);viewer.value.zoomTo(tileset);// 原始點let boundingSphere = tileset.boundingSphere;let cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);let longitude = cartographic.longitude;let latitude = cartographic.latitude;let height = cartographic.height;// 世界坐標let origin = Cesium.Cartesian3.fromRadians(cartographic.longitude,cartographic.latitude,cartographic.height);// 偏移后點let offset = Cesium.Cartesian3.fromRadians(longitude,latitude,height - 10);// 計算向量let translate = Cesium.Cartesian3.subtract(offset,origin,new Cesium.Cartesian3());tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translate);viewer.value.scene.globe.depthTestAgainstTerrain = false; // 開啟深度測試} catch (error) {console.log(`Error loading tileset: ${error}`);}//縮放viewer.value.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.WHEEL,Cesium.CameraEventType.PINCH,];//視圖視角切換viewer.value.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.PINCH,Cesium.CameraEventType.RIGHT_DRAG,];}onMounted(() => {initCesium();
})
</script><style scoped>
#cesiumContainer {position: relative;width: 100vw;height: 100vh;
}
</style>