推广

Cesium开发基础篇 | 03加载矢量数据

iseeyu2年前 (2024-02-22)推广172

Cesium加载geojson文件

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/

示例代码

var viewer = new Cesium.Viewer("cesiumContainer");                   
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,
    }
  )
);

Cesium加载kml文件

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问题＃873。

示例代码

var viewer = new Cesium.Viewer("cesiumContainer");                   
Cesium.KmlDataSource.load(
  "../../SampleData/kml/facilities/facilities.kml",
  {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas,
  }
)

Cesium加载czml文件

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数据结构、数据包这两个地址。

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后，就可以把它载入到场景中，就能获得该对象的动态效果。

示例代码

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

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