[CesiumJS]Cesium中级教程 - 空间数据可视化

Viewer中的Entity功能
让我们看看Viewer为操作entities提供出来的功能函数。

选中和描述
点击Viewer中的entity将在entity的位置上呈现SelectionIndicator控件，提供一个InfoBox用于呈现更多的信息。我们可以设置name，来定义InfoBox的标题。我们也以HTML样式来提供Entity.description的属性。

wyoming.name = ‘wyoming’;
wyoming.description = ’
<img
width=“50%”
style=“float:left; margin: 0 1em 1em 0;”
src="//cesium.com/docs/tutorials/creating-entities/Flag_of_Wyoming.svg"/>\

\ Wyoming is a state in the mountain region of the Western \ United States.\

\

\ Wyoming is the 10th most extensive, but the least populous \ and the second least densely populated of the 50 United \ States. The western two thirds of the state is covered mostly \ with the mountain ranges and rangelands in the foothills of \ the eastern Rocky Mountains, while the eastern third of the \ state is high elevation prairie known as the High Plains. \ Cheyenne is the capital and the most populous city in Wyoming, \·········· with a population estimate of 63,624 in 2017.\

\

\ Source: \

InfoBox中展示的所有HTML是沙盒式的。这组织了外部数据源带有恶意的注入到Cesium的应用程序中。为了在描述中运行JavaScript或浏览器插件，访问沙盒中的iframe通过viewer.infoBox.frame属性。参考该文可以获得更多的信息用于控制iframe中的沙盒。

Camera控制
使用iewer.zoomto命令查看特定Entity。还有一个viewer.flyto方法，用于对Entity执行动画Camera飞行。这两种方法都可以传递给Entity、EntityCollection、DataSource或实体数组。

任何一种方法都会计算所有提供的实体的视图。默认情况下，Camera朝向北方，并从45度角向下看。通过传入HeadingPitchrange自定义此项。

var heading = Cesium.Math.toRadians(90);
var pitch = Cesium.Math.toRadians(-30);
viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch));

zoomTo和flyTo都是异步函数；也就是说，它们不能保证在返回之前完成。例如，飞行到Entity会在许多动画帧后发生。这两个功能都返回Promises，可用于计划飞行或缩放完成后要执行的功能。用下面的代码片段替换示例中的zoomTo。这架飞机飞往怀俄明州，并在飞行结束后选中它。

viewer.flyTo(wyoming).then(function(result){
if (result) {
viewer.selectedEntity = wyoming;