Vue Cesium 3dTiles模型高度调整

最新推荐文章于 2025-07-14 17:37:06 发布

原创最新推荐文章于 2025-07-14 17:37:06 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

Vue3 同时被 2 个专栏收录

5 篇文章

订阅专栏

cesium

4 篇文章

订阅专栏

本文详细介绍了如何在Cesium中加载3DTiles模型，并通过调整模型高度和坐标转换，实现实时偏移。重点在于理解模型矩阵设置和地理坐标系转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先加载3dtiles模型

  let tileset = dtScene.createDT3DTilesLayer({
      name: 'xian',
      label: '线',
      url: '3DTILE/tileset.json',
      brightness: 1.2, //对比度
    })

调整3dtiles模型的高度

// 调整位置
    var height = -24.0
    tileset._featureSet.readyPromise
      .then(function (tileset) {
        //笛卡尔转换为弧度
        var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)

        var lng = Cesium.Math.toDegrees(cartographic.longitude) //使用经纬度和弧度的转换，将WGS84弧度坐标系转换到目标值，弧度转度
        var lat = Cesium.Math.toDegrees(cartographic.latitude)
        //计算中心点位置的地表坐标
        var surface = Cesium.Cartesian3.fromDegrees(lng, lat, 0.0)
        //偏移后的坐标
        var offset = Cesium.Cartesian3.fromDegrees(lng + 0.000051, lat, height)
        var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
        console.log(translation)
      })
      .otherwise(function (error) {
        throw error
      })

    // tileset._featureSet.readyPromise
    //   .then(function (tileset) {
    //     // 贴地
    //     //计算中心点位置
    //     var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)
    //     var lng = Cesium.Math.toDegrees(cartographic.longitude) //使用经纬度和弧度的转换，将WGS84弧度坐标系转换到目标值，弧度转度
    //     var lat = Cesium.Math.toDegrees(cartographic.latitude)
    //     //计算中心点位置的地表坐标
    //     var surface = Cesium.Cartesian3.fromRadians(lng, lat, 0.0)
    //     //偏移后的坐标
    //     var offset = Cesium.Cartesian3.fromRadians(lng , lat, height)
    //     var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
    //     tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
    //   })
    //   .otherwise(function (error) {
    //     throw error
    //   })

结果：
在这里插入图片描述