目錄

一、WebGL

二、Cesium

（1）Cesium：一個(gè)用于顯示三維地球和地圖的開源js庫。

（2）Cesium的基本功能：

（3）cesium的依賴性與技術(shù)標(biāo)準(zhǔn)

（4）Cesium與周邊產(chǎn)品的關(guān)系

（5）Cesium viewer界面部件介紹

三、GeoJSON數(shù)據(jù)

【GeoJSON數(shù)據(jù)】

【GeoJSON 對(duì)象?】

1 幾何圖形

2 Feature

3 特征集合

【可視化工具：geojson.io】

四、其他資料

【geojson資料】

【cesium資料】

一、WebGL

WebGL 以 OpenGL Embedded System (ES) 為基礎(chǔ)，這是用于訪問 3D 硬件的低級(jí)過程 API。OpenGL（由 SGI 在 20 世紀(jì) 90 年代初創(chuàng)建）現(xiàn)在被視為是一個(gè)易于理解且成熟的 API。WebGL 讓 JavaScript 開發(fā)人員有史以來第一次能夠以接近原生的速度訪問設(shè)備上的 3D 硬件。WebGL 和 OpenGL ES 都在非營(yíng)利組織 Khronos Group 的贊助下不斷發(fā)展。

通過瀏覽器支持庫和操作系統(tǒng)的 3D API 庫，WebGL API 幾乎可以直接訪問底層的 OpenGL 硬件驅(qū)動(dòng)程序，而無需首先轉(zhuǎn)換代碼。

繪制過程三步：
? ● 獲取頂點(diǎn)坐標(biāo)
? ● 圖元裝配（即畫出一個(gè)個(gè)三角形）
? ● 光柵化（生成片元，即一個(gè)個(gè)像素點(diǎn)）

?

二、Cesium

（1）Cesium：一個(gè)用于顯示三維地球和地圖的開源js庫。

• 是基于Html5 WebGL技術(shù)在瀏覽器中顯示三維物體，
• 采用的是WGS84坐標(biāo)系，
• 可以用來顯示海量三維模型數(shù)據(jù)、影像數(shù)據(jù)、地形高程數(shù)據(jù)、矢量數(shù)據(jù)等等。
  • 三維模型格式支持gltf、三維瓦片模型格式支持3d tiles。
  • 矢量數(shù)據(jù)支持geojson、topojson格式。
  • 影像數(shù)據(jù)支持wmts等。
  • 高程支持STK格式。

（2）Cesium的基本功能：

• 支持多種資源的圖像圖層，包括WMS，TMS，WMTS以及時(shí)序圖像。圖像支持透明度疊加、亮度、 對(duì)比度、GAMMA色調(diào)、飽和度都可以動(dòng)態(tài)調(diào)整。 支持圖像的卷簾對(duì)比。
• 支持3d地球、2d地圖、2.5d哥倫布模式。3d視圖可以使用透視和正視兩種投影方式。
• 使用3d tiles 格式流式加載各種不同的3d數(shù)據(jù)，包含 傾斜攝影模型、三維建筑物、CAD和BIM的外部和內(nèi) 部，點(diǎn)云數(shù)據(jù)并支持樣式配置和用戶交互操作
• 地形、模型、3d tiles模型的面裁剪
• 支持各種幾何體:點(diǎn)、線、面、標(biāo)注、公告牌、立方體、球體、球體、圓柱體、走廊(corridors)、管徑、墻體可視化效果包括:基于太陽位置的陰影、自身陰影、柔和陰影
• 大氣、霧、太陽、陽光、月亮、星星、水面。
• 粒子特效:煙、火、火花。
• 對(duì)象點(diǎn)選和地形點(diǎn)選。
• 支持鼠標(biāo)和觸摸操作的縮放、渲染、慣性平移、飛行、任意視角、地形碰撞檢測(cè)。
• 控制攝像頭和創(chuàng)造飛行路徑
• 使用動(dòng)畫控件控制動(dòng)畫時(shí)間。
• 支持點(diǎn)、標(biāo)注、公告牌的聚集效果全球高精度地形數(shù)據(jù)可視化，支持地形夸張效果、以及可編程實(shí)現(xiàn)的等高線和坡度分析效果支持標(biāo)準(zhǔn)的矢量格式KML、GeoJSON、TopoJSON，以及矢量的貼地效果。三維模型支持gltf2.0標(biāo)準(zhǔn)的PBR材質(zhì)、動(dòng)畫、蒙皮和 變形效果。
• 貼地以及高亮效果使用CZML支持動(dòng)態(tài)時(shí)序數(shù)據(jù)的展示。

（3）cesium的依賴性與技術(shù)標(biāo)準(zhǔn)

• Html5：HTML產(chǎn)生于1990年，1997年HTML4成為互聯(lián)網(wǎng)標(biāo)準(zhǔn)，HTML5在從前HTML4.01的基礎(chǔ)上進(jìn)行了一定的改進(jìn)的新一代標(biāo)準(zhǔn)，2008 年正式發(fā)布
• WebGL(Web Graphics Library) 是一種3D繪圖協(xié)議，這種繪圖技術(shù)標(biāo)準(zhǔn)允許把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過增加OpenGL ES 2.0的一個(gè)JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速染，這樣Web開發(fā)人員就可以借助系統(tǒng)顯卡來在瀏覽器里更流暢地展示3D場(chǎng)景和模型了，還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺化。
• HTTP協(xié)議
• ogc地圖服務(wù)標(biāo)準(zhǔn)
• 3D Tiles標(biāo)準(zhǔn)、gITF模型

（4）Cesium與周邊產(chǎn)品的關(guān)系

（5）Cesium viewer界面部件介紹

?

三、GeoJSON數(shù)據(jù)

【GeoJSON數(shù)據(jù)】

GeoJSON ，一個(gè)用于存儲(chǔ)地理信息的數(shù)據(jù)格式。GoeJSON對(duì)象可以表示幾何、特征或特征集合，支持：點(diǎn)、線、面、多點(diǎn)、多線、多面和幾何集合。在基于平面地圖，三維地圖中都需要用到的一種數(shù)據(jù)類型。

• ?是一種對(duì)各種地理數(shù)據(jù)結(jié)構(gòu)進(jìn)行編碼的格式，
• 基于Javascript對(duì)象表示法(JavaScript Object Notation, 簡(jiǎn)稱JSON)的地理空間信息數(shù)據(jù)交換格式。
• 支持幾何類型：點(diǎn)、線、面、多點(diǎn)、多線、多面和幾何集合。
• 它里的特征包含一個(gè)幾何對(duì)象和其他屬性，特征集合表示一系列特征。

由于這種格式在三維地圖中的優(yōu)秀屬性，使用它我們不僅可以輕松實(shí)現(xiàn)地圖類功能，更重要的是在3D效果展示上也具有不凡的表現(xiàn)。

【GeoJSON 對(duì)象?】

了解用于存儲(chǔ)空間數(shù)據(jù)的 GeoJSON 格式以及三種對(duì)象類型。

GeoJSON對(duì)象：表示幾何、特征或者特征集合。

GeoJSON 格式定義三個(gè)對(duì)象：

• 幾何圖形
• 特征
• 特征集合

1 幾何圖形

“幾何圖形”是空間中的一個(gè)區(qū)域。 幾何圖形可以是：

• 由經(jīng)度和緯度定義的單個(gè)點(diǎn)。
• 描述一行的多個(gè)點(diǎn)。
• 描述多邊形輪廓的多個(gè)點(diǎn)。
• 多個(gè)幾何圖形的集合。

幾何圖形 GeoJSON 對(duì)象有兩個(gè)屬性：

• type：指定幾何圖形的類型，如 Point 或 Polygon。
• coordinates：在一個(gè)兩項(xiàng)數(shù)組中包含經(jīng)度和緯度值的坐標(biāo)。 第一項(xiàng)為經(jīng)度，第二項(xiàng)為緯度。 點(diǎn)在一個(gè)數(shù)組中只有一個(gè)值。 線和多邊形在一個(gè)數(shù)組中具有多個(gè)值。 對(duì)于多邊形，必須閉合形狀，因此最后一個(gè)坐標(biāo)必須與第一個(gè)坐標(biāo)相同。

下面的幾何圖形對(duì)象示例包含美國(guó)華盛頓州雷蒙德的 Microsoft 總部的一個(gè)點(diǎn)：

{
    "type": "Point",
    "coordinates": [-122.136866, 47.642472]
}

下面是圍繞法國(guó)巴黎的正方形的多邊形示例：此正方形有五個(gè)坐標(biāo)，四個(gè)角，最后一個(gè)坐標(biāo)與閉合正方形的第一個(gè)坐標(biāo)相同。

{
    "type": "Polygon",
    "coordinates": [
        [
            [2.2580337524414062, 48.81251594581751],
            [2.4262619018554688, 48.81251594581751],
            [2.4262619018554688, 48.90377176147872],
            [2.2580337524414062, 48.90377176147872],
            [2.2580337524414062, 48.81251594581751]
        ]
    ]
}

2 Feature

Feature特征是一個(gè)空間中有邊界的實(shí)體。 因此，它是一個(gè)幾何圖形，有一組屬性，描述了該位置中的內(nèi)容。 這些屬性可以是數(shù)據(jù)，如地名或溫度。

Feature特征 GeoJSON 對(duì)象有三種屬性：

• type：指定對(duì)象的類型，并且對(duì)于特征來說始終為 Feature；
• geometry：是用于定義此特征的位置的 GeoJSON 幾何圖形對(duì)象；
• type：存儲(chǔ)要素類型（Point(點(diǎn)),LineString,Polygon,MultiPoint(多點(diǎn)),MultiLineString(多線)和MultiPolygon(多面)）；
  • Point：需要有一個(gè)位置；
  • MultiPoint：其coordinates成員是 Point 坐標(biāo)數(shù)組的數(shù)組；
  • LineString：需要提供兩個(gè)位置，即線段的起點(diǎn)和終點(diǎn)；
  • MultiLineString：其coordinates成員是 LineString 坐標(biāo)數(shù)組的數(shù)組；
  • Polygon：多邊形，具有四個(gè)或更多位置的封閉 LineString；
  • MultiPolygon：其coordinates成員是 Polygon 坐標(biāo)數(shù)組的數(shù)組；
  • GeometryCollection：幾何類型的異構(gòu)組合；
  • FeatureCollection：是 Feature 對(duì)象的組合；
  • coordinates：坐標(biāo)（存儲(chǔ)圖形坐標(biāo)）；
• properties：任何有效的 GeoJSON 對(duì)象，它定義特征的屬性。

下面是法國(guó)巴黎的一個(gè)示例特征：

{
    "type": "Feature",
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [2.2580337524414062, 48.81251594581751],
                [2.4262619018554688, 48.81251594581751],
                [2.4262619018554688, 48.90377176147872],
                [2.2580337524414062, 48.90377176147872],
                [2.2580337524414062, 48.81251594581751]
            ]
        ]
    },
    "properties": {
        "city_name": "Paris",
        "population": 2148271
    }
}

3 特征集合

顧名思義，“特征集合”就是特征的集合。

特征集合 GeoJSON 對(duì)象有兩個(gè)屬性：

• type：指定對(duì)象的類型，并且對(duì)于特征幾何來說始終為 FeatureCollection。
• features：GeoJSON 特征對(duì)象的數(shù)組。

下面是兩個(gè)歐洲城市的特征集合的示例：

{
    "type": "FeatureCollection",
    "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [2.2580337524414062, 48.81251594581751],
                        [2.4262619018554688, 48.81251594581751],
                        [2.4262619018554688, 48.90377176147872],
                        [2.2580337524414062, 48.90377176147872],
                        [2.2580337524414062, 48.81251594581751]
                    ]
                ]
            },
            "properties": {
                "city_name": "Paris",
                "population": 2148271
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-0.5287170410156249, 51.26019611626714],
                        [0.26641845703125, 51.26019611626714],
                        [0.26641845703125, 51.70916142932303],
                        [-0.5287170410156249, 51.70916142932303],
                        [-0.5287170410156249, 51.26019611626714]
                    ]
                ]
            },
            "properties": {
                "city_name": "London",
                "population": 8908081
            }
        }
    ]
}

【可視化工具：geojson.io】

官網(wǎng)地址

geojson.io | powered by Mapbox

四、其他資料

【geojson資料】

geojson說明文檔GeoJSON格式規(guī)范說明 - OSCHINA - 中文開源技術(shù)交流社區(qū)

講解視頻GeoJSON數(shù)據(jù)格式解析_嗶哩嗶哩_bilibili

可視化工具geojson.io | powered by Mapbox

?【cesium資料】

cesium中文教程Cesium 新手入門 - Cesium中文網(wǎng) 所有文章 | cesium中文網(wǎng)

查看界面部件參數(shù)官方網(wǎng)站 geojson.io | powered by Mapbox

Cesium資料大全Cesium資料大全 - 知乎

?文章來源地址http://www.zghlxwxcb.cn/news/detail-520227.html

到了這里，關(guān)于WebGL，Cesium以及GeoJSON數(shù)據(jù)的簡(jiǎn)單介紹的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！