1.先看展示示例
实现步骤
1.配置好参数
CesiumMapRef.value.addVenue({
id: "",
createTime: "",
modifyTime: "",
name: "国博中心",
angle: 30,
longitude: 106.537751,
latitude: 29.721438,
scale: 1.0,
});
const addVenue = () => {
let url = "/data/gbzx-01.gltf"; //模型地址
options.url = url;
options.locking = true;
options.isBuilding = true;
new venueObj(this.cesium_viewer, options);
}
2.创建3D场馆封装类
export default class venueObj {
constructor(viewer, options) {
this.viewer = viewer;
this.callback = options.callback || function () {};
//初始化
this.init(options);
}
init(options) {
if (!options) return false;
/**
* 鼠标事件
*/
// this.handler = new Handler(this.viewer);
//设置好经纬度
const position = Cesium.Cartesian3.fromDegrees(
options.longitude,
options.latitude
);
const heading = Cesium.Math.toRadians(options.angle); //水平旋转
const pitch = Cesium.Math.toRadians(0);
const roll = Cesium.Math.toRadians(0);
let headingPitchRoll = new Cesium.HeadingPitchRoll(heading, pitch, roll);
let orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
headingPitchRoll
);
// console.log('[ options ] >', options)
var entity = this.viewer.entities.add({
locking: options.locking,
isBuilding: options.isBuilding,
name: options.name,
position: position,
orientation: orientation,
model: {
uri: options.url,
scale: options.scale || 1,
show: true,
},
});
// viewer.scene.primitives.add(entity);
// 模型加载
var _this = this;
Cesium.requestAnimationFrame(function () {
_this.viewer.dataSourceDisplay.defaultDataSource._visualizers
.reduce(function (a, b) {
// console.log(`model iooikjkoj has loaded.`, a , b);
return a instanceof Cesium.ModelVisualizer ? a : b;
})
._modelHash[entity.id].modelPrimitive.readyPromise.then(function () {
console.log(`model ${options.name} has loaded.`);
_this.callback("loaded");
});
});
}
}