GeoJSON 是一種常用的地理空間數(shù)據(jù)格式，它用于表示簡(jiǎn)單的地理要素及其屬性，并且被廣泛應(yīng)用于 Web 地圖和 GIS 系統(tǒng)中。在 Cesium 中，GeoJSON 文件可以很方便地加載到三維場(chǎng)景中展示，并且可以添加樣式和事件處理。本文將為你提供詳細(xì)的漸進(jìn)式學(xué)習(xí)教程，幫助你逐步掌握如何在 Cesium 中加載和使用 GeoJSON 數(shù)據(jù)。

初識(shí) GeoJSON

GeoJSON 是一種基于 JSON（JavaScript Object Notation）的格式，用于表示地理要素，它支持點(diǎn)、線、面（Polygon）、多點(diǎn)、多線和多面等幾何對(duì)象。GeoJSON 的數(shù)據(jù)結(jié)構(gòu)包括以下基本部分：

• Feature：一個(gè)地理要素。
• FeatureCollection：多個(gè) Feature 的集合。
• 幾何類型：Point（點(diǎn)）、LineString（線）、Polygon（面）等。

GeoJSON 示例

一個(gè)簡(jiǎn)單的 GeoJSON 文件可能像這樣：

{"type": "FeatureCollection","features": [{"type": "Feature","geometry": {"type": "Point","coordinates": [102.0, 0.5]},"properties": {"name": "Sample Point"}}]
}

Cesium 中加載 GeoJSON

在 Cesium 中，加載 GeoJSON 非常簡(jiǎn)單。Cesium 提供了 GeoJsonDataSource 類，用于解析和加載 GeoJSON 數(shù)據(jù)。通過(guò)該類，你可以輕松地將 GeoJSON 文件加載到場(chǎng)景中。

基礎(chǔ)用法

以下是加載一個(gè)簡(jiǎn)單 GeoJSON 文件的代碼示例：

const viewer = new Cesium.Viewer('cesiumContainer');// 加載 GeoJSON 文件
Cesium.GeoJsonDataSource.load('path/to/your/geojson-file.geojson').then(function(dataSource) {viewer.dataSources.add(dataSource);viewer.flyTo(dataSource);  // 自動(dòng)飛到數(shù)據(jù)范圍}).catch(function(error) {console.error(error);});

這段代碼演示了如何使用 GeoJsonDataSource.load() 方法加載一個(gè) GeoJSON 文件并將其添加到 Cesium 場(chǎng)景中。如果加載成功，Cesium 將會(huì)自動(dòng)將視角飛到加載的 GeoJSON 數(shù)據(jù)的范圍。

本地加載與遠(yuǎn)程加載

除了加載本地的 GeoJSON 文件外，GeoJsonDataSource 也支持從遠(yuǎn)程服務(wù)器加載 GeoJSON 文件。例如：

Cesium.GeoJsonDataSource.load('https://example.com/your/geojson.geojson').then(function(dataSource) {viewer.dataSources.add(dataSource);});

GeoJSON 的樣式自定義

加載 GeoJSON 后，Cesium 允許你自定義要素的樣式，比如點(diǎn)的顏色、線條的寬度和多邊形的填充顏色等。樣式通過(guò) GeoJsonDataSource.clampToGround、GeoJsonDataSource.stroke 等屬性來(lái)設(shè)置。

Cesium.GeoJsonDataSource.load('path/to/your/geojson-file.geojson', {stroke: Cesium.Color.RED,       // 線條顏色fill: Cesium.Color.YELLOW.withAlpha(0.6),  // 多邊形填充顏色strokeWidth: 3,                 // 線條寬度markerSymbol: '?',              // 標(biāo)記符號(hào)markerSize: 12,                 // 標(biāo)記大小markerColor: Cesium.Color.BLUE  // 標(biāo)記顏色
}).then(function(dataSource) {viewer.dataSources.add(dataSource);
});

在這個(gè)例子中，GeoJSON 中的點(diǎn)、線和多邊形的樣式都被自定義了。你可以根據(jù)需求進(jìn)一步調(diào)整這些樣式以滿足項(xiàng)目的需求。

GeoJSON 數(shù)據(jù)的動(dòng)態(tài)更新

Cesium 還允許你動(dòng)態(tài)更新或添加 GeoJSON 數(shù)據(jù)。你可以通過(guò)更新 GeoJsonDataSource 來(lái)實(shí)現(xiàn)這一點(diǎn)。例如，你可以實(shí)時(shí)地從服務(wù)器獲取最新的 GeoJSON 數(shù)據(jù)并更新顯示。

const dataSource = new Cesium.GeoJsonDataSource();
viewer.dataSources.add(dataSource);// 定期更新 GeoJSON 數(shù)據(jù)
setInterval(function() {dataSource.load('https://example.com/updated/geojson-file.geojson');
}, 10000);  // 每 10 秒刷新一次數(shù)據(jù)

在這個(gè)例子中，我們通過(guò)定時(shí)器每 10 秒從服務(wù)器加載新的 GeoJSON 數(shù)據(jù)，更新 Cesium 場(chǎng)景中的顯示。

GeoJSON 的事件處理

Cesium 支持對(duì) GeoJSON 中加載的每個(gè)要素（如點(diǎn)、線、面）添加鼠標(biāo)點(diǎn)擊、懸停等交互事件處理器。這可以極大地增強(qiáng)用戶與地圖的互動(dòng)體驗(yàn)。

添加點(diǎn)擊事件

以下示例展示了如何為 GeoJSON 數(shù)據(jù)中的要素添加鼠標(biāo)點(diǎn)擊事件：

Cesium.GeoJsonDataSource.load('path/to/your/geojson-file.geojson').then(function(dataSource) {viewer.dataSources.add(dataSource);const entities = dataSource.entities.values;for (let i = 0; i < entities.length; i++) {const entity = entities[i];entity.description = `Name: ${entity.properties.name.getValue()}`;// 添加點(diǎn)擊事件viewer.screenSpaceEventHandler.setInputAction(function(click) {const pickedObject = viewer.scene.pick(click.position);if (Cesium.defined(pickedObject) && pickedObject.id === entity) {alert('Clicked on ' + entity.name);}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);}});

該代碼為每個(gè) GeoJSON 要素添加了點(diǎn)擊事件。當(dāng)用戶點(diǎn)擊某個(gè)要素時(shí)，彈出一個(gè)對(duì)話框顯示該要素的名稱。

貼附到地形

在 Cesium 場(chǎng)景中，GeoJSON 的幾何體默認(rèn)是懸浮在空中的。如果需要將這些幾何體貼附到地形上（例如顯示在真實(shí)的地形表面上），可以使用 clampToGround 選項(xiàng)。

Cesium.GeoJsonDataSource.load('path/to/your/geojson-file.geojson', {clampToGround: true // 將幾何體貼附到地形上
}).then(function(dataSource) {viewer.dataSources.add(dataSource);
});

這段代碼將加載的 GeoJSON 數(shù)據(jù)貼地顯示，使得其更加符合地形的實(shí)際形狀，尤其是當(dāng)你使用了真實(shí)的 Cesium 世界地形時(shí)，這樣的顯示效果更加自然。

GeoJSON 數(shù)據(jù)的性能優(yōu)化

在處理大型 GeoJSON 文件時(shí)，可能會(huì)遇到性能問(wèn)題。為了提高性能，Cesium 提供了多種方法進(jìn)行優(yōu)化，例如：

• 使用 simplify 參數(shù)來(lái)減少幾何體的復(fù)雜度。
• 使用服務(wù)器端對(duì) GeoJSON 進(jìn)行預(yù)處理，減少數(shù)據(jù)量。

Cesium.GeoJsonDataSource.load('path/to/large-geojson-file.geojson', {clampToGround: true,simplify: true // 簡(jiǎn)化幾何體
}).then(function(dataSource) {viewer.dataSources.add(dataSource);
});

通過(guò)屬性加載樣式

在 Cesium 中，可以通過(guò) GeoJSON 數(shù)據(jù)中的屬性字段來(lái)自定義幾何體的高度、顏色等屬性。這些屬性通常存儲(chǔ)在 GeoJSON 的 properties 中，而 Cesium 提供了靈活的 API，可以根據(jù)這些屬性字段動(dòng)態(tài)設(shè)置幾何體的外觀和行為。

以下是詳細(xì)的步驟，逐步講解如何使用 GeoJSON 屬性字段來(lái)自定義幾何體的高度和顏色等屬性。

準(zhǔn)備 GeoJSON 文件

首先，確保你的 GeoJSON 文件包含有你想用來(lái)設(shè)置幾何體屬性的字段。例如，下面是一個(gè)包含高度（height）和顏色（color）的 GeoJSON 示例：

{"type": "FeatureCollection","features": [{"type": "Feature","geometry": {"type": "Polygon","coordinates": [[[102.0,0.0],[103.0,0.0],[103.0,1.0],[102.0,1.0],[102.0,0.0]]]},"properties": {"height": 3000,"color": "#ff0000"}},{"type": "Feature","geometry": {"type": "Point","coordinates": [101.5,0.5]},"properties": {"height": 10000,"color": "#00ff00"}}]
}

這個(gè) GeoJSON 文件包含兩個(gè)要素：一個(gè)多邊形和一個(gè)點(diǎn)，它們都有各自的高度和顏色屬性。

加載 GeoJSON 數(shù)據(jù)

使用 Cesium 的 GeoJsonDataSource 來(lái)加載這個(gè) GeoJSON 文件，并通過(guò) entities API 來(lái)訪問(wèn)并修改每個(gè)幾何體的外觀和高度。下面是加載的基本代碼：

const viewer = new Cesium.Viewer('cesiumContainer');Cesium.GeoJsonDataSource.load('path/to/your/geojson-file.geojson').then(function(dataSource) {viewer.dataSources.add(dataSource);const entities = dataSource.entities.values;// 遍歷所有實(shí)體，基于 GeoJSON 中的屬性字段來(lái)設(shè)置高度和顏色for (let i = 0; i < entities.length; i++) {const entity = entities[i];// 訪問(wèn)每個(gè)實(shí)體的 propertiesconst height = entity.properties.height.getValue();const color = Cesium.Color.fromCssColorString(entity.properties.color.getValue());// 設(shè)置多邊形或點(diǎn)的高度和顏色if (entity.polygon) {entity.polygon.extrudedHeight = height;  // 設(shè)置多邊形的高度entity.polygon.material = color;         // 設(shè)置多邊形的顏色} else if (entity.point) {entity.point.pixelSize = 10;             // 設(shè)置點(diǎn)的大小entity.point.color = color;              // 設(shè)置點(diǎn)的顏色entity.position = Cesium.Cartesian3.fromDegrees(entity.position.getValue(Cesium.JulianDate.now()).longitude,entity.position.getValue(Cesium.JulianDate.now()).latitude,height                                  // 設(shè)置點(diǎn)的高度);}}}).catch(function(error) {console.error(error);});

• 訪問(wèn) properties 字段：entity.properties 包含了 GeoJSON 中的自定義屬性字段。通過(guò) entity.properties.fieldName.getValue() 可以獲取相應(yīng)的值。
• 設(shè)置高度：對(duì)于 polygon，可以通過(guò) entity.polygon.extrudedHeight 來(lái)設(shè)置其拉伸高度。對(duì)于 point，可以通過(guò) entity.position 設(shè)置其在三維空間中的位置，高度值包含在第三個(gè)參數(shù)中。
• 設(shè)置顏色：可以通過(guò) Cesium.Color.fromCssColorString() 方法，將 GeoJSON 屬性中的顏色字符串轉(zhuǎn)換為 Cesium 中的顏色對(duì)象，并應(yīng)用到 polygon.material 或 point.color 中。

通過(guò)屬性加載多邊形

Cesium Viewer 初始化

const viewer = new Cesium.Viewer('cesiumContainer', {timeline: false,animation: false,infoBox: false,imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=" + MAP_KEY,layer: "vec",style: "default",tileMatrixSetID: "w",format: "tiles",maximumLevel: 18})
});

• 創(chuàng)建一個(gè) Cesium.Viewer 實(shí)例，并設(shè)置基本配置選項(xiàng)，例如關(guān)閉時(shí)間軸和動(dòng)畫控件，同時(shí)使用天地圖作為底圖。

加載 GeoJSON 文件

Cesium.GeoJsonDataSource.load('path/to/your/geojson-file.geojson', {clampToGround: true
}).then(function(dataSource) {// 處理加載成功的邏輯
});

• 使用 Cesium.GeoJsonDataSource.load 方法加載 GeoJSON 文件，并使用 clampToGround: true 選項(xiàng)確保幾何貼合地面。

遍歷和渲染實(shí)體

const entities = dataSource.entities.values;
for (let i = 0; i < entities.length; i++) {const entity = entities[i];if (entity.polygon) {const properties = entity.properties;const height = properties.height ? properties.height.getValue() : 0;const colorValue = properties.color ? properties.color.getValue() : '#ffffff';entity.polygon.extrudedHeight = height;entity.polygon.material = Cesium.Color.fromCssColorString(colorValue);entity.polygon.outline = false;}
}

• 遍歷 dataSource.entities.values，該數(shù)組包含所有加載的實(shí)體。
• 通過(guò) properties 對(duì)象獲取每個(gè)多邊形的 height 和 color 屬性，并分別用于設(shè)置 extrudedHeight（拉伸高度）和 material（顏色）。
• 使用 Cesium.Color.fromCssColorString 將顏色字符串轉(zhuǎn)換為 Cesium 的顏色對(duì)象。

調(diào)整視角

viewer.zoomTo(dataSource);

• 使用 viewer.zoomTo 方法自動(dòng)調(diào)整視角，使加載的所有實(shí)體都在視野范圍內(nèi)。

結(jié)語(yǔ)

通過(guò)本文，你已經(jīng)了解了如何在 Cesium 中加載、展示和交互 GeoJSON 數(shù)據(jù)。Cesium 提供了強(qiáng)大的 API 來(lái)自定義樣式、處理事件、動(dòng)態(tài)更新數(shù)據(jù)，并且可以高效地加載大型數(shù)據(jù)集。在實(shí)際項(xiàng)目中，你可以結(jié)合 Cesium 的其他功能，如 3D Tiles、地形和影像圖層，構(gòu)建出復(fù)雜的三維可視化應(yīng)用。