Cesium应用篇:3控件(3)SelectionIndicator InfoBox

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

clip_image002

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

clip_image004

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

clip_image006

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

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

clip_image008

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

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

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

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

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

clip_image011

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

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

clip_image013

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

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

clip_image015

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

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

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

clip_image017

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

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

clip_image019

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

clip_image021

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/260973.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

北理工计算机学院新闻,北理工计算机学子勇夺CVPR 2021 AI安全国际顶级赛事季军...

2021年4月19日&#xff0c;CVPR 2021挑战者计划第六期落下帷幕。由北理工计算机学院教师李元章、张全新及广州大学李进教授指导的DemiguiseWoo战队&#xff0c;在挑战赛赛道二“ImageNet无限制对抗攻击”发起冲击&#xff0c;最终以9303.6的总分取得决赛第三名的好成绩&#xf…

字符串入门

暴力 字典树总结&#xff1a;字典树的功能就是map字符串得到编码或者查询前缀关系套模板的时候注意t,s,&#xff0d;‘a’,[26],sz0的初始化还有一个问题&#xff0c;到底字典树开多少内存比较合适&#xff0c;反正至少是要开字符总长度*2hdu1251 http://acm.hdu.edu.cn/showpr…

C++ 的基础概念(3)——多态详解。

最近两次面试都问到了多态&#xff0c;我也不得不重视起来了&#xff0c;最近最大的收获就是&#xff1a;基础知识很重要&#xff0c;就算你很会写代码&#xff0c;但是面试官问你基础知识答不上来的话&#xff0c;也很难被人赏识和录用&#xff0c;所以还是要多补补基础概念&a…

美育在计算机教育中应用,在现代教育技术中绽放数学美育之花

21世纪是信息化的社会&#xff0c;计算机、网络等现代技术的飞速发展&#xff0c;作为现代教育技术&#xff0c;计算机多媒体技术和网络技术已经越来越多地走进小学数学课堂&#xff0c;为深化教学改革&#xff0c;培养学生能力&#xff0c;发展学生个性&#xff0c;提供了崭新…

.NET Forms身份验证

.NET表单身份验证 ASP.NET Forms 身份验证的简单实现&#xff1a;1&#xff09;在Web.config文件中配置应用程序使用 Forms 身份验证&#xff1b;2&#xff09;创建登陆页面&#xff0c;将用户身份验证票证添加到Cookie集合。1.配置文件中设置为Forms验证<authentication mo…

Oracle SQL篇(三)Oracle ROWNUM 与TOP N分析

首先我们来看一下ROWNUM&#xff1a;含义解释&#xff1a;1、rownum是oracle为从查询返回的行的编号&#xff0c;返回的第一行分配的是1&#xff0c;第二行是2&#xff0c;依此类推。这是一个伪列&#xff0c;可以用于限制查询返回的总行数。2、rownum不能以任何基表的名称作为…

C++ Primer 第10章 pair类型

//10.2.cpp //至少使用三种方法创建pair对象。 //编写三个版本的程序&#xff0c;分别采用不同的方法来创建pair对象 //方法1&#xff1a;在定义pair对象时提供初始化式来创建pair对象#include<iostream> #include<vector> #include<utility> #include<st…

计算机对口升学可以报考的学校,对口升学可以报考的学校都在这里,赶快来收藏吧...

对口升学指对口高考&#xff0c;在平常又叫对口单招&#xff0c;对口升学&#xff0c;是从中等职业学校毕业生招生&#xff0c;强调中等职业学校毕业生对口升高职的专业技能考试&#xff0c;以专业技能成绩为主要录取依据的招生办法。报名条件具有正式学籍的中等职业学校毕业生…

Visual Studio 常用快捷键 (二)

想不到上一篇 【Visual Studio 常用快捷键】 受这么多人的欢迎。看来大家对Visual Studio的用法非常感兴趣。 接下来我准备写一个 “Visual Studio使用技巧 ” 一个系列的博客。 希望对大家有所帮助 本篇继续介绍几个常用的快捷键 阅读目录 按两下Tab键回退到光标的上一次位置…

js 兼容event.target

function getEventTarget(e){ewindow.event||e;return e.srcElement||e.target; }转载于:https://www.cnblogs.com/manong13/archive/2012/02/23/2364443.html

企业邮箱收发信息服务器怎么设置,网易闪电邮企业邮箱收发设置教程(IMAP)...

网易闪电邮企业邮箱收发设置教程(IMAP)发表时间 2019-05-30人气 73(1)启动闪电邮后&#xff0c;点击“邮箱---新建邮箱账户”菜单&#xff0c;如下图&#xff1a;(2)输入“邮箱地址和密码”&#xff0c;点击下拉箭头继续设置&#xff0c;设置完成后点击下一步&#xff0c;如下图…

订餐系统之Excel批量导入

批量导入现在基本已经成为各类系统的标配了&#xff0c;当前&#xff0c;我们订餐系统也不例外&#xff0c;什么商家呀、商品呀、优惠码之类的&#xff0c;都少不了。毕竟嘛&#xff0c;对非开发人员来说&#xff0c;看到Excel肯定比看到很多管理系统还是要亲切很多的。这里&am…

需要忽略的一些信号

程序往往会因为收到一些信号导致退出&#xff0c;但很多时候并不是我们想要的&#xff0c;比如往一个已经关闭的socket连接发送数据就会受到SIGPIPE,此信号默认会退出程序&#xff0c;但其实大部分时候我们并不想这么做&#xff0c;所以需要忽略一些信号。常见的有 SIGPIPE SIG…

获取网页中选中的文字

获取页面中选中的文字 //获取页面中选中的文字 function getSelectedText(){if(window.getSelection){ //FFreturn window.getSelection().toString();}else{ //IEreturn document.selection.createRange().text;} }设置或获取输入框的选中文字 //设置文字选中 function setSe…

云服务器和独享虚拟主机的区别,独享虚拟主机和云服务器的几大区别

独享虚拟主机和云服务器的几大区别发布时间&#xff1a;2020-10-15 19:05:51来源&#xff1a;亿速云阅读&#xff1a;99作者&#xff1a;Leah栏目&#xff1a;云计算今天就跟大家聊聊有关独享虚拟主机和云服务器的几大区别&#xff0c;可能很多人都不太了解&#xff0c;为了让大…

oracle数据库之数据导入问题

2019独角兽企业重金招聘Python工程师标准>>> 在oracle数据库中建立好数据库以后&#xff0c;需要使用PLSQL进行用户创建&#xff0c;打开PLSQL&#xff0c;使用时需要使用最高权限进入PLSQL。如下图&#xff1a; 不需要使用用户名和密码&#xff0c;进入数据库操作。…

转向ARC的说明

转自hherima的博客原文&#xff1a;Transitioning to ARC Release Notes&#xff08;苹果官方文档&#xff09; ARC是一个编译器特征&#xff0c;它提供了对OC对象自动管理内存。ARC让开发者专注于感兴趣的代码和对象的关系&#xff0c;而不用考虑对象的retain和release。 概要…

ubuntu11.10 samba服务器配置

安装samba可以实现linux下文件和window共享&#xff0c;这样window下就可以操作linux的文件了。 1、关闭LINUX防火墙 sudo ufw disable 注&#xff1a;ufw是linux下的防火墙操作命令&#xff0c;相关的操作可以查看命令帮助 2、先卸载samba-common sudo ap…

win服务器创建文件夹命令,Win10系统如利用命令提示符或WSL创建任意大小空白文件...

要测试网盘或服务器的上传&#xff0c;下载速度&#xff0c;需要指定大小的文件用来测试。创建的空白文件虽然没有任何内容&#xff0c;但是有大小&#xff0c;可以用来测试实际传输速度、覆盖已删除数据等用途。这篇文章是本站教大家在Win10中用命令或WSL创建任意大小空白文件…

计算UILabel带行间距的行高

为什么80%的码农都做不了架构师&#xff1f;>>> //设置lab的行间距 NSMutableAttributedString *attributedString [[NSMutableAttributedString alloc] initWithString:_doubletStr]; NSMutableParagraphStyle *paragraphStyle [[NSMutableParagraphStyle alloc…