cesium 加载海量数据（Cesium开发基础篇03加载矢量数据）

基础篇的前两节我们学习了在三维球中通过Cesium如何加载影像数据和地形数据，今天我们学习一下Cesium是如何加载矢量数据的。在学习之前，首先我们先了解一下什么是矢量数据。

矢量数据（Vector Data）是用X、Y、Z坐标表示地图图形或地理实体位置的数据，一般是通过记录坐标的方式来尽可能将地理实体的空间位置表现的准确无误，常见的矢量数据有：点、线、面等格式。我们使用矢量数据的原因，就是因为矢量数据具有数据结构紧凑、冗余度低、有利于网络和检索分析、图形显示质量好、精度高等优点。

目前最常见的矢量数据格式就是shapfile（简称shp），它是由Esri公司开发的一种空间数据开放格式。同时shapfile也成为了GIS行业的标准，几乎所有的商业和开源GIS软件都支持Shapefile。通常情况下，一个"shapefile"通常指带有.shp、.shx、.dbf和其他扩展名且前缀名称一致的文件（.prj、.sbn等）集合。

一个shapfile必须包含的文件：

• 主文件（*.shp）：存储地理要素的几何信息
• 索引文件（*.shx）：存储要素几何图形的索引信息
• dBase表文件（*.dbf）：存储地理要素的属性信息（非几何信息）

除此之外还有可选的文件：

• 空间参考文件（.prj）：存储空间参考信息，即地理坐标系统信息和投影坐标系统信息，使用well-known文本格式（WKT）进行描述。
• 几何体的空间索引文件（.sbn 和 .sbx）、只读的Shapefiles的几何体的空间索引文件（.fbn 和.fbx）等等

shapfile如此强大和受欢迎，只可惜Cesium却不能直接加载shp文件，如果想加载shp文件，感兴趣的可以参考这位大牛封装的库CesiumVectorTile。Cesium直接支持的矢量数据格式包括：geojson、topojson、kml以及具有时间特性的czml，并以DataSouce后缀去命名相关的类。

GeoJSON介绍GeoJSON是用于描述地理空间信息的数据格式，它不是一种新的格式，其语法规范是符合JSON格式的，只不过对其名称进行了规范，专门用于表示地理信息。GeoJSON的最外层是一个单独的对象（object）。这个对象可表示：① 几何体（Geometry）；② 特征（Feature）；③ 特征集合（FeatureCollection）；最外层的 GeoJSON 里可能包含有很多子对象，每一个 GeoJSON 对象都有一个 type 属性，表示对象的类型，其type 的值可以是：Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon、GeometryCollection、Feature、FeatureCollection。下面是一个GeoJSON特征集合示例：

"type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [102.0, 0.5]}, "properties": {"prop0": "value0"} }, { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0] ] }, "properties": { "prop0": "value0", "prop1": 0.0 } }, { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ] ] }, "properties": { "prop0": "value0", "prop1": {"this": "that"} } } ] }

TopoJSON介绍TopoJSON是 GeoJSON 按拓扑学编码后的扩展形式，是由 D3 的作者 Mike Bostock 制定的。相比 GeoJSON 直接使用Polygon、Point之类的几何体来表示图形的方法，TopoJSON中的每一个几何体都是通过将共享边（被称为arcs）整合后组成的。对比简易图如下：

TopoJSON使用坐标（点）、弧（线、多边形）来表示地理图形，它由transform、objects和arcs三部分组成。transform描述了变换参数；objects描述地理实体包含空间及属性信息；arcs描述了有向弧的空间关系，弧由一系列起点及相对于起点的有向偏移坐标表示。基于这种弧的存储方式可以表达出拓扑关系，由于弧只记录一次及地理坐标使用整数，不使用浮点数，相对于GeoJSON，TopoJSON 消除了冗余，文件大小缩小了 80%。

概念总是那么的抽象，为了表达得更形象些，下面列出了相关示例。

"type":"Topology", "transform":{ "scale": [1,1], //缩放比例 "translate": [0,0] //相对于原点([0,0])的偏移量 }, "objects":{ "two-squares":{ "type": "GeometryCollection", "geometries":[ {"type": "Polygon", "arcs":[[0,1]],"properties": {"name": "Left_Polygon" }}, {"type": "Polygon", "arcs":[[2,-1]],"properties": {"name": "Right_Polygon" }} ] }, "one-line": { "type":"GeometryCollection", "geometries":[ {"type": "LineString", "arcs": [3],"properties":{"name":"Under_LineString"}} ] }, "two-places":{ "type":"GeometryCollection", "geometries":[ {"type":"Point","coordinates":[0,0],"properties":{"name":"Origine_Point"}}, {"type":"Point","coordinates":[0,-1],"properties":{"name":"Under_Point"}} ] } }, "arcs": [ [[1,2],[0,-2]], [[1,0],[-1,0],[0,2],[1,0]], [[1,2],[1,0],[0,-2],[-1,0]], [[0,-1],[2,0]] ]}

在线工具推荐

• JSON在线解析及格式化：https://www.json.cn/
• 在线生成 GeoJSON：http://geojson.io/
• shp数据转 GeoJSON 和 TopoJSON：http://mapshaper.org/
• GeoJson和TopopJson在线转换：http://jeffpaine.github.io/geojson-topojson/

示例代码

viewer.dataSources.add( Cesium.GeoJsonDataSource.load( "../../SampleData/ne_10m_us_states.topojson", { stroke:Cesium.Color.HOTPINK, fill:Cesium.Color.PINK.withAlpha(0.5), strokeWidth:3, } ) );

KML介绍KML (keyhole markup language)是一种基于XML语法格式的文件，用来描述和存储地理信息数据（点、线、面、多边形、多面体以及模型等），通常应用于 Google 地球相关软件中（Google Earth，Google Map 等），它跟XML文件最大的不同就是KML描述的是地理信息数据，同时KML已正式被OGC采用，成为OGC众多规范中的一个。KML文件有两个文件扩展名：.KML 和.KMZ（一个或几个 KML 文件的压缩集，采用 zip 格式压缩）。Cesium从1.7版开始就支持KML，目前对KML的支持还不完整，但是支持大量的标准以及Google的gx扩展名称空间。有关支持哪些内容和不支持哪些内容的详细列表，请参见Github问题 https://github.com/CesiumGS/cesium/issues/873。

示例代码

Cesium.KmlDataSource.load( "../../SampleData/kml/facilities/facilities.kml", { camera:viewer.scene.camera, canvas:viewer.scene.canvas, } )

CZML介绍CZML是cesium中很重要的一个概念，也是一个亮点，它使得cesium很酷很炫地展示动态数据成为可能。CZML是一种JSON格式的字符串，用于描述与时间有关的动画场景，CZML包含点、线、地标、模型和其他的一些图形元素，并指明了这些元素如何随时间而变化。Cesium拥有一套富客户端API，通过CZML采用数据驱动的方式，不用写代码我就可以使用通用的Cesium viewer构建出丰富的场景。某种程度上说,，Cesium和CZML的关系就像Google Earth和KML的关系，两者都是用于描述其各自客户端中的场景的数据格式，并且旨在由各种各样的应用程序生成，甚至可能是手工编写的 。下面是一个典型的CZML数据结构：

// packet one { "id": "GroundControlStation" "position": { "cartographicDegrees": [-75.5, 40.0, 0.0] }, "point": { "color": { "rgba": [0, 0, 255, 255] }, } }, // packet two { "id": "PredatorUAV", // ... } ]

如上CZML片段描述了两个数据包，每个数据包都有一个id标识它描述的对象的属性。id不一定要求是GUID，但它们确实需要唯一地标识CZML源中的单个对象。如果id未指定，Cesium将自动生成一个唯一的。但是，这会阻止以后的数据包引用该对象，例如向该对象添加更多数据。除id属性之外，还包含更多的属性用于定义要绘制对象的属性。在上面的示例中，我们在WGS 84(-75.5,40.0,0.0)位置中指定了一个id为“ GroundControlStation”对象，并在其位置绘制了一个蓝色的点。详细的数据结构和更多的属性可参考CZML数据结构(https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Structure)、数据(https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/Packet)包这两个地址。

CZML比较特殊的是跟时间序列相关的属性。

// ... "someInterpolatableProperty": { "cartesian": [ "2012-04-30T12:00Z", 1.0, 2.0, 3.0, //表示当时间为2012-04-30T12:00Z，坐标为(1,2,3) "2012-04-30T12:01Z", 4.0, 5.0, 6.0, //表示当时间为2012-04-30T12:01Z，坐标为(4,5,6) "2012-04-30T12:02Z", 7.0, 8.0, 9.0 //表示当时间为2012-04-30T12:02Z，坐标为(7,8,9) ] } } { // ... "someInterpolatableProperty": { "epoch": "2012-04-30T12:00Z", //表示时间起点为2012-04-30T12:00：00 "cartesian": [ 0.0, 1.0, 2.0, 3.0, //从起点开始，第0秒时坐标为(1,2,3) 60.0, 4.0, 5.0, 6.0, //从起点开始，第60秒时坐标为(4,5,6) 120.0, 7.0, 8.0, 9.0 //从起点开始，第120秒时坐标为(7,8,9) ] } } { // ... "someInterpolatableProperty": { "epoch": "2012-04-30T12:00Z", "cartesian": [ 0.0, 1.0, 2.0, 3.0, 60.0, 4.0, 5.0, 6.0, 120.0, 7.0, 8.0, 9.0 ], "interpolationAlgorithm": "LAGRANGE", //插值算法为LAGRANGE，还有HERMITE,GEODESIC "interpolationDegree": 5 //1为线性插值，2为平方插值 }, }

定义了一个CZML后，就可以把它载入到场景中，就能获得该对象的动态效果。

示例代码

animation: true, // 动画小组件 shouldAnimate: true, }); viewer.dataSources.add( Cesium.CzmlDataSource.load("../../SampleData/Vehicle.czml") );

下面是加载cesium官网提供的Vehicle.czml数据示例的效果，一辆小车缓缓移动，可通过动画控制器对小车进行快进、暂停、倒放、回放等等操作。