vue3结合Cesium加载倾斜摄影3dtiles

这篇文章主要是为了记录加载3dtiles时模型与地形有时候存在一些高度上的差异，为此将解决方法做一个记录，便于其他读者使用。

加载倾斜摄影3dtitle

javascript 复制代码

//加载倾斜摄影图像
function init3Dtiles() {
  const tileSet = new Cesium3DTileset({
    url: "http://127.0.0.1/data/tileset.json",
    maximumMemoryUsage: 100, //不可设置太高，目标机子空闲内存值以内，防止浏览器过于卡
    maximumScreenSpaceError: 32, //用于驱动细节细化级别的最大屏幕空间错误;较高的值可提供更好的性能，但视觉质量较低。
    maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
    shadows: false, //是否显示阴影
    skipLevelOfDetail: true, // 确定是否应在遍历期间应用详细级别跳过(默认false)
    baseScreenSpaceError: 1024, //When skipLevelOfDetailis true，在跳过详细级别之前必须达到的屏幕空间错误(默认1024)
    skipScreenSpaceErrorFactor: 16, // 定义要跳过的最小屏幕空间错误的乘数。与 一起使用skipLevels来确定要加载哪些图块(默认16)
    skipLevels: 1, //skipLevelOfDetail是true 一个常量，定义了加载图块时要跳过的最小级别数。为 0 时，不跳过任何级别。与 一起使用skipScreenSpaceErrorFactor来确定要加载哪些图块。(默认1)
    immediatelyLoadDesiredLevelOfDetail: false, //当skipLevelOfDetail是时true，只会下载满足最大屏幕空间错误的图块。忽略跳过因素，只加载所需的图块(默认false)
    loadSiblings: false, // 如果为true则不会在已加载完概况房屋后，自动从中心开始超清化房屋 --- 何时确定在遍历期间skipLevelOfDetail是否true始终下载可见瓦片的兄弟姐妹(默认false)
    cullWithChildrenBounds: true, //是否使用子边界体积的并集来剔除瓦片（默认true）
    dynamicScreenSpaceError: true, //减少距离相机较远的图块的屏幕空间错误(默认false)
    dynamicScreenSpaceErrorDensity: 0.00278, //数值加大，能让周边加载变快 --- 用于调整动态屏幕空间误差的密度，类似于雾密度(默认0.00278)
    dynamicScreenSpaceErrorFactor: 4.0, // 用于增加计算的动态屏幕空间误差的因素(默认4.0)
    dynamicScreenSpaceErrorHeightFalloff: 0.25, //密度开始下降的瓦片集高度的比率(默认0.25)
  });

  viewer.scene.primitives.add(tileSet);
  viewer.zoomTo(tileSet);
}

调整倾斜摄影高度

javascript 复制代码

//更新倾斜摄影位置
function update3dtilesMaxtrix(tileSet) {
  //调整参数
  let params = {
    tx: 113.06265738392063, //模型中心X轴坐标（经度，单位：十进制度）
    ty: 22.646803971034342, //模型中心Y轴坐标（纬度，单位：十进制度）
    tz: 40, //模型中心Z轴坐标（高程，单位：米）
    rx: 0, //X轴（经度）方向旋转角度（单位：度）
    ry: 0, //Y轴（纬度）方向旋转角度（单位：度）
    rz: 2, //Z轴（高程）方向旋转角度（单位：度）
    scale: 1.3, //缩放比例
  };
  //旋转
  const mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
  const my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
  const mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
  const rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
  const rotationY = Cesium.Matrix4.fromRotationTranslation(my);
  const rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
  //平移
  const position = Cesium.Cartesian3.fromDegrees(
    params.tx,
    params.ty,
    params.tz
  );
  const m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
  //旋转、平移矩阵相乘
  Cesium.Matrix4.multiply(m, rotationX, m);
  Cesium.Matrix4.multiply(m, rotationY, m);
  Cesium.Matrix4.multiply(m, rotationZ, m);
  //比例缩放
  const scale = Cesium.Matrix4.fromUniformScale(params.scale);
  Cesium.Matrix4.multiply(m, scale, m);
  console.log("矩阵m:", m);
  //赋值给tileset
  tileSet._root.transform = m;
}

调用方式：

javascript 复制代码

//加载倾斜摄影图像
function init3Dtiles() {
  const tileSet = new Cesium3DTileset({
    url: "http://127.0.0.1/data/tileset.json",
    //...代码省略，同上
  });

  viewer.scene.primitives.add(tileSet);
  viewer.zoomTo(tileSet);

  //调用方法
  //加载后调整倾斜摄影的位置、角度等参数
  tileSet.readyPromise.then((tileset) => {
    update3dtilesMaxtrix(tileset);
  });
}