js代码都是https://sandcastle.cesium.com网站上的示例,直接复制到本地有些不能直接运行的
1、实例
//绑定地图容器
var viewer = new Cesium.Viewer("cesiumContainer");
//获取图层列表集合
var imageryLayers = viewer.imageryLayers;//创建一个对象,其属性值是接下来要用的参数值,这么做更多的是为了美观
var viewModel = {//图层亮度,1.0使用未修改的图像颜色。小于1.0会使图像更暗,而大于1.0会使图像更亮brightness: 0,//图层对比度,1.0使用未修改的图像颜色。小于1.0会降低对比度,大于1.0会增加对比度。contrast: 0,//图层色调,单位为弧度,0表示使用未修改的图像颜色hue: 0,//图层饱和度,1.0使用未修改的图像颜色。小于1.0会降低饱和度,大于1.0会增加饱和度。saturation: 0,//应用于该图层的伽马校正,1.0使用未修改的图像颜色。gamma: 0,
};Cesium.knockout.track(viewModel);var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);// 函数1
function subscribeLayerParameter(name) {Cesium.knockout.getObservable(viewModel, name).subscribe(function (newValue) {if (imageryLayers.length > 0) {//获取第一个图层var layer = imageryLayers.get(0);//name代表的是键名(比如hue、gamma等),修改这个值,注释1layer[name] = newValue;}});
}
//这里调用函数1,结合注释1,就看懂了
subscribeLayerParameter("brightness");
subscribeLayerParameter("contrast");
subscribeLayerParameter("hue");
subscribeLayerParameter("saturation");
subscribeLayerParameter("gamma");function updateViewModel() {if (imageryLayers.length > 0) {var layer = imageryLayers.get(0);//下面这段代码,就是将图层的属性值和之前声明的对象中的属性值进行绑定,他变她也变,动态修改亮度,对比度,色调,饱和度,伽马校正viewModel.brightness = layer.brightness;viewModel.contrast = layer.contrast;viewModel.hue = layer.hue;viewModel.saturation = layer.saturation;viewModel.gamma = layer.gamma;}
}
imageryLayers.layerAdded.addEventListener(updateViewModel);
imageryLayers.layerRemoved.addEventListener(updateViewModel);
imageryLayers.layerMoved.addEventListener(updateViewModel);
updateViewModel();
2、亲测
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cesium.com/downloads/cesiumjs/releases/1.79.1/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.79.1/Build/Cesium/Widgets/widgets.css"rel="stylesheet">
</head>
<style>
</style>
<div id="container"><div style="position: fixed;z-index: 2000;color: white;background-color: rgba(255, 255, 255, 0.5);"><div><span>brightness(亮度)</span><input type="range" min="0" max="3" step="0.01" value="1" name=""id="brightness"><input type="text" name="" id="brightnessText" value="1"></div><div><span>contrast(对比度)</span><input type="range" min="0" max="3" step="0.01" value="1" name="" id="contrast"><input type="text" name="" id="contrastText" value="1"></div><span>hue(色调)</span><input type="range" min="0" max="3" step="0.01" value="0" name="" id="hue"><input type="text" name="" id="hueText" value="0"><div><span>saturation(饱和度)</span><input type="range" min="0" max="3" step="0.01" value="1" name=""id="saturation"><input type="text" name="" id="saturationText" value="1"></div><div><span>gamma(伽马校正)</span><input type="range" min="0" max="3" step="0.01" value="1" name="" id="gamma"><input type="text" name="" id="gammaText" value="1"></div></div>
</div><body></body>
<script>let viewer = new Cesium.Viewer('container')
</script>
<script>let layer = viewer.imageryLayers.get(0)document.getElementById('brightness').onchange = () => {document.getElementById('brightnessText').value = document.getElementById('brightness').valuelayer.brightness = document.getElementById('brightness').value}document.getElementById('contrast').onchange = () => {document.getElementById('contrastText').value = document.getElementById('contrast').valuelayer.contrast = document.getElementById('contrast').value}document.getElementById('saturation').onchange = () => {document.getElementById('saturationText').value = document.getElementById('saturation').valuelayer.saturation = document.getElementById('saturation').value}document.getElementById('hue').onchange = () => {document.getElementById('hueText').value = document.getElementById('hue').valuelayer.hue = document.getElementById('hue').value}document.getElementById('gamma').onchange = () => {document.getElementById('gammaText').value = document.getElementById('gamma').valuelayer.gamma = document.getElementById('gamma').value}
</script></html>