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

相关文章

Elasticsearch 在 Java 中的使用教程

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

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1

Linux卸载自带jdk并安装新jdk版本的图文教程

《Linux卸载自带jdk并安装新jdk版本的图文教程》在Linux系统中,有时需要卸载预装的OpenJDK并安装特定版本的JDK,例如JDK1.8,所以本文给大家详细介绍了Linux卸载自带jdk并... 目录Ⅰ、卸载自带jdkⅡ、安装新版jdkⅠ、卸载自带jdk1、输入命令查看旧jdkrpm -qa

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

MySQL Workbench 安装教程(保姆级)

《MySQLWorkbench安装教程(保姆级)》MySQLWorkbench是一款强大的数据库设计和管理工具,本文主要介绍了MySQLWorkbench安装教程,文中通过图文介绍的非常详细,对大... 目录前言:详细步骤:一、检查安装的数据库版本二、在官网下载对应的mysql Workbench版本,要是

通过Docker Compose部署MySQL的详细教程

《通过DockerCompose部署MySQL的详细教程》DockerCompose作为Docker官方的容器编排工具,为MySQL数据库部署带来了显著优势,下面小编就来为大家详细介绍一... 目录一、docker Compose 部署 mysql 的优势二、环境准备与基础配置2.1 项目目录结构2.2 基

Linux安装MySQL的教程

《Linux安装MySQL的教程》:本文主要介绍Linux安装MySQL的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux安装mysql1.Mysql官网2.我的存放路径3.解压mysql文件到当前目录4.重命名一下5.创建mysql用户组和用户并修

最新Spring Security实战教程之Spring Security安全框架指南

《最新SpringSecurity实战教程之SpringSecurity安全框架指南》SpringSecurity是Spring生态系统中的核心组件,提供认证、授权和防护机制,以保护应用免受各种安... 目录前言什么是Spring Security?同类框架对比Spring Security典型应用场景传统

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言