一 前言
上一节我们完成了vue中使用Cesium的第一步，本节将继续介绍Cesium关于模型加载的一些尝试。在本节分别做了三种尝试（加载cesium官网仓库的纽约模型，加载本地的gltf模型，加载采集的3DTiles数据）
二 加载New York City 3D Buildings
想要加载官网仓库的New York City 3D Buildings模型，你需要先去注册账号，并在项目中填写你的token同时将New York City 3D Buildings 加入到你自己的仓库中，然后通过id进行模型调用，具体操作上节已经说过，此处我们直接使用。
在仓库中我们可以看到New York City 3D Buildings id 为 75343，接下来定义加载方法，直接使用。
loadBuliding(){
//此处不想使用默认的谷歌地图影像，所以使用此url指定ArcGIS的在线影像地图
let url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
let geogle = new Cesium.ArcGisMapServerImageryProvider({url:url});
//此处填写你在cesium注册的token
Cesium.Ion.defaultAccessToken='你的token';
this.viewer= new Cesium.Viewer('cesiumContainer',{
baseLayerPicker: false, //是否显示图层选择控件
selectionIndicator: false,
// geocoder: false, //是否显示地名查找控件
// sceneModePicker: false, //是否显示投影方式控件
// navigationHelpButton: false, //是否显示帮助信息控件
// homeButton: false, //是否显示Home按钮
// fullscreenButton: false, //是否显示全屏按钮
// timeline:false, //时间轴控件
// animation:false, //动画控件
imageryProvider:geogle,
// terrainProvider:new Cesium.createWorldTerrain({
// requestVertexNormals:true,
// requestWaterMask:true
// }),
});
//用来设置相机的观看方向
let initialPosition = Cesium.Cartesian3.fromDegrees(
-74.01881302800248,
40.69114333714821,
-20
);
//设置相机镜头对准的方法
let initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
21.27879878293835,
-21.34390550872461,
0.0716951918898415
);
this.viewer.camera.setView({
destination: initialPosition,
orientation: initialOrientation,
endTransform: Cesium.Matrix4.IDENTITY,
});
//通过id进行加载 此处New York City 3D Buildings 为 75343
let city= new Cesium.Cesium3DTileset({url:Cesium.IonResource.fromAssetId(75343)});
this.viewer.scene.primitives.add(city);
//使不同高度展现不同颜色
let heightStyle = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["${Height} >= 300", "rgba(45, 0, 75, 0.5)"],
["${Height} >= 200", "rgb(102, 71, 151)"],
["${Height} >= 100", "rgb(170, 162, 204)"],
["${Height} >= 50", "rgb(224, 226, 238)"],
["${Height} >= 25", "rgb(252, 230, 200)"],
["${Height} >= 10", "rgb(248, 176, 87)"],
["${Height} >= 5", "rgb(198, 106, 11)"],
["true", "rgb(127, 59, 8)"],
],
},
});
city.style = heightStyle;
},
效果如下：
三 加载gltf模型
loadGlTF(){
this.viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, //是否创建动画小器件，左下角仪表
baseLayerPicker: false, //是否显示图层选择器
fullscreenButton: false, //是否显示全屏按钮
geocoder: false, //是否显示geocoder小器件，右上角查询按钮
homeButton: false, //是否显示Home按钮
infoBox: false, //是否显示信息框
sceneModePicker: true, //是否显示3D/2D选择器,与scene3DOnly不能同时为true
selectionIndicator: false, //是否显示选取指示器组件
timeline: false, //是否显示时间轴
navigationHelpButton: false, //是否显示右上角的帮助按钮
scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
terrainProvider:new Cesium.createWorldTerrain({
requestVertexNormals:true,
requestWaterMask:true
}),
});
let scene = this.viewer.scene;
//关键代码
let modelMatrix = new Cesium.Transforms.eastNorthUpToFixedFrame(new Cesium.Cartesian3.fromDegrees(113.40, 34.32, 6.0));//gltf数据加载位置（自定义）
let model = scene.primitives.add(new Cesium.Model.fromGltf({
url: './scene.gltf', //gltf文件的URL
modelMatrix: modelMatrix,
scale: 1400.0 //放大倍数
}));
this.viewer.camera.setView({
destination: new Cesium.Cartesian3.fromDegrees(113.40, 34.32, 2500.0), //相机飞入点
orientation:{
heading: Cesium.Math.toRadians(90.0), //左右摆头
pitch: Cesium.Math.toRadians(-40), //上下抬头
roll:0.0
}
});
// 限制相机的高度最小值
// this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 2500;
// 设置相机缩小时的速率
//this.viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
},
效果如下：
四 加载采集的3DTiles数据
首页你需要有一组3DTiles数据，并且将数据整体放到服务上以至于可以通过url进行访问（以json文件为入口，进行读取加载）
init3DTilesJson(){
let url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
let geogle = new Cesium.ArcGisMapServerImageryProvider({url:url});
Cesium.Ion.defaultAccessToken='你的token
this.viewer = new Cesium.Viewer('cesiumContainer',{
imageryProvider:geogle,
baseLayerPicker: false, //是否显示图层选择控件
selectionIndicator: false,
geocoder: false, //是否显示地名查找控件
sceneModePicker: false, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
homeButton: false, //是否显示Home按钮
fullscreenButton: false, //是否显示全屏按钮
timeline:false, //时间轴控件
animation:false, //动画控件
terrainProvider:new Cesium.createWorldTerrain({
requestVertexNormals:true,
requestWaterMask:true
}),
});
//开启地下可视化调整高度
// this.viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
// this.viewer.scene.globe.translucency.enabled=true;
// this.viewer.scene.globe.depthTestAgainstTerrain = true;
//相机最低高度
// this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200;
//相机最高高度
// this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 800;
// 设置相机缩小时的速率
//this.viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
//隐藏地球
this.viewer.scene.globe.show = false;
//隐藏logo
this.viewer.cesiumWidget.creditContainer.style.display = "none";
//监听渲染，调整模型位置大小
let palaceTileset= new Cesium.Cesium3DTileset({url:'你的3DTiles文件'})
palaceTileset.readyPromise.then(palaceTileset=>{
//添加到场景
this.viewer.scene.primitives.add(palaceTileset);
let longitude = 121.502325; //模型需要改变的经度(自定义，任意值)
let latitude = 31.238165; //模型需要改变的纬度(自定义，任意值)
let heightOffset = 10; //模型需要改变的高度(根据3DTiles调整，此次调整为10)
//获取3Dtlies的bounds范围
let boundingSphere = palaceTileset.boundingSphere;
//获取3Dtlies的范围中心点的弧度
let cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
//定义3Dtlies改变之后中心点的弧度
let offsetvalue = Cesium.Cartographic.fromDegrees(longitude, latitude, heightOffset);
//模型本身的位置
let surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
//模型改变的位置
let offset = Cesium.Cartesian3.fromRadians(offsetvalue.longitude, offsetvalue.latitude, heightOffset);
//定义模型的改变状态
let translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
//修改模型的位置
palaceTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
//异步设置摄像机以查看提供的一个或多个实体或数据源。
this.viewer.zoomTo(palaceTileset, new Cesium.HeadingPitchRange(0.5, -0.2, palaceTileset.boundingSphere.radius * 1.0));
})
},
效果如下：
此处需要注意的是：
- 背景为星空黑色是因为我把地球隐藏了。
- 当地球未被隐藏的时候你可能在地球表面找不到你的模型，大概率是因为高度没有设置对，模型在地下。这时候你需要开启地下可视化来调整模型高度（heightOffset）
- 一个完整的3DTiles文件格式如下
使用时的url应该是如下格式：http://xxxxxxxx:xx/xxx.json 以json文件为入口
