viewModel3.html

最新推荐文章于 2024-03-30 09:53:34 发布
最新推荐文章于 2024-03-30 09:53:34 发布
阅读量189 收藏
点赞数 1
分类专栏： cesium_demo 
<!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>viewModel3</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>
            <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>
        </table>
    </div>

    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNDhhYmQxOC1mYzMwLTRhYmEtOTI5Ny1iNGExNTQ3ZTZhODkiLCJpZCI6NTQ1NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzM3Mzc0NH0.RU6ynAZcwQvdfygt_N_j2rb2lpsuyyROzdaLQg0emAg';
        var viewer = new Cesium.Viewer("cesiumContainer");

        // 1.创建viewModel对象
        var viewModel = {
            alpha: 1,
            brightness: 1.0,
            contrast: 1.0,
            hue: 0.0,
            saturation: 1.0,
            gamma: 1.0
        };

        // 2.监测viewModel中的属性
        Cesium.knockout.track(viewModel);

        // 3.激活属性,将viewModel对象与html控件绑定。
        // 此时，会将viewModel中的值同步到toolbar。
        // 客户操作html控件也会将改变后的值同步到viewModel的相应属性的值。
        var toolbar = document.getElementById("toolbar");
        Cesium.knockout.applyBindings(viewModel, toolbar);

        // 验证第3步的后两句话。
        // var alpha = document.getElementById("alpha");
        // alpha.oninput = function () {
        //     console.log(alpha.value);
        //     console.log(viewModel.alpha);
        // }

        // 订阅层参数，从而实现了通过html控件，改变层(影像)的属性。
        subscribeLayerParameters("alpha");
        subscribeLayerParameters("brightness");
        subscribeLayerParameters("contrast");
        subscribeLayerParameters("hue");
        subscribeLayerParameters("saturation");
        subscribeLayerParameters("gamma");

        // 获取当前地球影像，即viewer.imageryLayers数组中的下标为0的图层。
        var curLayer = viewer.imageryLayers.get(0);
        // console.log("viewer.imageryLayers:", viewer.imageryLayers);
        // console.log("curLayer:", curLayer);

        function subscribeLayerParameters(name) {
            /*此函数用于，监听viewModel[name]的变化。
            * 因为客户操作html控件，该控件的值会同步到viewModel的相应的name属性，
            * 所以，此函数通过viewModel(视图模型)实现了监控html控件的功能。*/
            Cesium.knockout.getObservable(viewModel, name).subscribe(function(value) {
                // value即，viewModel[name]改变后的值。
                // console.log(name + ":" + value);
                // console.log(viewModel[name]);
                // 把该值赋值给当前图层的相应属性。
                curLayer[name] = value;
            });
        }
    </script>
</body>

</html>
学无止境慢慢来
关注
专栏目录
零基础学习cesium及demo（1-20）
Bidding
03-20 595
测试demo地址：https://codechina.csdn.net/LiyangBai/cesium-test 1、baseViewer 2、addEntity 1）box 2）cone 3）corridor 4）cylinder 5）ellipse 6）ellipsoid 7）point 8）polygon 9）polyline 10）polylineVolume 11）rectangle 12）wall 欢迎各位同僚指正。
viewModel2.html
weixin_42193179的博客
01-18 183
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;!-- Use correct character set. --&gt; &lt;meta charset="utf-8"&gt; &lt;!-- Tell IE to use the latest, best version. -
html model 属性值,如何从html代码访问viewmodel中的对象的属性？
weixin_34149824的博客
06-09 524
define(['jquery', 'knockout', 'knockout.mapping', 'data/data', 'models/models'],function ($, ko, mapping, data, models) {var post = {},getPost = function (param) {$.when(data.deferredRequest('postDeta...
cesium入门（一）：cesium本地demo
qq_36635746的博客
07-07 1267
直接引用官网cesium.js及其样式文件 将下面的代码保存为一个html文件即可看到3D球体。推荐用nginx或其他web服务器发布html访问。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css">
02 Cesium—官方DEMO和API查看
初八
03-22 3313
文章中所有操作均是在 Cesium 1.91 版本下进行的，其它版本差异请自行适配 Cesium源代码 如何下载源码就不多说了，您可以移步Cesium环境搭建进行查看，将下载之后的 zip 文件解压到您自定义的目录中即可。 运行源码 直接点击 index.html 是无效的，需要放入WebServer 容器中。不管你是习惯什么方式，将它通过服务器形式运起来即可。服务器启动后，直接运行 index.html（例如：http://127.0.0.1:5500/index.html）就能看到如下界面： ..
html viewmodel
07-28
在 HTML 中，可以使用 JavaScript 或其他前端框架来实现 ViewModel。 一种常见的实现方式是使用 MVVM（Model-View-ViewModel）模式。在 MVVM 中，ViewModel 是连接视图和数据模型的桥梁。它负责将数据模型的内容...
backbone.viewmodel:骨干的最小视图模型
07-01
var vm = new ViewModel ( { data : { //can pass a Backbone model or plain object user : { name : 'dave' } } , methods : { sayHi : console . log . bind ( console , 'hi' ) } } ) ; 然后在您的 ...
android 多个activity使用过同一个view,不同的Activity获取同一个Android ViewModel对象的方法...
weixin_35740442的博客
05-25 2270
我们都知道Android ViewModel的生命周期不随Activity的生命周期而改变，因此我们切换横竖屏的时候，数据也不会被清空掉，我们存储在ViewModel对象里面的数据，有时候需要在另外一个Activity或者Fragment里面获取到，就需要做到在不同的Activity获取同一个Android ViewModel对象，这样才能拿到同一个值。如何做到在不同的Activity或者不同的F...
XAML转HTML.zip
10-07
5. **数据绑定**：XAML中的数据绑定机制也需要适配到JavaScript的MVVM（Model-View-ViewModel）框架，如React或Vue.js，以保持视图和模型的一致性。 6. **生成HTML和JS代码**：经过上述转换后，生成HTML、CSS和...
用于在HTML和JavaScript中进行数据绑定的Knockout.js
04-04
3. **数据绑定语法**：展示如何在HTML模板中使用`data-bind`属性与JavaScript对象进行绑定，包括文本绑定、事件绑定、条件绑定、循环绑定等多种类型。 4. **模板和组件**：讲解如何使用Knockout.js的模板系统来复用...
气泡弹窗插件
12-24
气泡弹窗插件
vue3 Cesium入门项目demo
M__O__M的博客
10-24 767
vue3 Cesium入门项目demo
Cesium从入门放弃8：模型编辑Demo
不去想结果，一直在路上
04-02 5186
就是这个东西 1.添加模型 const url = "Apps/model/leida.glb"; const pos = Cesium.Cartesian3.fromDegrees(110, 40, 150); const matrix = Cesium.Transforms.eastNorthUpToFixedFrame(pos); const model = viewer.scene.pr...
Cesium.knockout使用
sRhee的博客
05-23 4390
前言：Cesium.knock能够使Cesium球体监听html控件, 从而根据控件的值实时改变一些地图属性. 如图, Cesium的标注聚合功能, Cesium能够根据html控件输入的像素范围, 最小簇聚, 实时改变标注的范围和大小. 分四步使用 1、 完整代码如下 <!DOCTYPE html> <html lang="en"> <head> &...
Cesium学习笔记（八）：Demo学习(差值器)
simple_soul的博客
07-11 8497
这个Demo是官方Demo中的Interpolation（差值器），不过我更喜欢叫它转圈的飞机o(￣ε￣*)这个Demo看上去就是一个飞机在绕着一个圈在飞，你可以通过切换差值器看效果话说这个Demo困扰了我好久，我一直以为这个飞机飞行是自己画出来的，因为上一个就是嘛，然后一直找啊找，就是找不到最后才发现其实它只是在几个时间段填了几个sample，其他的都是靠差值器自动生成的。。。一起来看一下代码吧h
cesium开发入门（vue2）
qq_45331969的博客
09-04 2175
cesium基础入门
Cesium.Resource数据权限验证（类似cesium ion的token权限验证；将token写入前端header发送get请求）
LEILEI18A的博客
11-13 2429
Cesium：实现类似cesium ion的token权限验证
46.（cesium之家）cesium实现信息提示tooltip
地图之家
11-23 746
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/CesiumUnminified/Cesium.js"></script> <li
探索3D地球：Cesium Demos —— 跨平台、互动式的Web GIS解决方案
最新发布
gitblog_00086的博客
03-30 453
探索3D地球：Cesium Demos —— 跨平台、互动式的Web GIS解决方案 cesium-demos 毕业设计: cesium可视化 项目地址: https://gitcode.com/gh_mirrors/ce/cesium-demos ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值