cesium 地下物体显隐

最新推荐文章于 2024-04-26 15:55:00 发布

铭keny

最新推荐文章于 2024-04-26 15:55:00 发布

阅读量1.2k

点赞数

分类专栏： cesium gis

本文链接：https://blog.csdn.net/qq_34200979/article/details/112987959

版权

cesium 同时被 2 个专栏收录

10 篇文章 2 订阅

订阅专栏

gis

9 篇文章 0 订阅

订阅专栏

1.先上效果

2.上代码引入bucket.css 下载地址https://download.csdn.net/download/qq_34200979/14920919

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Use correct character set. -->
		<meta charset="utf-8">
		<!-- Tell IE to use the latest, best version. -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>Hello World!</title>
		<script src="../Build/CesiumUnminified/Cesium.js"></script>
		<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
		<style>
			@import url(bucket.css);
		      #toolbar {
		        background: rgba(42, 42, 42, 0.8);
		        padding: 4px;
		        border-radius: 4px;
		      }
		      #toolbar input {
		        vertical-align: middle;
		        padding-top: 2px;
		        padding-bottom: 2px;
		      }
		      #toolbar .header {
		        font-weight: bold;
		      }
		    </style>
		<div id="cesiumContainer" class="fullSize"></div>
		<div id="loadingOverlay">
			<h1>Loading...</h1>
		</div>
		<div id="toolbar">
			<table>
				<tbody>
					<tr>
						<td>Translucency enabled</td>
						<td>
							<input type="checkbox" data-bind="checked: translucencyEnabled">
						</td>
					</tr>
					<tr>
						<td>Fade by distance</td>
						<td>
							<input type="checkbox" data-bind="checked: fadeByDistance">
						</td>
					</tr>
					<tr>
						<td>Show vector data</td>
						<td>
							<input type="checkbox" data-bind="checked: showVectorData">
						</td>
					</tr>
					<tr>
						<td>Alpha</td>
						<td>
							<input type="range" min="0.0" max="1.0" step="0.1" data-bind="value: alpha, valueUpdate: 'input'">
							<input type="text" size="5" data-bind="value: alpha">
						</td>
					</tr>
				</tbody>
			</table>
		</div>


		<script>
			var viewer = new Cesium.Viewer("cesiumContainer", {
				terrainProvider: Cesium.createWorldTerrain(),
			});

			//获取场景
			var scene = viewer.scene;


			//获取或设置深度测试椭球体。
			var globe = scene.globe;

			//screenSpaceCameraController获取用于摄像机输入处理的控制器 
			//enableCollisionDetectio启用或禁用摄影机与地形的碰撞检测,为true不会进入地下
			scene.screenSpaceCameraController.enableCollisionDetection = false;
			//translucency 控制全局半透明性的属性。frontFaceAlphaByDistance表示标量值在视角空间中的近距离和远距离处的下限和上限。
			globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(
				400.0, //摄像机范围的下限。
				0.0, //摄像机范围下限的值。
				800.0, //摄像机范围的上限。
				1.0 //摄像机范围上限的值。
			);

			var longitude = -3.82518;
			var latitude = 53.11728;
			var height = 72.8;
			var position = Cesium.Cartesian3.fromDegrees(
				longitude,
				latitude,
				height
			);
			var url = "ParcLeadMine.glb";

			var entity = viewer.entities.add({
				name: url,
				position: position,
				model: {
					uri: url,
				},
			});


			//斑点图
			var polygon = viewer.entities.add({
				polygon: {
					//PolygonHierarchy定义多边形及其线性环的层次结构。本身也可以具有嵌套内部多边形。
					hierarchy: new Cesium.PolygonHierarchy(
						//fromDegreesArrayHeights经度，纬度和高度值的列表。值交替显示[经度，纬度，高度，经度，纬度，高度...]。
						Cesium.Cartesian3.fromDegreesArrayHeights([
							-3.8152789692233817,
							53.124521420389996,
							200.20779492422255,
							-3.8165955002619016,
							53.12555934545405,
							205.85834336951655,
							-3.8201599842222054,
							53.12388420656903,
							230.82362697069453,
							-3.8198667503545027,
							53.123748567587455,
							225.53297006293968,
							-3.8190548496317476,
							53.1240486000822,
							221.82677773619432,
							-3.817536387097508,
							53.122763476393764,
							209.94136782255705,
							-3.8169125359199336,
							53.12285547981627,
							210.96626238861327,
							-3.8166873871853073,
							53.12299403424474,
							211.02223937734595,
							-3.8163695374580873,
							53.12300505277307,
							211.25942926271824,
							-3.8162743040622313,
							53.12281471203994,
							212.35109129094147,
							-3.8159746138174193,
							53.12280996651767,
							214.87977416348798,
							-3.815429896849304,
							53.1236135347983,
							209.72496223706005,
						])
					),
					material: Cesium.Color.LIME.withAlpha(0.5),
					classificationType: Cesium.ClassificationType.TERRAIN,
				},
			});
			//线
			var polyline = viewer.entities.add({
				polyline: {
					positions: Cesium.Cartesian3.fromDegreesArrayHeights([
						-3.8098444201746373,
						53.1190304262546,
						286.1875170545701,
						-3.8099801237370663,
						53.119539531697576,
						288.7733884242394,
						-3.810165716635671,
						53.11979180761567,
						290.9294630315179,
						-3.8104840812145357,
						53.12007534956926,
						292.6392327626228,
						-3.8105689502073554,
						53.120259094792196,
						292.222036965774,
						-3.811027311824268,
						53.120409248874196,
						289.61356291617307,
						-3.811530473295422,
						53.12063281057782,
						284.01098712543586,
						-3.8120545342562693,
						53.120742539082435,
						280.118191867836,
						-3.812444493044727,
						53.120813289759326,
						276.0400221387852,
						-3.812779626711285,
						53.12094275348024,
						271.1187399484896,
						-3.8133560322579494,
						53.12104757866638,
						263.3495497598578,
						-3.8137266493960085,
						53.12120789867194,
						257.73878624321316,
						-3.8142552291751133,
						53.121321248522904,
						251.87265828778177,
						-3.814322603988525,
						53.12174170121103,
						238.7082749547689,
						-3.8143764268391314,
						53.1219492923309,
						235.0371831845662,
						-3.8148156514145786,
						53.12210819668669,
						230.2458816627467,
						-3.8155394721966163,
						53.1222990144029,
						221.33319292262706,
						-3.8159828072920927,
						53.12203093429715,
						223.66664756982703,
						-3.816678108944717,
						53.12183939425214,
						223.8787312412801,
						-3.817466081093726,
						53.121751900508535,
						224.52293229989735,
						-3.8183082996527955,
						53.12173266141031,
						223.3672181535749,
					]),
					width: 8,
					material: new Cesium.PolylineOutlineMaterialProperty({
						color: Cesium.Color.YELLOW,
						outlineWidth: 2,
						outlineColor: Cesium.Color.BLACK,
					}),
					clampToGround: true,
				},
			});

			var viewModel = {
				translucencyEnabled: true,
				fadeByDistance: true,
				showVectorData: false,
				alpha: 0.5,
			};

			Cesium.knockout.track(viewModel);
			var toolbar = document.getElementById("toolbar");
			Cesium.knockout.applyBindings(viewModel, toolbar);
			for (var name in viewModel) {
				if (viewModel.hasOwnProperty(name)) {
					Cesium.knockout.getObservable(viewModel, name).subscribe(update);
				}
			}

			function update() {
				globe.translucency.enabled = viewModel.translucencyEnabled;

				var alpha = Number(viewModel.alpha);
				alpha = !isNaN(alpha) ? alpha : 1.0;
				alpha = Cesium.Math.clamp(alpha, 0.0, 1.0);

				globe.translucency.frontFaceAlphaByDistance.nearValue = alpha;
				globe.translucency.frontFaceAlphaByDistance.farValue = viewModel.fadeByDistance ?
					1.0 :
					alpha;

				polygon.show = viewModel.showVectorData;
				polyline.show = viewModel.showVectorData;
			}
			update();
			//设置相机的位置，方向和变换。
			viewer.scene.camera.setView({
				//目的地
				destination: new Cesium.Cartesian3(
					3826465.9884728403,
					-254831.02751468265,
					5081387.671561018
				),
				//方向
				orientation: new Cesium.HeadingPitchRoll(
					3.3889450556243754,
					-0.5276382514771969,
					6.282272566663295
				),
				//表示飞行完成后摄像机将位于的参考帧的变换矩阵。
				//endTransform: Cesium.Matrix4.IDENTITY,
			});
			//将相机从当前位置移动到新位置
			viewer.scene.camera.flyTo({
				//目的地
				destination: new Cesium.Cartesian3(
					3827270.552916987,
					-255123.18143177085,
					5079147.091351856
				),
				//方向
				orientation: new Cesium.HeadingPitchRoll(
					3.2624281242239963,
					-0.22213535190506972,
					6.282786783842843
				),
				//飞行持续时间
				duration: 5.0,
			});
		</script>
		</body>

</html>

铭keny

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
cesium 地下物体显隐

1.先上效果2.上代码引入bucket.css 下载地址<!DOCTYPE html><html lang="en"> <head>  <meta charset="utf-8">  <meta http-equiv="X-UA-.
复制链接

扫一扫