Cesium相机高度范围限制设置

最新推荐文章于 2024-09-26 11:45:00 发布

一个修理地球的人

最新推荐文章于 2024-09-26 11:45:00 发布

阅读量1.4w

点赞数 12

分类专栏： Cesium 文章标签： Cesium 相机高度范围 camera screenSpaceCameraController

本文链接：https://blog.csdn.net/wo_buzhidao/article/details/82871990

版权

Cesium 专栏收录该内容

18 篇文章 9 订阅

订阅专栏

Cesium相机高度范围限制设置

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