一、所需的地形檔案和模型以及 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 }
加載模型的基本操作就這么多，更多詳細的方法屬性和個性化的設定方法可參考官方檔案
cesium 屬性檔案
cesium 案例展示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/518895.html
標籤：其他
上一篇：什么是閉包？閉包詳解