Cesium.knockout【转】
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球体的透明度, 亮度等属性
原文链接：https://blog.csdn.net/liu844133828/article/details/82690217
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
2018-06-23 前端Js框架汇总【转】
2014-06-23 2013年中国区Skyline软件价格体系
2014-06-23 [OSG]如何用Shader得到物体的世界坐标
2014-06-23 GLSL 基础量定义
2014-06-23 glsl水包含倒影的实现(rtt) [转]
2014-06-23 osg通过glsl实现一个平面的水效果(法线贴图) 【转】
2014-06-23 怎样在osg中动态的设置drawable的最近最远裁剪面