Cesium.knockout【轉】

時間  2020-08-10
標籤 cesium.knockout cesium knockout 简体版
原文   原文鏈接

Cesium.knock可以使Cesium球體監聽html控件, 從而根據控件的值實時改變一些地圖屬性.css

如圖, Cesium的標註聚合功能, Cesium可以根據html控件輸入的像素範圍, 最小簇聚, 實時改變標註的範圍和大小.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球體的透明度, 亮度等屬性app

 

 



原文連接：https://blog.csdn.net/liu844133828/article/details/82690217佈局

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程