Cesium.knockout

最新推荐文章于 2024-10-16 16:32:42 发布

「已注销」

最新推荐文章于 2024-10-16 16:32:42 发布

阅读量6k

点赞数 5

分类专栏： Cesium

本文链接：https://blog.csdn.net/liu844133828/article/details/82690217

版权

Cesium 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Cesium.knock能够使Cesium球体监听html控件, 从而根据控件的值实时改变一些地图属性.

如图, Cesium的标注聚合功能, Cesium能够根据html控件输入的像素范围, 最小簇聚, 实时改变标注的范围和大小.

下面我们来实现一个简单的实例

通过调整input的值, 改变Cesium球体的透明度, 亮度等属性值

1.首先创建一个三维球

创建一个<div>容器cesiumContainer, 设置cesiumContainer全屏, 然后引入Cesium.js和小部件weidget.css布局, 通过new Cesium.Viewer("cesiumContainer")完成实例化

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>测试Cesium.knockout</title>
		<script src="../Build/Cesium/Cesium.js"></script>
		<style>
			@import url(../Build/Cesium/Widgets/widgets.css);
			html,
			body,
			#cesiumContainer {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<div id="cesiumContainer"></div>

		<script>
			var viewer = new Cesium.Viewer("cesiumContainer");
		</script>
	</body>

</html>

然后, 添加input布局

		<div id="toolbar" style="position:absolute;left:10px; top:10px;background: #fff;">
			<table>
				<tr>
					<td>透明度</td>
					<td>
						<input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: alpha, valueUpdate: 'input'" />
					</td>
					<td>
						<input type="input" min="0.0" max="1.0" step="0.01" data-bind="value: alpha" style="width: 30px;" />
					</td>
				</tr>
				<tr>
					<td>亮度</td>
					<td>
						<input type="range" min="0" max="10" step="0.01" data-bind="value: brightness, valueUpdate: 'input'" />
					</td>
					<td>
						<input type="input" min="0" max="10" step="0.01" data-bind="value: brightness" style="width: 30px;" />
					</td>
				</tr>
				<tr>
					<td>对比度</td>
					<td>
						<input type="range" min="0" max="10" step="0.01" data-bind="value: contrast, valueUpdate: 'input'" />
					</td>
					<td>
						<input type="input" min="0" max="10" step="0.01" data-bind="value: contrast" style="width: 30px;" />
					</td>
				</tr>
				<tr>
					<td>色调</td>
					<td>
						<input type="range" min="0" max="10" step="0.01" data-bind="value: hue, valueUpdate: 'input'" />
					</td>
					<td>
						<input type="input" min="0" max="10" step="0.01" data-bind="value: 	hue" style="width: 30px;" />
					</td>
				</tr>
				<tr>
					<td>饱和度</td>
					<td>
						<input type="range" min="0" max="10" step="0.01" data-bind="value: saturation, valueUpdate: 'input'" />
					</td>
					<td>
						<input type="input" min="0" max="10" step="0.01" data-bind="value: saturation" style="width: 30px;" />
					</td>
				</tr>
				<tr>
					<td>伽马</td>
					<td>
						<input type="range" min="0" max="10" step="0.01" data-bind="value: gamma, valueUpdate: 'input'" />
					</td>
					<td>
						<input type="input" min="0" max="10" step="0.01" data-bind="value: gamma" style="width: 30px;" />
					</td>
				</tr>
			</table>
		</div>

给html控件设置一个id, 然后通过data-bind="value: 变量名"的方式, 将input与对象viewModel的属性值对应起来

		<script>
			var viewer = new Cesium.Viewer("cesiumContainer");
			
			//1.创建viewModel对象
			var viewModel = {
				alpha: 1.0,
				brightness: 1.0,
				contrast: 1.0,
				hue: 0.0,
				saturation: 1.0,
				gamma: 1.0
			};

			//2.监测viewModel中的属性
			Cesium.knockout.track(viewModel); 

			//3.激活属性,将viewModel对象与html控件绑定
			var toolBar = document.getElementById("toolbar");
			Cesium.knockout.applyBindings(viewModel, toolBar);

			subscribeLayerParameter("alpha");
			subscribeLayerParameter("brightness");
			subscribeLayerParameter("contrast");
			subscribeLayerParameter("hue");
			subscribeLayerParameter("saturation");
			subscribeLayerParameter("gamma");
			
			//获取当前地球影像
			var mLayer = viewer.imageryLayers.get(0);
			
			function subscribeLayerParameter(name) {
				//4.监听控件值的变化
				Cesium.knockout.getObservable(viewModel, name).subscribe(function(value) {
					//value值改变后会赋值给imagelayer的相应属性
					console.log(name + ":" + value);
					mLayer[name] = value;
				});
			}
		</script>

运行效果

可以通过input来实时调整Cesium球体的透明度, 亮度等属性