基礎(chǔ)篇的前兩節(jié)我們學(xué)習(xí)了在三維球中通過Cesium如何加載影像數(shù)據(jù)和地形數(shù)據(jù)，今天我們學(xué)習(xí)一下Cesium是如何加載矢量數(shù)據(jù)的。在學(xué)習(xí)之前，首先我們先了解一下什么是矢量數(shù)據(jù)。
矢量數(shù)據(jù)（Vector Data）是用X、Y、Z坐標(biāo)表示地圖圖形或地理實(shí)體位置的數(shù)據(jù)，一般是通過記錄坐標(biāo)的方式來盡可能將地理實(shí)體的空間位置表現(xiàn)的準(zhǔn)確無誤，常見的矢量數(shù)據(jù)有：點(diǎn)、線、面等格式。我們使用矢量數(shù)據(jù)的原因，就是因?yàn)槭噶繑?shù)據(jù)具有數(shù)據(jù)結(jié)構(gòu)緊湊、冗余度低、有利于網(wǎng)絡(luò)和檢索分析、圖形顯示質(zhì)量好、精度高等優(yōu)點(diǎn)。
目前最常見的矢量數(shù)據(jù)格式就是shapfile（簡(jiǎn)稱shp），它是由Esri公司開發(fā)的一種空間數(shù)據(jù)開放格式。同時(shí)shapfile也成為了GIS行業(yè)的標(biāo)準(zhǔn)，幾乎所有的商業(yè)和開源GIS軟件都支持Shapefile。通常情況下，一個(gè)"shapefile"通常指帶有.shp、.shx、.dbf和其他擴(kuò)展名且前綴名稱一致的文件（.prj、.sbn等）集合。
一個(gè)shapfile必須包含的文件：
- 主文件（*.shp）：存儲(chǔ)地理要素的幾何信息
- 索引文件（*.shx）：存儲(chǔ)要素幾何圖形的索引信息
- dBase表文件（*.dbf）：存儲(chǔ)地理要素的屬性信息（非幾何信息）
除此之外還有可選的文件：
- 空間參考文件（.prj）：存儲(chǔ)空間參考信息，即地理坐標(biāo)系統(tǒng)信息和投影坐標(biāo)系統(tǒng)信息，使用well-known文本格式（WKT）進(jìn)行描述。
- 幾何體的空間索引文件（.sbn 和 .sbx）、只讀的Shapefiles的幾何體的空間索引文件（.fbn 和.fbx）等等
shapfile如此強(qiáng)大和受歡迎，只可惜Cesium卻不能直接加載shp文件，如果想加載shp文件，感興趣的可以參考這位大牛封裝的庫CesiumVectorTile。Cesium直接支持的矢量數(shù)據(jù)格式包括：geojson、topojson、kml以及具有時(shí)間特性的czml，并以DataSouce后綴去命名相關(guān)的類。
Cesium加載geojson文件
GeoJSON介紹
GeoJSON是用于描述地理空間信息的數(shù)據(jù)格式，它不是一種新的格式，其語法規(guī)范是符合JSON格式的，只不過對(duì)其名稱進(jìn)行了規(guī)范，專門用于表示地理信息。
GeoJSON的最外層是一個(gè)單獨(dú)的對(duì)象（object）。這個(gè)對(duì)象可表示：
① 幾何體（Geometry）；
② 特征（Feature）；
③ 特征集合（FeatureCollection）；
最外層的 GeoJSON 里可能包含有很多子對(duì)象，每一個(gè) GeoJSON 對(duì)象都有一個(gè) type 屬性，表示對(duì)象的類型，其type 的值可以是：Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon、GeometryCollection、Feature、FeatureCollection。下面是一個(gè)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 按拓?fù)鋵W(xué)編碼后的擴(kuò)展形式，是由 D3 的作者 Mike Bostock 制定的。相比 GeoJSON 直接使用Polygon、Point之類的幾何體來表示圖形的方法，TopoJSON中的每一個(gè)幾何體都是通過將共享邊（被稱為arcs）整合后組成的。對(duì)比簡(jiǎn)易圖如下：
TopoJSON使用坐標(biāo)（點(diǎn)）、?。ň€、多邊形）來表示地理圖形，它由transform、objects和arcs三部分組成。transform描述了變換參數(shù)；objects描述地理實(shí)體包含空間及屬性信息；arcs描述了有向弧的空間關(guān)系，弧由一系列起點(diǎn)及相對(duì)于起點(diǎn)的有向偏移坐標(biāo)表示?；谶@種弧的存儲(chǔ)方式可以表達(dá)出拓?fù)潢P(guān)系，由于弧只記錄一次及地理坐標(biāo)使用整數(shù)，不使用浮點(diǎn)數(shù)，相對(duì)于GeoJSON，TopoJSON 消除了冗余，文件大小縮小了 80%。
概念總是那么的抽象，為了表達(dá)得更形象些，下面列出了相關(guān)示例。
{
"type":"Topology",
"transform":{
"scale": [1,1], //縮放比例
"translate": [0,0] //相對(duì)于原點(diǎn)([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數(shù)據(jù)轉(zhuǎn) GeoJSON 和 TopoJSON：http://mapshaper.org/
- GeoJson和TopopJson在線轉(zhuǎn)換：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語法格式的文件，用來描述和存儲(chǔ)地理信息數(shù)據(jù)（點(diǎn)、線、面、多邊形、多面體以及模型等），通常應(yīng)用于 Google 地球相關(guān)軟件中（Google Earth，Google Map 等），它跟XML文件最大的不同就是KML描述的是地理信息數(shù)據(jù)，同時(shí)KML已正式被OGC采用，成為OGC眾多規(guī)范中的一個(gè)。KML文件有兩個(gè)文件擴(kuò)展名：.KML 和.KMZ（一個(gè)或幾個(gè) KML 文件的壓縮集，采用 zip 格式壓縮）。Cesium從1.7版開始就支持KML，目前對(duì)KML的支持還不完整，但是支持大量的標(biāo)準(zhǔn)以及Google的gx擴(kuò)展名稱空間。有關(guān)支持哪些內(nèi)容和不支持哪些內(nèi)容的詳細(xì)列表，請(qǐng)參見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中很重要的一個(gè)概念，也是一個(gè)亮點(diǎn)，它使得cesium很酷很炫地展示動(dòng)態(tài)數(shù)據(jù)成為可能。CZML是一種JSON格式的字符串，用于描述與時(shí)間有關(guān)的動(dòng)畫場(chǎng)景，CZML包含點(diǎn)、線、地標(biāo)、模型和其他的一些圖形元素，并指明了這些元素如何隨時(shí)間而變化。Cesium擁有一套富客戶端API，通過CZML采用數(shù)據(jù)驅(qū)動(dòng)的方式，不用寫代碼我就可以使用通用的Cesium viewer構(gòu)建出豐富的場(chǎng)景。某種程度上說,，Cesium和CZML的關(guān)系就像Google Earth和KML的關(guān)系，兩者都是用于描述其各自客戶端中的場(chǎng)景的數(shù)據(jù)格式，并且旨在由各種各樣的應(yīng)用程序生成，甚至可能是手工編寫的 。
下面是一個(gè)典型的CZML數(shù)據(jù)結(jié)構(gòu)：
[
// packet one
{
"id": "GroundControlStation"
"position": { "cartographicDegrees": [-75.5, 40.0, 0.0] },
"point": {
"color": { "rgba": [0, 0, 255, 255] },
}
},
// packet two
{
"id": "PredatorUAV",
// ...
}
]
如上CZML片段描述了兩個(gè)數(shù)據(jù)包，每個(gè)數(shù)據(jù)包都有一個(gè)id標(biāo)識(shí)它描述的對(duì)象的屬性。id不一定要求是GUID，但它們確實(shí)需要唯一地標(biāo)識(shí)CZML源中的單個(gè)對(duì)象。如果id未指定，Cesium將自動(dòng)生成一個(gè)唯一的。但是，這會(huì)阻止以后的數(shù)據(jù)包引用該對(duì)象，例如向該對(duì)象添加更多數(shù)據(jù)。除id屬性之外，還包含更多的屬性用于定義要繪制對(duì)象的屬性。在上面的示例中，我們?cè)赪GS 84(-75.5,40.0,0.0)位置中指定了一個(gè)id為“ GroundControlStation”對(duì)象，并在其位置繪制了一個(gè)藍(lán)色的點(diǎn)。詳細(xì)的數(shù)據(jù)結(jié)構(gòu)和更多的屬性可參考CZML數(shù)據(jù)結(jié)構(gòu)、數(shù)據(jù)包這兩個(gè)地址。
CZML比較特殊的是跟時(shí)間序列相關(guān)的屬性。
{
// ...
"someInterpolatableProperty": {
"cartesian": [
"2012-04-30T12:00Z", 1.0, 2.0, 3.0, //表示當(dāng)時(shí)間為2012-04-30T12:00Z，坐標(biāo)為(1,2,3)
"2012-04-30T12:01Z", 4.0, 5.0, 6.0, //表示當(dāng)時(shí)間為2012-04-30T12:01Z，坐標(biāo)為(4,5,6)
"2012-04-30T12:02Z", 7.0, 8.0, 9.0 //表示當(dāng)時(shí)間為2012-04-30T12:02Z，坐標(biāo)為(7,8,9)
]
}
}
{
// ...
"someInterpolatableProperty": {
"epoch": "2012-04-30T12:00Z", //表示時(shí)間起點(diǎn)為2012-04-30T12:00：00
"cartesian": [
0.0, 1.0, 2.0, 3.0, //從起點(diǎn)開始，第0秒時(shí)坐標(biāo)為(1,2,3)
60.0, 4.0, 5.0, 6.0, //從起點(diǎn)開始，第60秒時(shí)坐標(biāo)為(4,5,6)
120.0, 7.0, 8.0, 9.0 //從起點(diǎn)開始，第120秒時(shí)坐標(biāo)為(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為平方插值
},
}
定義了一個(gè)CZML后，就可以把它載入到場(chǎng)景中，就能獲得該對(duì)象的動(dòng)態(tài)效果。
示例代碼
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: true, // 動(dòng)畫小組件
shouldAnimate: true,
});
viewer.dataSources.add(
Cesium.CzmlDataSource.load("../../SampleData/Vehicle.czml")
);
下面是加載cesium官網(wǎng)提供的Vehicle.czml數(shù)據(jù)示例的效果，一輛小車緩緩移動(dòng)，可通過動(dòng)畫控制器對(duì)小車進(jìn)行快進(jìn)、暫停、倒放、回放等等操作。
