前言
cesium 官網的api文檔介紹地址cesium官網api，里面詳細的介紹 cesium 各個類的介紹，還有就是在線例子：cesium 官網在線例子，這個也是學習 cesium 的好素材。
內容概覽
1.基於cesium 實現三維場景展示效果
2.源代碼 demo 下載
本篇實現 cesium 三維場景展示，效果圖如下：
三維模型.gltf場景展示
傾斜攝影場景展示
- 加載三維模型 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, } }); } } }
加載傾斜攝影場景展示
我這里 cesium 加載傾斜攝影是用 3DTiles 形式，用 .b3dm 格式的數據：
更多的詳情見：GIS之家小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波