本文主要是介绍vue3结合Cesium加载倾斜摄影3dtiles，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这篇文章主要是为了记录加载3dtiles时模型与地形有时候存在一些高度上的差异，为此将解决方法做一个记录，便于其他读者使用。
加载倾斜摄影3dtitle
//加载倾斜摄影图像
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);
}调整倾斜摄影高度
//更新倾斜摄影位置
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);//赋值给tilesettileSet._root.transform = m;
}调用方式：
//加载倾斜摄影图像
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);});
}
这篇关于vue3结合Cesium加载倾斜摄影3dtiles的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
