假设这样一个场景,用户在Cesium球上加载了一个GeoJson文件(DataSource),里面是全美国所有州的Geometry信息(Entity),叠加到球面后,你自然会有一种冲动,点击某一个州,了解这个州的基本信息。场景如下图所示:

这个点击行为,对应的是选择控件(SelectionIndicator),而呈现信息的载体,就是信息框控件(InfoBox)。

如上是一个简单的逻辑关系,可见Viewer.SelectEntity属性起到了承上启下的作用。首先,Viewer模块负责UI的事件交互,比如鼠标点击或者双击,则会触发对应事件,判断当前的鼠标事件是否选中了Entity,如果选中,则更新Viewer.SelectEntity属性。

如上,可以看到在Cesium源码中,目前绑定了两个事件,一个是鼠标左键单击,选中该Entity,一个是鼠标左键双击,则会追踪到该位置。当然,如果你想要增加或者修改某个事件,则可以修改screenSpaceEventHandler的内容。可以参考 screenSpaceEventHandler,比如很多人希望取消双击效果,则可以调用:viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

而无论是单击还是双击,内部都是通过pickEntity获取选中的Entity,该方法内部通过ID作为唯一标识,判断是否选中某一Entity,具体实现我们以后在详细讨论。而在单击中,会调用Viewer.SelectEntity的Set方法,此时,当状态发生变化时(选中或消失),都会触发选择控件的动画效果:

如上就是一个Entity从鼠标选中,事件的触发以及属性信息的显示的大致过程。

但Cesiu支持实时性的InfoBox状态更新,也就是说,在每一帧,我们都可以更新选择控件和信息框控件的状态,而这,就要从Viewer.prototype._onTick说起。

首先,Viewer.prototype._onTick由Clock.onTick事件触发,而时钟本身在每一帧都会触发onTick事件,因此Viewer也可以通过onTick来实现自身的更新。

机智的你一眼就看到了time参数,原来如此。这时,根据time时间,我们获取对应的description,字符串类型,本身就是一个div,然后赋给infoBoxViewModel.description进而实现InfoBox控件的实时更新。

通常,每一个Entity的description都是固定内容,不需要根据时间等变换,而如果对实时性有一定要求,或者需要自定义效果,则需要匿名函数来实现回调方法。在这看不见的地方,主要是createPropertyDescriptor,Property两者间错综复杂的关系…

如上是Entity中description的属性定义,通过createPropertyDescriptor把Entity. description封装成Property,提供了Set和Get方法,方便该属性的调用。这里createPropertyDescriptor会根据属性赋值来选择具体的Property子类来满足不同需求,稍后在介绍完Property在详细解释这一部分。

对于Property,则会调用getValueOrDefault方法,获取该Entity的description,获取每一个Entity对应的描述信息,这里,每一个Property都需要提供一个getValue的标准方法,这也是每一个Property子类必须要实现的方法:

而Property有很多子类,但在InfoBox中,主要涉及到CallbackProperty和ConstantProperty两种类型,通过命名我们不难看出,前者是一种回调方式,而后者则是一个常量。

好了,对Property有了一个基本认识后,我们在看看createPropertyDescriptor的具体实现:

高亮处代码,不难看出,在创建时优先考虑CallbackProperty的属性,如果用户没有采用这种属性,此时,value为String类型而不是Property,所以没有实现value. getValue方法,则将value(String)封装为ConstantProperty。所以,constant常量的方式非常简单,直接赋值即可:

Entity.description = “<div> description</div>”;

可我偏要用回调的方式,如何破?我们看看GeoJsonDataSource中是如何实现的。

首先,你要实现一个匿名函数,如上,实现一个describe方法,其中,因为是匿名函数,所以可以随时获取到该Entity的所有属性的Key-Value,可以根据自己的需要来创建对应的DIV,另外,该匿名函数也提供time参数,满足对实时性的需求。

如果,万事俱备,我们就可以开心的创建一个CallbackProperty了:

而CallbackProperty的getValue的实现如下,通过该方法,可以把Entity的description属性,通过CallbackProperty,以RunTime的方式传递给InfoBox,如此,通过CallbackProperty可以实现动态显示InfoBox信息的方式:

基本上,InfoBox的实现大致如此,可以看到,Cesium的InfoBox的还是很成熟的,尽可以的在无编码的情况下显示Entity的属性,同时,也能满足自定义的扩展,并能够满足实时性的要求,而且封装的很优雅,也很简单,真的不是随便就能写来的……

光说不练假把式,写了这么多,相见ifoBox.html,,基于本文涉及到的知识点,实现了自定义InfoBox内容,并可以通过chart实现动态效果。具体代码参考infobox.html范例

Cesium应用篇:3控件(3)SelectionIndicator InfoBox相关推荐

  1. iOS开发UI篇—UITableview控件基本使用

    iOS开发UI篇-UITableview控件基本使用 一.一个简单的英雄展示程序 NJHero.h文件代码(字典转模型) 1 #import <Foundation/Foundation.h&g ...

  2. iOS开发UI篇—UITableview控件使用小结

    iOS开发UI篇-UITableview控件使用小结 一.UITableview的使用步骤 UITableview的使用就只有简单的三个步骤: 1.告诉一共有多少组数据 方法:- (NSInteger ...

  3. iOS开发UI篇—UIScrollView控件介绍

    iOS开发UI篇-UIScrollView控件介绍 一.知识点简单介绍 1.UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 ...

  4. python gui插件_Python进阶量化交易专栏场外篇17- GUI控件在回测工具上的添加

    欢迎大家订阅<教你用 Python 进阶量化交易>专栏!为了能够提供给大家更轻松的学习过程,笔者在专栏内容之外已陆续推出一些手记来辅助同学们学习本专栏内容,目前推出的扩展篇链接如下: 为了 ...

  5. Avalonia跨平台入门第十篇之控件的锁定

    在前面分享的几篇中咱已经玩耍了Popup.ListBox多选.Grid动态分.RadioButton模板.控件的拖放效果.控件的置顶和置底;今天趁着有时间接着对拖放到Canvas上的控件进行锁定的效果 ...

  6. Avalonia跨平台入门第九篇之控件置顶和置底

    在前面分享的几篇中咱已经玩耍了Popup.ListBox多选.Grid动态分.RadioButton模板.控件的拖放效果;今天趁着有时间接着对拖放到Canvas上的控件进行置顶和置底切换的效果,最终实 ...

  7. Avalonia跨平台入门第八篇之控件的拖放

    在前面分享的几篇中咱已经玩耍了Popup.ListBox多选.Grid动态分.RadioButton模板,过程还算顺利;今天接着把把ListBox中的Item拖放到Cavans中(基于官方的Sampl ...

  8. 一起撸个朋友圈吧(step5) 控件篇【控件组装评论控件】

    项目地址:https://github.com/razerdp/FriendCircle 上篇链接:http://www.jianshu.com/p/a2cdf81359fc 下篇链接:http:// ...

  9. 一起撸个朋友圈吧(step5) - 控件篇【控件组装评论控件】

    项目地址:github.com/razerdp/Fri- 上篇链接:http://www.jianshu.com/p/a2cdf81359fc 下篇链接:http://www.jianshu.com/ ...

  10. UI学习第二篇 (控件)

    UIbutton 也是一个控件,它属于UIControl 用的最多的就是事件响应 1. //创建按钮对象 UIButton * _botton = [UIButton buttonWithType:U ...

最新文章

  1. ATS中的动态回源插件stale-while-revalidate调研
  2. 配置TS + node 的开发环境
  3. java安装了为什么运行不了_安装jdk后运行javac可以运行,为什么不能运行java?...
  4. 【Xamarin挖墙脚系列:Xamarin4.0的重大变更】
  5. 51nod1325-两棵树的问题【最大权闭合图,网络流】
  6. 原动力CMS PHP域名授权系统V3.0
  7. mac下java环境变量配置
  8. python刚出来多少薪资-Python工资待遇的几个层级,你工作几年了?目前是哪个层级?...
  9. 字符串转数组的几种方法和字符串的截取
  10. elementui 日期选择值格式
  11. _Linux中删除特殊名称文件的多种方式
  12. 单相全桥逆变器带负载电流前馈的双闭环控制系统设计及仿真
  13. ensp mstp+vrrp配置实验
  14. 一文读懂图像局部特征点检测算法!
  15. 通信原理-确定信号分析
  16. 一元函数积分学的概念与性质
  17. Python Socket联机自动匹配双人五子棋(含登录注册系统与界面,数据库连接,可作结课作业,可用于学习)
  18. 游乐园的娱乐设施会用到哪种导电滑环?
  19. flutter刷新当前页面替换TabController
  20. [PTA] 7-2 I Love GPLT

热门文章

  1. GPU Pro2 - 3.Procedural Content Generation on the GPU
  2. 媒体转码切片_移动、咪咕携手华为实现5G网络切片应用大型直播
  3. iOS手势操作简介(六)
  4. 关于RGBDSLAMV2学习、安装、调试过程
  5. webstorm遇到的问题
  6. LeetCode:二叉树相关应用
  7. mysql中出现没有权限访问或者查看全部数据库的问题---用客户端第一次打开的时候...
  8. iOS NSTextAttachment - 图文混排
  9. Vue 从入门到进阶之路(十四)
  10. day18 面向对象