|
上一节，我们说明了如何加载3DTiles模型，这节我们主要说一下模型加载进来如何进行模型的展示优化。
核心代码
export default {
data() {
return {
Cesium: undefined,
viewer: undefined,
imageryProvider: {},
//经度
longitude: 108.94670,
//纬度
latitude: 34.26197,
//高度
heigth: 8000,
};
},
methods: {
ready(cesiumInstance) {
this.cesiumInstance = cesiumInstance;
const { Cesium, viewer } = cesiumInstance;
this.imageryProvider = new Cesium.UrlTemplateImageryProvider({
url: "/static/map/{z}/{x}/{y}.png",
fileExtension: "png"
});
this.viewer = viewer;
// 加载模型
var palaceTilesetLine = new Cesium.Cesium3DTileset({
url: "/static/3DTiles/jiayouzhan/tileset.json"
});
this.viewer.scene.primitives.add(palaceTilesetLine);
//加载模型数据并定位到模型
var params = {
tx: this.longitude, //模型中心X轴坐标（经度，单位：十进制度）
ty: this.latitude, //模型中心Y轴坐标（纬度，单位：十进制度）
tz: 500, //模型中心Z轴坐标（高程，单位：米）
rx: 90, //X轴（经度）方向旋转角度（单位：度）
ry: 30, //Y轴（纬度）方向旋转角度（单位：度）
rz: 40, //Z轴（高程）方向旋转角度（单位：度）
scale: 10 //放大倍数
};
palaceTilesetLine.readyPromise.then(function(argument) {
//经纬度、高转笛卡尔坐标
var position = Cesium.Cartesian3.fromDegrees(
params.tx,
params.ty,
params.tz
);
var mat = Cesium.Transforms.eastNorthUpToFixedFrame(position);
//缩放 start
var scale = Cesium.Matrix4.fromUniformScale(params.scale);
Cesium.Matrix4.multiply(mat, scale, mat);
//缩放 end
//旋转 start
var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
Cesium.Matrix4.multiply(mat, rotationX, mat);
Cesium.Matrix4.multiply(mat, rotationY, mat);
Cesium.Matrix4.multiply(mat, rotationZ, mat);
//旋转 end
palaceTilesetLine._root.transform = mat;
});
//相机定位
this.viewer.zoomTo(palaceTilesetLine);
// this.viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(
// this.longitude,
// this.latitude,
// this.heigth
// ),
// duration: 0
// });
this.viewer = viewer;
}
}
};
视频地址：第7节：cesium 3dtiles模型展示优化，平移、旋转、缩放...
完整源码：
==夸克网盘==
链接：https://pan.quark.cn/s/24bdffe9ec04
提取码：vXi1
|