Cesium应用篇：3控件（3）SelectionIndicator& InfoBox

假设这样一个场景，用户在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范例