<!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 app 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>viewModel2</title>
<!-- The Cesium library. -->
<script src="../ThirdParty/Cesium/Cesium.js"></script>
<!-- Style our app. -->
<style>
@import url(../ThirdParty/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar" style="position:absolute;left:10px; top:10px;background: #fff;">
<table>
<tbody data-bind="foreach: layers">
<tr>
<td>透明度</td>
<td>
<input id="alpha" type="range" min="0.0" max="1.0" step="0.01" data-bind="value: alpha, valueUpdate: 'input'" />
</td>
<td>
<input type="number" min="0.0" max="1.0" step="0.01" data-bind="value: alpha, valueUpdate: 'input'" style="width: 42px;" />
</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="number" min="0" max="10" step="0.01" data-bind="value: brightness" style="width: 42px;" />
</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="number" min="0" max="10" step="0.01" data-bind="value: contrast" style="width: 42px;" />
</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="number" min="0" max="10" step="0.01" data-bind="value: hue" style="width: 42px;" />
</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="number" min="0" max="10" step="0.01" data-bind="value: saturation" style="width: 42px;" />
</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="number" min="0" max="10" step="0.01" data-bind="value: gamma" style="width: 42px;" />
</td>
</tr>
</tbody>
</table>
</div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiMGRjM2QxYi04ODM2LTQzMDEtOGJmOS1mNDlkY2Q2NjE4MjciLCJpZCI6MjU5LCJpYXQiOjE1MjU5NjYyMDd9.xW9loNLo68KE3ReAHd-Lp73M8qJKhI9vA0wYL-qJX_I';
var viewer = new Cesium.Viewer("cesiumContainer");
var imageryLayers = viewer.imageryLayers;
// 1.创建viewModel对象
var viewModel = {
layers:[]
};
// 2.监测viewModel中的属性
Cesium.knockout.track(viewModel);
// 3.激活属性,将viewModel对象与html控件绑定。
// 此时，会将viewModel中的值同步到toolbar。
// 客户操作html控件也会将改变后的值同步到viewModel的相应属性的值。
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
function updateLayerList() {
// 获取视图中的图层数量。
var numLayers = imageryLayers.length;
// 清空viewModel的layers数组。
viewModel.layers = [];
for (var i = numLayers - 1; i >= 0; --i) {
var layer = imageryLayers.get(i);
layer.alpha = 1; // 透明度
layer.brightness = 1; // 亮度
layer.contrast = 1; // 对比度
layer.hue = 0; // 色调
layer.saturation = 1; // 饱和度
layer.gamma = 1; // 伽马
// 此行代码，可保证html控件的滑块和数值同步。(不知道什么原因)。
Cesium.knockout.track(layer, ['alpha', 'brightness', 'contrast', 'hue', 'saturation', 'gamma']);
viewModel.layers.push(layer);
}
}
updateLayerList();
</script>
</body>
</html>
本文介绍如何使用Cesium库调整地图影像图层的透明度、亮度、对比度、色调、饱和度和伽马值，通过HTML和JavaScript实现动态交互，使用户能够自定义地图显示效果。
扫一扫
2374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
