在本项目中,使用了Cesium ion作为数据平台,向它请求所需要的静态资源,如地形、建筑物模型、Geo经纬度数据等。
Cesium.Ion.defaultAccessToken = ''; //填写ion上的token
const viewer = new Cesium.Viewer('cesiumContainer',{
terrainProvider: Cesium.createWorldTerrain()
});
初始化时,通过terrainProvider设置地形。这里通过Cesium.createWorldTerrain方法可以从Ion平台获取到地形。所以在初始化前要设置好Ion提供的token.
通过实例的scene.primitives添加建筑物。前面的地形和这里建筑物是Ion平台上默认提供的。
const buildingsTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-104.9965, 39.74248, 4000)
});
到这里,可以看下初步的效果:
如果你的效果是这样的:
建筑物都飘在空中,可能是没有正确加载地形的原因。
接下来,请出我们的主角,一栋宏伟的大楼:
前面说过,我们使用了Ion作为数据平台。所以要将大楼的3D模型上传到Ion:
然后,依旧是通过scene.primitives.add方法,将3D模型添加到地图上
const newBuildingTileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(123456) //这里要填写Ion上对应的资源id
})
);
viewer.flyTo(newBuildingTileset);//摄像机移到建筑物位置
最终效果:
总结:
1、通过Cesium Ios可以作为数据平台。实际项目中,应该是通过请求后端接口;
2、通过scene.primitives.add添加3D模型;
参考资料: