webgl前端怎么控制倾斜摄影数据的显示范围

0 投票
我在桌面端处理倾斜摄影数据时,用box裁剪控制了数据的显示范围。发到服务上去也没有问题,但是在用webgl调用场景时发现,隐藏的范围也显示出来了。有没有什么办法可以解决这个问题?
7月 7, 2018 分类:  492次浏览 | 用户: 落雨知秋 初出茅庐 (63 分)

1个回答

0 投票

您好,box裁剪只是临时的,并未处理数据,裁剪信息是保存在工作空间里面的,webgl加载数据只读数据,不读工作空间的信息,要在webgl展示可以在前端设置box裁剪,参考范例:http://support.supermap.com.cn:8090/webgl/examples/editor.html#clipbox

或者可以直接在桌面端使用倾斜摄影裁剪功能,发布裁剪后的数据也行。

7月 9, 2018 用户: 胡林 登峰造极 (5,879 分)

请问我这串代码有没有问题,一直实现不了功能

						var length = 300;
						var width = 300;
						var height = 100;
						var rotate = 4.0831853;
						//获取鼠标点击的笛卡尔坐标
						var cartesian = new Cesium.Cartesian3(-2611050.2237743433, 4970837.617079508, 3025647.2030163035);
						var boxOption = {
							dimensions: new Cesium.Cartesian3(length, width, height),
							position: cartesian,
							clipMode: "clip_behind_any_plane",
							heading: rotate
						};
						setClipBox();
//						setAllLayersClipOptions(boxOption);
//						setCustomClipBox(boxOption);
//						tooltip.setVisible(false);

						function setClipBox() {
							var newDim = new Cesium.Cartesian3(length, width, height);
							var position = cartesian;
							var clipMode = clip_behind_any_plane;
							var boxOptions = {
								dimensions: newDim,
								position: position,
								clipMode: clipMode,
								heading: 4.0831853
							};
							setAllLayersClipOptions(boxOptions);
						}

						function setAllLayersClipOptions(boxOptions) {							
								setCustomClipBox(boxOptions);
						}

代码写得都跟范例差不多,看不出啥问题,这个你自己对照范例代码做断点调试啊,看异同。

试过打断点,一运行到setCustomBox()就卡等半天才出现结果,根本没法用。要不你看看这串代码

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>BOX裁剪</title>
		<link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet">
		<link href="./css/bootstrap.min.css" rel="stylesheet">
		<link href="./css/pretty.css" rel="stylesheet">
		<script src="./js/jquery.min.js"></script>
		<script src="./js/bootstrap.min.js"></script>
		<script src="./js/bootstrap-select.min.js"></script>
		<script src="./js/tooltip.js"></script>
		<script src="./js/slider.js"></script>
		<script src="./js/config.js"></script>
		<script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
		<style>
			input[type=range] {
				width: 180px;
			}
		</style>
	</head>

	<body>
		<div id="cesiumContainer"></div>
		<div id='loadingbar' class="spinner">
			<div class="spinner-container container1">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
			<div class="spinner-container container2">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
			<div class="spinner-container container3">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
		</div>
		<script>
			function onload(Cesium) {
				var viewer = new Cesium.Viewer('cesiumContainer');
				var scene = viewer.scene;
				var widget = viewer.cesiumWidget;
				var boxEntity = undefined;
				var tooltip = createTooltip(document.body);
				$('#toolbar').show();
				$('#loadingbar').remove();
				try {
					//场景添加S3M图层服务
					var promise = scene.open('http://59.55.128.156:8090/iserver/services/3D-GZ/rest/realspace');
					Cesium.when(promise, function(layers) {
						//设置相机位置、方向,定位至模型
						viewer.scene.camera.setView({
							destination: new Cesium.Cartesian3.fromDegrees(117.715771, 28.319935, 150),
							orientation: {
								heading: 4.0831853,
								pitch: -0.2617994,
								roll: 0
							}
						});

						var length = 300;
						var width = 300;
						var height = 100;
//						var rotate = 4.0831853;
						//获取鼠标点击的笛卡尔坐标
//						var cartesian = new Cesium.Cartesian3(-2611050.2237743433, 4970837.617079508, 3025647.2030163035);
//						var boxOption = {
//							dimensions: new Cesium.Cartesian3(length, width, height),
//							position: cartesian,
//							clipMode: "clip_behind_all_plane"
//							//							heading: rotate
//						};
						var boxOptions = {
							dimensions: new Cesium.Cartesian3(length, width, height),
							position: Cesium.Cartesian3.fromDegrees(-2611050.2237743433, 4970837.617079508, 3025647.2030163035),
							clipMode: "clip_behind_all_plane"
						};
						setCustomClipBox(boxOptions);
						//						setClipBox();
						//						setAllLayersClipOptions(boxOption);
						//						setCustomClipBox(boxOption);
						//						tooltip.setVisible(false);

						//						function setClipBox() {
						//							var newDim = new Cesium.Cartesian3(length, width, height);
						//							var position = cartesian;
						//							var clipMode = clip_behind_any_plane;
						//							var boxOptions = {
						//								dimensions: newDim,
						//								position: position,
						//								clipMode: clipMode,
						//								heading: 4.0831853
						//							};
						//							setAllLayersClipOptions(boxOptions);
						//						}
						//
						//						function setAllLayersClipOptions(boxOptions) {							
						//								setCustomClipBox(boxOptions);
						//						}

					}, function(e) {
						if(widget._showRenderLoopErrors) {
							var title = '加载SCP失败,请检查网络连接状态或者url地址是否正确?';
							widget.showErrorPanel(title, undefined, e);
						}
					});
				} catch(e) {
					if(widget._showRenderLoopErrors) {
						var title = '渲染时发生错误,已停止渲染。';
						widget.showErrorPanel(title, undefined, e);
					}
				}
			}
		</script>
	</body>

</html>

另外这报错也是莫名其妙,几千条错误。。。

...