cesium 1.59 imagery adjustment_viewModel.html

最新推荐文章于 2023-06-04 13:43:17 发布

学无止境慢慢来

最新推荐文章于 2023-06-04 13:43:17 发布

阅读量194

点赞数

分类专栏： cesium_demo

cesium_demo 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

<!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, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Adjust brightness, contrast, hue, saturation, and gamma of an imagery layer.">
    <meta name="cesium-sandcastle-labels" content="Showcases">
    <title>imagery adjustment</title>

    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
    <script type="text/javascript">
        require.config({
            baseUrl: '../../../Source',
            waitSeconds: 60
        });
    </script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
    @import url(../templates/bucket.css);

    #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
    }

    #toolbar input {
        vertical-align: middle;
        padding-top: 2px;
        padding-bottom: 2px;
    }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
    <table>
        <tbody>
        <tr>
            <td>亮度</td>
            <td>
                <input type="range" min="0" max="3" step="0.02" data-bind="value: brightness, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: brightness">
            </td>
        </tr>
        <tr>
            <td>对比度</td>
            <td>
                <input type="range" min="0" max="3" step="0.02" data-bind="value: contrast, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: contrast">
            </td>
        </tr>
        <tr>
            <td>色调</td>
            <td>
                <input type="range" min="0" max="3" step="0.02" data-bind="value: hue, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: hue">
            </td>
        </tr>
        <tr>
            <td>饱和度</td>
            <td>
                <input type="range" min="0" max="3" step="0.02" data-bind="value: saturation, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: saturation">
            </td>
        </tr>
        <tr>
            <td>伽马</td>
            <td>
                <input type="range" min="0" max="3" step="0.02" data-bind="value: gamma, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: gamma">
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script id="cesium_sandcastle_script">
    function startup(Cesium) {
        'use strict';
        //Sandcastle_Begin
        let viewer = new Cesium.Viewer('cesiumContainer');
        // imageryLayers，自带一个层，下标为0。
        let imageryLayers = viewer.imageryLayers;
        console.log("imageryLayers:", imageryLayers);

        // viewModel，视图模型。该模型的属性和图层的属性一一对应。
        // viewModel是一座桥梁。
        // 首先，它绑定了用户界面的工具栏，控制手柄，实现了viewModel和控制手柄的同步、联动。
        // 然后，通过监听viewModel的各个属性的值，当其发生变化时，获取其最新值，更新到视图的图层。
        // 最后，把视图中imageryLayers的0层的相应属性的值，更新到viewModel。

        // 1.创建viewModel对象
        let viewModel = {
            brightness: 0,
            contrast: 0,
            hue: 0,
            saturation: 0,
            gamma: 0
        };
        // 2.监测viewModel中的属性
        Cesium.knockout.track(viewModel);
        // 3.将viewModel对象与html控件绑定
        let toolbar = document.getElementById('toolbar');
        Cesium.knockout.applyBindings(viewModel, toolbar);
        // 4.使图层中的0层订阅viewModel的相应属性值。
        if (imageryLayers.length > 0) {
            makeLayer0SubscribeViewModelAttributes(['brightness', 'contrast', 'hue', 'saturation', 'gamma']);
        }
        // 5.更新viewModel，使其属性的值和imageryLayers中的0层属性的初始值一致。
        updateViewModel();
        // imageryLayers.layerAdded.addEventListener(updateViewModel);
        // imageryLayers.layerRemoved.addEventListener(updateViewModel);
        // imageryLayers.layerMoved.addEventListener(updateViewModel);

        function makeLayer0SubscribeViewModelAttributes(attributes) {
            /*此函数用于，使图层中的0层订阅viewModel的相应属性值。
            * attributes, 图层属性的数组。*/
            for (let attribute of attributes) {
                Cesium.knockout.getObservable(viewModel, attribute).subscribe(
                        function (newValue) {
                            imageryLayers.get(0)[attribute] = newValue;
                        }
                );
            }
        }

        function updateViewModel() {
            /*此函数用于，通过遍历viewModel的属性，
            把imageryLayers中下标为0的图层的属性值，
            赋值给viewModel的相应的属性。*/
            if (imageryLayers.length > 0) {
                for (let attribute in viewModel) {
                    viewModel[attribute] = imageryLayers.get(0)[attribute];
                }
            }
        }

        //Sandcastle_End
        Sandcastle.finishedLoading();
    }

    if (typeof Cesium !== 'undefined') {
        startup(Cesium);
    } else if (typeof require === 'function') {
        require(['Cesium'], startup);
    }
</script>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cesium 1.59 imagery adjustment_viewModel.html

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte...
复制链接

扫一扫

专栏目录