SuperMap iClient3D for WebGL教程(Entity)-Knockout

2024-02-25 09:58

本文主要是介绍SuperMap iClient3D for WebGL教程(Entity)-Knockout,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

作者:为梦齐舞

本文同步更新于简书文章https://www.jianshu.com/p/54a80317d6b5
我们经常使用到这样的功能,我们在界面里面拖动一个滑动条,模型就变小或者变大了;我们拖动一个滑动条,场景颜色变暗淡了,我们输入一个数字,我们的体重就变…这里就想想就好啦
bbaa.gif
这一切的原因都归功于Cesium.knockout;但需要注意Cesium中的knockout与Knockoutjs,功能层面上有大多数是相同的,但是他俩不是完全一样的;但是Cesium中使用了Knockoutjs的库,目前的1.55版本是引用了Knockoutjs的v3.4.2版本,所以这里我们索性来了解下Knockoutjs这个库,不要问我为什么,我就是想学习下。

一、Knockout.js介绍

Knockoutjs是一个轻量级的MVVM库,专注于实现数据与视图的绑定,本身并不提供 UI 类和路由等功能,能够友好地处理数据模型和界面DOM的绑定,并且是双向绑定,和VUE中的v-model功能类似哦,这样可以极大的减少代码量和对DOM元素的操作监控,关于啥是MVVM看图说话吧。
MVVM模式

试想没有Knockoutjs的时候我们需要监测DOM的变化,我们会用到什么,jquery的bind?还是注册一个Dom的on某某事件,不管怎么样,后期的改变时都需要和DOM操作,当还是几个DOM的操作时,是可以忍忍算了,但是50个呢,100个呢,甚至更多,代码量会成倍的增加,并且代码复用性不高,用一个高上大的词,耦合度太高。

1、Knockout.js中的监控属性observable

先上一张图看效果,看着效果如何?
监控属性
接着来看代码,我们来看下实现步骤:
a、定义viewmodel,这里我们定义为model,里面两个属性,一个数量,一个总价。
b、与Dom绑定,我们使用data-bind绑定了值。(对应input标签的文本,需要使用textinput,而普通标签的文本使用text即可)
c、使用ko.observable绑定了num对象
d、使用计算监控属性ko.pureComputed,计算总价
d、激活knockout的绑定,也就是ko.applyBindings(model);

<body><p>价格:1000</p><a>数量:</a><input type="text" data-bind='textinput:num' /><br /><br /><a>总价:</a><a  data-bind='text: total'></a ><script type="text/javascript">var model={num:ko.observable(12),total:123};			model.total = ko.pureComputed(function () {return 1000*model.num();})ko.applyBindings(model);</script></body>

看到这里我想你会说,这也没有啥啊,我用textchange照样实现一样的功能,当然你说观点完全正确,无可反驳,但是observable意义在于不操作DOM,我们在JS中只需要关心怎么修改model.num(),而不是如何操作DOM。
另外提一句,ko.pureComputed计算监控,这里相当于计算价格*数量,为啥我定义的num属性使用的时候要使用model.num(),因为ko.observable已经把它变为了一个函数了,需要具体了解的同学可以度娘下。

2、Knockout.js中的监控依赖属性DependentObservable

又是一张图来了,看看效果有差别吗,好像没有啥差别是吧
监控依赖属性
那还是来看代码吧,敲黑板了哦,看下model中的total呢?为啥没有了,还是计算了总价,这是我们使用了监控依赖属性,而且同时监控了两个DOM对象哦

<body>
<p>价格:1000</p><a>数量:</a><input type="text" data-bind='textinput:num' /><br /><br /><a>运费:</a><input type="text" data-bind='textinput:freight' /><br /><br /><a>总价:</a><a  data-bind='text: total'></a ><script type="text/javascript">var model={num:ko.observable(12),freight:ko.observable(20),};			model.total = ko.dependentObservable(function () {return 1000*model.num()+Number(model.freight());})ko.applyBindings(model);</script></body>

3、Knockout.js中的监控数组ObservableArray

老规矩先上图
ObservableArray

<body>
<a>商品类别无ID:</a><select data-bind="options:typeArrayoutID"></select><br /><br /><br /><a>商品类别:</a><select data-bind="options:typeArray,optionsText:'name'"></select><button id="addBtn">新增类别</button><script type="text/javascript">var typeArray=[{id:1,name:'电子商品'},{id:2,name:'日用品'},{id:3,name:'化妆品'}];var typeArrayoutID=["电子商品","日用品",'化妆品'];var model={typeArray:ko.observableArray(typeArray),typeArrayoutID:ko.observableArray(typeArrayoutID)};ko.applyBindings(model);$("#addBtn").bind('click',function () {model.typeArray.push({id:4,name:'电子商品11'});model.typeArrayoutID.push("电子商品11");})</script></body>

我们可以不再对select进行任何操作,只需要model里面的值就行了,是不是很酷
关于更多的Knockout知识,我们可以参见官方文档:https://knockoutjs.com/documentation/introduction.html

二、Cesium.knockout介绍及使用

上面说到,Cesium中的knockout与Knockoutjs(简称ko),不是完全一样的,但是功能大致一样,依然遵循MVVM模式,只要你理解了ko,那么使用Cesium.knockout将会轻松上手,接下来我们来看下Cesium.knockout的使用方法。

1、knockout中的监控属性getObservable

类似Knockout.js中的监控属性observable,这个属性就是用来监控属性变化的。
老规矩,先上一张效果图,看下Cesium.knockout实现的效果图。
改变飞机状态
接下来我们看下实现步骤:
1、定义viewModel
2、与DOM绑定,我们使用data-bind绑定了值(data-bind="value:scale)
3、使用Cesium.knockout.track绑定viewModel,监控viewModel中的属性(Cesium.knockout.track(viewModel))
4、与DOM元素绑定Cesium.knockout.applyBindings(viewModel, DOM元素)
5、使用Cesium.knockout.getObservable进行属性监控,对模型进行操作

看下改变飞机大小的具体的代码实现:

<body><div id="cesiumContainer"></div><div id='mytoolbar'><a>大小:</a><input type="range" min="1" max="20" data-bind="value:scale,valueUpdate: 'input'" /><a>方向:</a><input type="range" min="0" max="360" data-bind="value:orientation,valueUpdate: 'input'" /><a>位置:</a><input type="range" min="0" max="20" data-bind="value:positionsAdd,valueUpdate: 'input'" /></div><script type="text/javascript">var ssss=5;function onload(Cesium) {var viewer = new Cesium.Viewer('cesiumContainer');var viewModel = {scale: 5,orientation: 45,positionsAdd: 0};Cesium.knockout.track(viewModel);var positionstart = Cesium.Cartesian3.fromDegrees(101.80089882736969, 26.60700234866561, 1170);var orientation = Cesium.Transforms.headingPitchRollQuaternion(positionstart, new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(viewModel.orientation), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0)));var toolbar = document.getElementById('mytoolbar');Cesium.knockout.applyBindings(viewModel, toolbar);var modelAir = viewer.entities.add({id: "test",position: positionstart,orientation: orientation,model: {uri: 'data/Cesium_Air.gltf',scale: viewModel.scale,minimumPixelSize: 20,}});viewer.flyTo(modelAir);Cesium.knockout.getObservable(viewModel, "scale").subscribe(function(value) {modelAir.model.scale=Number(value);});Cesium.knockout.getObservable(viewModel, "orientation").subscribe(function(value) {modelAir.orientation=Cesium.Transforms.headingPitchRollQuaternion(positionstart, new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(Number(value)), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0)));;});Cesium.knockout.getObservable(viewModel, "positionsAdd").subscribe(function(value) {modelAir.position=Cesium.Cartesian3.fromDegrees(101.80089882736969+Number(value)/10000, 26.60700234866561+Number(value)/10000, 1170);});}</script></body>

2、knockout中的监控依赖属性DependentObservable

与Knockout.js相比Cesium.knockout一样的有监控依赖属性
改变颜色
如果我们希望在改变大小方向位置等信息的时候一起改变飞机的颜色,但是我们并没用在viewModel 对象中定义颜色的属性,如何解决呢?那么就可以使用DependentObservable。代码很简单,只有一句:

Cesium.knockout.dependentObservable(function () {modelAir.model.color= new Cesium.Color(Number(viewModel.scale)/255, Number(viewModel.orientation)/255, Number(viewModel.positionsAdd)/255, 1);})

3、knockout中的监控数组ObservableArray

和Knockout.js中使用方法一致,这里不再介绍了。

三、总结

Cesium.knockout对象与Knockout.js对象是不完全一样的,大部分相同但是也有很多不同的地方。可以理解为Cesium.knockout继承于Knockout.js,比如getObservable是Cesium.knockout独有的,ko没有,所以大家注意两者的的区别,建议不要混用,一个工程中使用一种足够解决问题了。

这篇关于SuperMap iClient3D for WebGL教程(Entity)-Knockout的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/745132

相关文章

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》:本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境?二、虚拟环境创建方式对比三、命令行创建虚拟环境(venv)3.1 基础命令3

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

python连接本地SQL server详细图文教程

《python连接本地SQLserver详细图文教程》在数据分析领域,经常需要从数据库中获取数据进行分析和处理,下面:本文主要介绍python连接本地SQLserver的相关资料,文中通过代码... 目录一.设置本地账号1.新建用户2.开启双重验证3,开启TCP/IP本地服务二js.python连接实例1.

Python 安装和配置flask, flask_cors的图文教程

《Python安装和配置flask,flask_cors的图文教程》:本文主要介绍Python安装和配置flask,flask_cors的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,... 目录一.python安装:二,配置环境变量,三:检查Python安装和环境变量,四:安装flask和flas

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

Ubuntu中远程连接Mysql数据库的详细图文教程

《Ubuntu中远程连接Mysql数据库的详细图文教程》Ubuntu是一个以桌面应用为主的Linux发行版操作系统,这篇文章主要为大家详细介绍了Ubuntu中远程连接Mysql数据库的详细图文教程,有... 目录1、版本2、检查有没有mysql2.1 查询是否安装了Mysql包2.2 查看Mysql版本2.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J