cesium 之三维场景展示篇（附源码下载）

前言

cesium 官网的api文档介绍地址cesium官网api，里面详细的介绍 cesium 各个类的介绍，还有就是在线例子：cesium 官网在线例子，这个也是学习 cesium 的好素材。

内容概览

1.基于cesium 实现三维场景展示效果
2.源代码 demo 下载

本篇实现 cesium 三维场景展示，效果图如下：
三维模型.gltf场景展示

image

倾斜摄影场景展示

image

1. 加载三维模型 gltf

• cesium 三维模型格式数据转换
  cesium 支持加载三维模型的格式是 .gltf 或者 .glb，一般我们制作三维模型都是从 3dmax 软件，所以需要转换;官网开源有转换工具 obj2gltf，具体的见这里：https://github.com/AnalyticalGraphicsInc/obj2gltf，转换需要安装 node 环境，我这里加载三维模型就是从 obj 转换 gltf 来的；
• cesium 加载 gltf 展示代码

/*三维模型gltf配置信息*/
MapConfig.Obj3D = {
    position:Cesium.Cartesian3.fromDegrees(111.828682, 21.579571,3000),
    models:[
        {
            id:"3D_gltf",
            name : "测试3D模型",
            position : Cesium.Cartesian3.fromDegrees(111.828682, 21.579571),
            uri :"http://localhost:8180/cesium/3DModel/test/gltf_zapo/Object02.gltf"
        },
        {
            id:"3D_gltf",
            name : "测试3D模型",
            position : Cesium.Cartesian3.fromDegrees(111.828682, 21.579571),
            uri :"http://localhost:8180/cesium/3DModel/test/gltf_zapo/Object03.gltf"
        },
        {
            id:"3D_gltf",
            name : "测试3D模型",
            position : Cesium.Cartesian3.fromDegrees(111.828682, 21.579571),
            uri :"http://localhost:8180/cesium/3DModel/test/gltf_zapo/ZP_DB_04.gltf"
        }]
}

        $("#cesium3DModel").click(function(){
            if(cesium.cesiumViewer.entities.length>0){
                cesium.cesiumViewer.entities.removeAll();//清空所有模型
            }
            cesium.add3DGlft(MapConfig.Obj3D);
        });
    /**
     * 加载GLFT模型
     * @method add3DGlft
     * @param
     * @return
     */
    add3DGlft: function (obj) {
        //加载3dModel
        this.add3DEntityModels(obj.models);
        //跳转位置
        this.flyToPosition(obj.position);
    },
    /**
     * 批量加载3D模型
     * @method add3DEntityModels
     * @param  models 3D模型数组
     * @return
     */
    add3DEntityModels: function (models) {
        if(models && models.length>0){
            for(var i=0;i<models.length;i++){
                var type = null;
                if(models[i].type){
                    type = models[i].type;
                }
                var entity = this.cesiumViewer.entities.add({
                    name : models[i].name,
                    type : type,
                    position : models[i].position,
                    //orientation : orientation,
                    model : {
                        uri : models[i].uri,
                    }
                });              
            }
        }
    }

1. 加载倾斜摄影场景展示
   我这里 cesium 加载倾斜摄影是用 3DTiles 形式，用 .b3dm 格式的数据：

更多的详情见：GIS之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

GIS之家作品：GIS之家
GIS之家源码咨询：咨询模式