CesiumJs 簡單操作模型

一、所需的地形文件和模型以及 CesiumJs 包

　　操作之前，我們需要兩份對應的文件，一份是地形文件（可無），一份是對應的模型文件，本次展示的模型是轉換成了 3Dtiles 類型的。
　　如果我們只做基礎的模型展示，只需要引入一個 js 和 一個 css 文件即可

<script src="js/Cesium194/Cesium.js"></script>
<link href="js/Cesium194/Widgets/widgets.css" rel="stylesheet" />

　　cesiumjs 包下載地址

　　然後將處理好的模型文件和地圖文件放入項目中即可，也可以採用遠程讀取方式
　　tileset.json 是模型的屬性放置文件，載入此文件可以渲染模型
　　secnetree.json 裡面存放了模型的結構信息，如果需要展示模型的結構，只需要載入此文件，並對裡面的內容進行序列化

二、放置顯示模型的區域

　　首先我們需要一個放置模型的區域位置

<div id="cesiumContainer" style="width: 100%; height: 100%"></div>

三、載入地圖

　　定義一個對象，初始化對象，並載入地圖
　　url 的內容為地形文件

 1 var viewer = new Cesium.Viewer("cesiumContainer", {
 2             geocoder: false,
 3             selectionIndicator: false,
 4             animation: false,
 5             baseLayerPicker: false,
 6             timeline: false,
 7             sceneMode: Cesium.SceneMode.SCENE3D,
 8             sceneModePicker: false,
 9             navigationHelpButton: false,
10             useDefaultRenderLoop: true,
11             showRenderLoopErrors: true,
12             fullscreenButton: false,
13             infoBox: true,
14             baselLayerPicker: false,
15             vrButton: false,  // VR
16             homeButton: false,
17             imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
18                 url: 'https://t0.tianditu.gov.cn/img_w/wmts?tk=testkey',
19                 layer: 'img',
20                 style: 'default',
21                 tileMatrixSetID: 'w',
22                 format: 'tiles',
23                 maximumLevel: 18
24             }),
25         });
26         viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
27             url: "DEM/dixingfile",
28             baseLayerPicker: false,
29         });;
30 
31 //初始化對象中，所有屬性的解釋
32 var viewer = new Cesium.Viewer('cesiumContainer',{
33         animation:false,//是否顯示左下角的儀錶盤
34         baseLayerPicker:false,//是否顯示圖層選擇器按鈕，右上角那個地圖圖標
35         fullscreenButton:false,//是否顯示全屏按鈕
36         vrButton:false,//是否顯示VR按鈕
37         geocoder:false,//是否顯示搜索按鈕
38         homeButton:false,//是否顯示主頁按鈕
39         infoBox:false,//是否顯示提示信息
40         sceneModePicker:false,//是否顯示右上角的模式切換按鈕
41         selectionIndicator:false,//是否顯示選取指示器組件
42         timeline:false,//是否顯示下邊的時間軸
43         navigationHelpButton:false,//是否顯示右上角的幫助按鈕
44         navigationInstructionsInitiallyVisible:true,//是不顯示導航
45         scene3DOnly:true,//是否指定僅為三維模式，全部使用三維模式可節約GPU資源
46         clock : new Cesium.Clock(),//用於控制當前時間的時鐘對象  
47         selectedImageryProviderViewModel:undefined,//當前圖象圖層的顯示模型，設置baseLayerPicker為true才生效
48         imageryProviderViewModels : Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker選擇的圖像圖層ProviderViewModel數組
49         selectedTerrainProviderViewModel:undefined,//當前地形圖層的顯示模型，設置baseLayerPicker為true才生效
50         terrainProviderViewModels:Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker選擇的地形圖層ProviderViewModel數組
51         // imageryProvider : new Cesium.OpenStreetMapImageryProvider( {    
52         //     credit :'',    
53         //     url : ''    
54         // } ),//圖像圖層提供者
55         terrainProvider : new Cesium.EllipsoidTerrainProvider(),//地形圖層提供者，
56         // skyBox : new Cesium.SkyBox({    
57         //     sources : {
58         //         positiveX : 'stars/TychoSkymapII.t3_08192x04096_80_px.jpg',
59         //         negativeX : 'stars/TychoSkymapII.t3_08192x04096_80_mx.jpg',
60         //         positiveY : 'stars/TychoSkymapII.t3_08192x04096_80_py.jpg',
61         //         negativeY : 'stars/TychoSkymapII.t3_08192x04096_80_my.jpg',
62         //         positiveZ : 'stars/TychoSkymapII.t3_08192x04096_80_pz.jpg',
63         //         negativeZ : 'stars/TychoSkymapII.t3_08192x04096_80_mz.jpg'
64         //     } 
65         // }),//用於渲染星空的SkyBox對象  
66         skyAtmosphere:new Cesium.SkyAtmosphere(),//設置天空大氣層
67         fullscreenElement:document.body,//全屏時指定的元素
68         useDefaultRenderLoop:true,//是否開啟預設的迴圈渲染器
69         targetFrameRate:10,//使用預設渲染迴圈時的目標幀速率
70         showRenderLoopErrors:true,//顯示渲染錯誤信息
71         useBrowserRecommendedResolution:false,//使用瀏覽器的解析度進行渲染
72         automaticallyTrackDataSourceClocks : true,//自動追蹤最近添加的數據源的時鐘設置  
73         contextOptions : undefined,//傳遞給Scene對象的上下文參數
74         sceneMode:Cesium.SceneMode.SCENE3D,//設置地圖場景模式
75         mapProjection:new Cesium.GeographicProjection(),//設置地圖投影坐標系
76         // globe:false,//在場景中使用的地球儀。如果設置為false，則不會添加地球儀。
77         orderIndependentTranslucency:true,//設置無關的透明性
78         creditContainer:null,//設置包含CreditDisplay的DOM元素或ID。
79         dataSources:new Cesium.DataSourceCollection(),//設置數據源
80         terrainExaggeration:1.0,//用來放大地形的標量
81         shadows:true,//設置陰影是否由光源投射。
82         terrainShadows:Cesium.ShadowMode.RECEIVE_ONLY,//設置地形圖的陰影
83         mapMode2D:Cesium.MapMode2D.INFINITE_SCROLL,//設置二維地圖是可旋轉的還是可以在水平方向無限滾動。
84         projectionPicker:false,//是否顯示投影選擇器
85         requestRenderMode:true,//如果為true，則僅當根據場景中的更改確定需要時才會渲染幀
86         maximumRenderTimeChange:true,//設置請求呈現之前允許的最大模擬時間更改
87     });

四、添加模型

　　在將模型添加進去，並且定位模型坐標點，設置視角
　　url 指向的文件為模型文件，只需要載入 tileset.json 文件即可，因為這個文件存放了模型的信息內容

 1 var MainPosition = Cesium.Cartesian3.fromDegrees(110.3245336, 31.1508983, -20); //模型的經緯度信息
 2 var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(MainPosition, new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(-174.9), 0, 0));
 3 
 4 tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
 5             url: "Cesium3DTiles/modelCLM/3dtiles/tileset.json",
 6             modelMatrix: modelMatrix,
 7         }));
 8 
 9         viewer.camera.flyTo({
10             duration: 0.5,
11             destination: Cesium.Cartesian3.fromDegrees(110.32784593574513, 31.15503131147595, 600.6198524134546),  //定位坐標點，建議使用谷歌地球坐標位置無偏差
12             orientation: {
13                 heading: Cesium.Math.toRadians(215),
14                 pitch: Cesium.Math.toRadians(-25),
15                 roll: Cesium.Math.toRadians(0.12880948542545628)
16             }
17         });

　　截至到這裡，模型就基本可以展示出來了，下麵是對模型的一些操作

五、模型點擊事件

　　在點擊模型的時候，模型構件是有對應的詳細信息的，所以我們可以通過事件獲取得到這些模型的屬性信息
　　可以通過 feature.getPropertyNames() 拿到模型信息，然後使用對應的形式來處理這些信息
　　如果你不清楚你的模型有哪些屬性，可以去模型文件 tileset.json 中查找所有屬性。預設點擊後會顯示出所有信息。

 1 var handler3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
 2         handler3D.setInputAction(function (movement) {
 3             var feature = viewer.scene.pick(movement.position);
 4             if (feature instanceof Cesium.Cesium3DTileFeature) {
 5 
 6                 //模型構件的信息數據
 7                 //預設點擊後，會顯示模型所有屬性信息，可通過下麵遍歷方式，取自己所需要查看的即可
 8                 var propertyNames = feature.getPropertyNames();
 9 
10                 for (var i = 0; i < propertyNames.length; ++i) {
11                     var propertyName = propertyNames[i];
12                     console.log(propertyName)
13                     name1 = feature.getProperty("name")
14                 }
15             }     
16         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

六、點擊地圖任意點，獲取經緯度及高度

　　當我們遇到比較大的模型時，可以會在模型上進行一些操作，這時，我們需要拿到模型某個位置的經緯度及高度信息，可以通過以下方法拿到

 1 let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
 2         handler.setInputAction(function (event) {
 3             let ray = viewer.camera.getPickRay(event.position);
 4             let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
 5             let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
 6             let lng = Cesium.Math.toDegrees(cartographic.longitude); // 經度
 7             let lat = Cesium.Math.toDegrees(cartographic.latitude); // 緯度
 8             let alt = cartographic.height; // 高度
 9             let coordinate = {
10                 longitude: Number(lng),
11                 latitude: Number(lat),
12                 altitude: Number(alt)
13             };
14             console.log(coordinate);
15         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

七、獲取整個模型的所有構件信息

　　如果我們需要在載入完模型後拿到模型部分位置的信息，或者是對整個模型的某個部件進行處理，那麼我們可以在模型載入完成後，將模型對象存入指定的位置。一定要在添加模型的位置去執行此方法，其他位置可能拿不到信息

 1  //構件數據放入對象中
 2 tileset.tileLoad.addEventListener(function (tile) {
 3     processTileFeatures(tile, function (data) {
 4        tileset3dDate.push(data);
 5    });
 6 });
 7             
 8 function processTileFeatures(tile, callback) {
 9     var content = tile.content;
10     var innerContents = content.innerContents;
11     if (Cesium.defined(innerContents)) {
12     var length = innerContents.length;
13     for (var i = 0; i < length; ++i) {
14        processContentFeatures(innerContents[i], callback);
15      }
16    } else {
17        processContentFeatures(content, callback);
18     }
19 }
20 
21 function processContentFeatures(content, callback) {
22    var featuresLength = content.featuresLength;
23    for (var i = 0; i < featuresLength; ++i) {
24         var feature = content.getFeature(i);
25         callback(feature);
26     }
27 }