cesium.js可视化3D建筑物

742 阅读1分钟

在本项目中,使用了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)
});

到这里,可以看下初步的效果:

image.png

如果你的效果是这样的:

image.png

建筑物都飘在空中,可能是没有正确加载地形的原因。

接下来,请出我们的主角,一栋宏伟的大楼:

image.png

前面说过,我们使用了Ion作为数据平台。所以要将大楼的3D模型上传到Ion:

image.png

然后,依旧是通过scene.primitives.add方法,将3D模型添加到地图上

    const newBuildingTileset = viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(123456) //这里要填写Ion上对应的资源id
      })
    );
    viewer.flyTo(newBuildingTileset);//摄像机移到建筑物位置

最终效果:

image.png

总结:

1、通过Cesium Ios可以作为数据平台。实际项目中,应该是通过请求后端接口;

2、通过scene.primitives.add添加3D模型;

参考资料:

cesium.com/learn/cesiu…