Cesium相機高度範圍限制設定
阿新 • • 發佈：2018-11-09
Cesium相機高度範圍限制設定
Cesium相機高度範圍限制設定
最近研究Cesium做業務開發的過程中發現，Cesium在使用滾輪進行縮放操作的時候無法限制縮放級別，最大能到地球看不見，最小能到啥都看不清，這樣的客戶體驗很差，先去找Camera中方法和引數，最終沒有找到如何設定相機的高度範圍。
自己寫的高度範圍設定（很差勁，自己都看不下去，但是奉獻出來一起改進）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../Build/Widgets/widgets.css" /> <script src="../Build/Cesium.js"></script> </head> <body> <div id="cesiumContainer" style="width: 100%;height: 900px;background-color: rosybrown;"></div> </body> <script> var viewer = new Cesium.Viewer('cesiumContainer',{ //需要進行視覺化的資料來源的集合 animation: false, //是否顯示動畫控制元件 shouldAnimate : true, homeButton: false, //是否顯示Home按鈕 fullscreenButton: false, //是否顯示全屏按鈕 baseLayerPicker: false, //是否顯示圖層選擇控制元件 geocoder: false, //是否顯示地名查詢控制元件 timeline: false, //是否顯示時間線控制元件 sceneModePicker: true, //是否顯示投影方式控制元件 navigationHelpButton: false, //是否顯示幫助資訊控制元件 infoBox: false, //是否顯示點選要素之後顯示的資訊 requestRenderMode: true, //啟用請求渲染模式 scene3DOnly: false, //每個幾何例項將只能以3D渲染以節省GPU記憶體 sceneMode: 3, //初始場景模式 1 2D模式 2 2D迴圈模式 3 3D模式 Cesium.SceneMode fullscreenElement: document.body, //全屏時渲染的HTML元素 暫時沒發現用處 imageryProvider : new Cesium.WebMapTileServiceImageryProvider({ url: 'http://t0.tianditu.com/img_w/wmts?', layer: 'img', style: 'default', format: 'tiles', tileMatrixSetID: 'w', credit: new Cesium.Credit('天地圖全球影像服務'), }) }); debugger var camera=viewer.camera; camera.defaultZoomAmount =0; camera.defaultMoveAmount=0; //全球影像中文註記服務 viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg", layer: "tdtAnnoLayer", style: "default", format: "image/jpeg", tileMatrixSetID: "GoogleMapsCompatible", maximumLevel: 13, minimumLevel: 1, show: false })); /** * 飛行位置定位 */ //viewer.scene.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(108.9424, 34.2611, 150000)}); // 滑鼠滾輪事件 var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler.setInputAction(function(wheelment) { var height=camera.positionCartographic.height; if(height<100000){ viewer.camera.setView({ destination : Cesium.Cartesian3.fromRadians(viewer.camera.positionCartographic.longitude, viewer.camera.positionCartographic.latitude, 100000) }); }; if(height>10000000){ viewer.camera.setView({ destination : Cesium.Cartesian3.fromRadians(viewer.camera.positionCartographic.longitude, viewer.camera.positionCartographic.latitude, 10000000) }); } }, Cesium.ScreenSpaceEventType.WHEEL); </script> </html>
缺點：實現了縮放中相機高度的最大和最小限制，但是體驗很差，因為還有會在最大或最小的相機高度重出現跳動的BUG，而且每次在相機最大最小高度範圍時都出出現抖動，因為中心點變化所造成的。效果很差不滿意。
官方引數的方式設定（效果滿意我喜歡）
參考地址
程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>設定Camera高度限制</title> <link rel="stylesheet" href="../Build/Widgets/widgets.css" /> <script src="../Build/Cesium.js"></script> </head> <body> <div id="cesiumContainer" style="width: 100%;height: 900px;background-color: rosybrown;"></div> </body> <script> var viewer = new Cesium.Viewer('cesiumContainer',{ //需要進行視覺化的資料來源的集合 animation: false, //是否顯示動畫控制元件 shouldAnimate : true, homeButton: false, //是否顯示Home按鈕 fullscreenButton: false, //是否顯示全屏按鈕 baseLayerPicker: false, //是否顯示圖層選擇控制元件 geocoder: false, //是否顯示地名查詢控制元件 timeline: false, //是否顯示時間線控制元件 sceneModePicker: true, //是否顯示投影方式控制元件 navigationHelpButton: false, //是否顯示幫助資訊控制元件 infoBox: false, //是否顯示點選要素之後顯示的資訊 requestRenderMode: true, //啟用請求渲染模式 scene3DOnly: false, //每個幾何例項將只能以3D渲染以節省GPU記憶體 sceneMode: 3, //初始場景模式 1 2D模式 2 2D迴圈模式 3 3D模式 Cesium.SceneMode fullscreenElement: document.body, //全屏時渲染的HTML元素 暫時沒發現用處 imageryProvider : new Cesium.WebMapTileServiceImageryProvider({ url: 'http://t0.tianditu.com/img_w/wmts?', layer: 'img', style: 'default', format: 'tiles', tileMatrixSetID: 'w', credit: new Cesium.Credit('天地圖全球影像服務'), }) }); //全球影像中文註記服務 viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg", layer: "tdtAnnoLayer", style: "default", format: "image/jpeg", tileMatrixSetID: "GoogleMapsCompatible", maximumLevel: 13, minimumLevel: 1, show: false })); /** * 設定後當相機高度達到設定的最大和最小高度時將不再放大和縮小 */ viewer.scene.screenSpaceCameraController.minimumZoomDistance = 250000;//相機的高度的最小值 viewer.scene.screenSpaceCameraController.maximumZoomDistance = 22000000; //相機高度的最大值 viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 設定相機縮小時的速率 viewer.scene.screenSpaceCameraController._maximumZoomRate=5906376272000 //設定相機放大時的速率 </script> </html>
優點：實現方式簡單，滿足要求，而且可以控制相機縮放速率，沒有抖動或者跳動的BUG