Cesium中级教程1 - 空间数据可视化（一）

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

本教程将教读者如何使用Cesium的实体（Entity）API绘制空间数据，如点、标记、标签、线、模型、形状和物体。不须要Cesium的先验知识，可是若是读者彻底没有这方面的经验，那么读者可能但愿从“新手入门中文教程（原创）”开始学习。

什么是实体（Entity）API？

Cesium具备丰富的用于空间数据的API，能够分为两类：面向图形开发人员的低级API（一般称为原始(Primitive)API）和用于数据驱动的可视化的高级API（称为实体(Entity)API）。

原始API的主要目标是暴露手头执行任务所需的最小抽象量。它但愿咱们像图形程序员同样思考，并使用图形术语。它的结构是为给定的可视化类型提供最有性能和灵活性的实现，而不是为了API的一致性。加载一个模型不一样于建立一个广告牌，二者都与建立多边形彻底不一样。每种类型的可视化都有其独特的特征。此外，它们各自具备不一样的性能特征，而且须要遵循不一样的最佳实践。虽然它功能强大且灵活，但大多数应用程序都比Primitive API提供的抽象级别更高。原始API的主要目标是开放手头当前研发工做的所需的最小抽象量。它但愿咱们像图形程序员同样思考，并使用图形术语。它的结构是为给定的可视化类型提供最有性能和灵活性的实现，而不是为了API的一致性。加载一个模型不一样于建立一个广告牌（Billboard ），二者都与建立多边形彻底不一样。每种类型的可视化都有其独特的特征。此外，它们各自具备不一样的性能特征，而且须要遵循不一样的最佳实践。虽然它功能强大且灵活，但大多数应用程序都提供比Primitive API的抽象级别更高的服务接口。

实体API的目的是公开一组设计一致的高级对象，这些对象将相关的可视化和信息聚合到一个统一的数据结构中，咱们称之为实体。它让咱们专一于展现咱们的数据，而不是担忧可视化的潜在机制。它还提供了易于构建复杂的、时间动态可视化的构造，这种可视化方式与静态数据天然相适应。虽然实体API实际上在背后使用了原始API(Primitive API)，但这是咱们（几乎）永远没必要关注的实现细节。经过将各类启发式应用到咱们提供的数据，实体API可以提供灵活的、高性能的可视化，同时公开一致的、易于学习和易于使用的接口。

咱们的第一个实体

学习实体API的基本方法之一是经过查看一些代码。为了让事情简单化，咱们将在CesiumSandcastle的Hello World例子中构建。若是读者在本地开发Cesium，能够自由地使用本身的应用程序。

假设咱们想从经度和纬度的列表中添加一个美国州怀俄明的多边形。（怀俄明之因此被选中是由于它是一个简单的多边形）咱们能够把下面的代码复制粘贴到Sandcastle去作：

var viewer = new Cesium.Viewer('cesiumContainer');

var wyoming = viewer.entities.add({
  name : 'Wyoming',
  polygon : {
    hierarchy : Cesium.Cartesian3.fromDegreesArray([
                              -109.080842,45.002073,
                              -105.91517,45.002073,
                              -104.058488,44.996596,
                              -104.053011,43.002989,
                              -104.053011,41.003906,
                              -105.728954,40.998429,
                              -107.919731,41.003906,
                              -109.04798,40.998429,
                              -111.047063,40.998429,
                              -111.047063,42.000709,
                              -111.047063,44.476286,
                              -111.05254,45.002073]),
    height : 0,
    material : Cesium.Color.RED.withAlpha(0.5),
    outline : true,
    outlineColor : Cesium.Color.BLACK
  }
});

viewer.zoomTo(wyoming);

点击运行按钮（或者F8）能看到下面的图像：

由于咱们的一个目标是让Cesium的代码易于理解，但愿这是不言自明的。咱们建立了Viewer widget，它充当几乎全部Cesium应用程序的基础，而后经过viewer.entities.add. 添加一个新的Entity。咱们传递的需add的对象只是一个提供初始值的选项参数。返回值是实际的实体实例。最后，咱们调用 viewer.zoomTo 以确保实体处于视图中。 有不少实体选项可用，可是如今咱们指定polygon内部的半透明红色和边界的黑色轮廓。咱们也给实体一个“Wyoming 怀俄明”的显示名称。

形状和物体

有了建立多边形的基本知识，而且因为实体API的同质性，咱们如今能够经过简单地使用Sandcastle中的示例做为参考来建立各类图形。下面是支持的形状和物体的完整列表。

材质和轮廓

无论它们的几何定义如何，全部形状和物体都有一组共同的属性来控制它们的外观。fill属性是一个布尔值，它指定是否填充了表面的内部，而outline属性控制形状的边缘是否被轮廓化。 当fill设为true，material属性决定填充物是什么。在接下来的例子中，让咱们建立一个半透明的蓝色椭圆。默认状况下，fill是true，outline是false，因此咱们只须要指定material。

var entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
  ellipse : {
    semiMinorAxis : 250000.0,
    semiMajorAxis : 400000.0,
    material : Cesium.Color.BLUE.withAlpha(0.5)
  }
});
viewer.zoomTo(viewer.entities);

var ellipse = entity.ellipse; // For upcoming examples

Image

咱们也能够将材质指定为一个图片连接：

ellipse.material = '//cesiumjs.org/tutorials/images/cats.jpg';

在上述两种状况下，在赋值时自动为咱们建立一个ColorMaterialProperty属性或ImageMaterialProperty属性。对于更复杂的材料，咱们须要本身建立一个材料属性实例。目前，实体形状和物体支持颜色、图像、棋盘、条纹和网格材料。

棋盘

ellipse.material = new Cesium.CheckerboardMaterialProperty({
  evenColor : Cesium.Color.WHITE,
  oddColor : Cesium.Color.BLACK,
  repeat : new Cesium.Cartesian2(4, 4)
});

条纹

ellipse.material = new Cesium.StripeMaterialProperty({
  evenColor : Cesium.Color.WHITE,
  oddColor : Cesium.Color.BLACK,
  repeat : 32
});

网格

ellipse.material = new Cesium.GridMaterialProperty({
  color : Cesium.Color.YELLOW,
  cellAlpha : 0.2,
  lineCount : new Cesium.Cartesian2(8, 8),
  lineThickness : new Cesium.Cartesian2(2.0, 2.0)
});

轮廓

与fill属性不一样，outline没有相应的材料，而是依赖于两个独立的outlineColor和outlineWidth属性。outlineWidth只适用于非Windows系统，如Android、iOS、Linux和OS X。这是因为WebGL是如何在Windows上的全部三个主要浏览器引擎中实现所限制的。

ellipse.fill = false;
ellipse.outline = true;
ellipse.outlineColor = Cesium.Color.YELLOW;
ellipse.outlineWidth = 2.0;

折线

折线是一种特殊状况，由于它们没有填充或轮廓属性。相反，他们依靠专门的材料来代替颜色。因为这些特殊材料，不一样宽度和轮廓宽度的折线将对全部系统起做用。

var entity = viewer.entities.add({
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                        -77.1, 35]),
    width : 5,
    material : Cesium.Color.RED
}});
viewer.zoomTo(viewer.entities);

var polyline = entity.polyline // For upcoming examples

折线轮廓

polyline.material = new Cesium.PolylineOutlineMaterialProperty({
    color : Cesium.Color.ORANGE,
    outlineWidth : 3,
    outlineColor : Cesium.Color.BLACK
});

折现光晕

polyline.material = new Cesium.PolylineGlowMaterialProperty({
    glowPower : 0.2,
    color : Cesium.Color.BLUE
});

高度与挤压

覆盖在地球上的全部形状，当前是圆、椭圆、多边形和矩形，也能够放置在海拔高度或挤压成一个物体。在这两种状况下，形状或物体仍然符合其下方的地球曲率。

对于高度，咱们所要作的就是在相应的图形对象上设置高度属性，对于上面列出的全部形状都是同样的。这多是提到Cesium老是使用米、弧度和秒做为单位的好时机，除非函数明确地表示了其余状况，好比Cartesian3.fromDegrees。下面的代码行将多边形提高到地球上方250000米处。

wyoming.polygon.height = 250000;

将形状挤压成物体一样容易，咱们只须要设置extrudedHeight 属性。物体将在height和extrudedHeight 之间产生。若是height是undefined，则物体从0开始。为了创造一个物体从200000米开始，延伸到250000米，咱们可使用下面的代码。这固然意味着物体自己是50000米高。

wyoming.polygon.height = 200000;
wyoming.polygon.extrudedHeight = 250000;

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/