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后綴去命名相關的類。


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]]
  ]}

在線工具推薦

示例代碼

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數據示例的效果,一輛小車緩緩移動,可通過動畫控制器對小車進行快進、暫停、倒放、回放等等操作。


?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內容