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 {
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=" 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=" 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=" 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=" 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=" 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=" 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球体的透明度, 亮度等属性
原文链接：https://blog.csdn.net/liu844133828/article/details/82690217