cesium 学习02 ，调整模型高度

1. 3D Tiles数据集

3D Tiles数据集，相当于是存放3D数据的文件夹，将许多的3D数据分成很多小块，更好地管理和渲染大量的3D地理数据。

2. 初始化viewer

<div id="credit"></div>
// viewer已全局定义
// -------onMounted执行--------
viewer = new Cesium.Viewer('credit')
// 开启深度监测
viewer.scene.globe.depthTestAgainstTerrain = true 

开启深度监测的原因是： 用于确定哪些对象在另外对象前面或者后面，可以理解图层显示的优先级

3. 加载 3d Tiles数据

// 定义一个函数
const drawModel = (viewer: any) => {
    Cesium.Cesium3DTileset.fromUrl('xx/tileset.json').then(tileset => {
        viewer.scene.primitives.add(tileset);
        viewer.zoomTo(tileset) // 不添加这个就看不见模型
    })
}

4. 运行结果

将我们定义好的drawModel 放在onMounted执行，你会发现模型没有贴地面，这个时候需要调整模型的高度来贴地

5. 调整模型高度

// 定义一个函数
const adjustHeight = (tileset: any, height: number) => {
     //高度偏差，正数为向上偏，负数为向下偏，根据真实的模型位置不断进行调整
    var heightOffset = height;
    //计算tileset的绑定范围 boundingSphere 是模型的包围球
    var boundingSphere = tileset.boundingSphere;
    //计算中心点位置
    var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
    //计算中心点位置坐标
    var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude,
        cartographic.latitude, 0);
     //偏移后的三维坐标
    var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude,
        cartographic.latitude, heightOffset);
    var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
    //tileset.modelMatrix转换
    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
   }

6. 完整代码

// -------onMounted执行--------
viewer = new Cesium.Viewer('credit')
// 开启深度监测
viewer.scene.globe.depthTestAgainstTerrain = true 
drawModel()

const drawModel = (viewer: any) => {
    Cesium.Cesium3DTileset.fromUrl('xx/tileset.json').then(tileset => {
        // 调整模型的高度
        adjustHeight(tileset, -30)
        viewer.scene.primitives.add(tileset);
        viewer.zoomTo(tileset) // 不添加这个就看不见模型
    })
}

运行结果：

调整模型的高度值,我是不断改值去尝试的,有啥更好的办法欢迎评论