如何在Cesium上載入GeoJSON數據？

一、選擇合適的數據源

在載入GeoJSON數據之前，需要先確定數據源。GeoJSON是一種基於JavaScript對象表示法（JSON）的地理空間數據格式，因此，數據源可以是從其他平台或網站上下載的GeoJSON文件，也可以是通過API請求獲取的GeoJSON數據。在本文中，我們將展示如何通過API請求獲取GeoJSON數據。

二、定義Cesium Viewer

在使用Cesium載入GeoJSON數據之前，需要先定義Cesium Viewer對象。Viewer對象是Cesium應用程序的主要組件，它負責所有的交互操作和呈現。以下是定義Viewer對象的示例代碼：

var viewer = new Cesium.Viewer('cesiumContainer');

其中，’cesiumContainer’是容器元素的ID，即Cesium將在其內部呈現地球。通過這行代碼，我們成功地創建了Cesium Viewer對象。

三、載入GeoJSON數據

在Cesium中，載入GeoJSON數據需要使用Cesium.GeoJsonDataSource類。以下是如何載入GeoJSON數據並添加到場景中的示例代碼：

var geojsonOptions = {
   clampToGround: true // 將數據貼到地球表面
};

var dataSource = new Cesium.GeoJsonDataSource();
viewer.dataSources.add(dataSource);

var promise = dataSource.load('path/to/your/geojson/file', geojsonOptions);
promise.then(function() {
   // 成功載入數據後的操作
}).otherwise(function(error) {
   // 載入數據時發生錯誤時的操作
});

在上述代碼中，首先創建了一個GeoJsonDataSource對象，然後通過viewer.dataSources.add(dataSource)方法將其添加到Cesium Viewer中。接著，通過調用dataSource.load()方法來載入GeoJSON數據，其中，第一個參數表示GeoJSON文件的路徑或URL地址，第二個參數表示配置項，這裡可以設置一些載入數據時的選項，比如將數據貼到地球表面。最後，在Promise中處理成功和失敗的回調函數。

四、添加圖形元素

一旦成功載入GeoJSON數據，就可以通過dataSource.entities.add()方法將圖形元素添加到場景中。對於GeoJSON數據，每個特徵對象將被轉換為一個實體對象，並通過對應的屬性來渲染。以下是如何添加點、線和面圖形的示例代碼：

// 添加點
var point = dataSource.entities.add({
   position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
   point: {
       color: Cesium.Color.RED,
       pixelSize: 10
   }
});

// 添加線
var line = dataSource.entities.add({
   polyline: {
       positions: Cesium.Cartesian3.fromDegreesArray([lon1, lat1, lon2, lat2]),
       width: 2,
       material: Cesium.Color.RED
   }
});

// 添加面
var polygon = dataSource.entities.add({
   polygon: {
       hierarchy: Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0, -115.0, 32.0, -107.0, 33.0, -102.0, 31.0, -102.0, 35.0]),
       material: Cesium.Color.RED.withAlpha(0.5)
   }
});

在這些示例中，我們分別添加了一個點、一條線和一個面，並設置它們的位置、屬性和樣式。需要注意的是，Cesium中的位置是使用Cartesian3對象表示的，因此需要使用Cesium.Cartesian3.fromDegrees()或Cesium.Cartesian3.fromDegreesArray()方法將經緯度轉換為Cartesian3坐標。

五、完整的示例代碼

以下是一個完整的示例代碼，展示了如何在Cesium中載入GeoJSON數據、添加圖形元素並將它們呈現在地球上：

// 定義Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');

// 定義GeoJSON配置項
var geojsonOptions = {
   clampToGround: true
};

// 創建GeoJsonDataSource對象
var dataSource = new Cesium.GeoJsonDataSource();
viewer.dataSources.add(dataSource);

// 載入GeoJSON數據
var promise = dataSource.load('path/to/your/geojson/file', geojsonOptions);
promise.then(function() {
   // 添加點
   var point = dataSource.entities.add({
       position: Cesium.Cartesian3.fromDegrees(115.828, 28.712),
       point: {
           color: Cesium.Color.RED,
           pixelSize: 10
       }
   });

   // 添加線
   var line = dataSource.entities.add({
       polyline: {
           positions: Cesium.Cartesian3.fromDegreesArray([115.828, 28.712, 116.828, 28.712]),
           width: 2,
           material: Cesium.Color.RED
       }
   });

   // 添加面
   var polygon = dataSource.entities.add({
       polygon: {
           hierarchy: Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0, -115.0, 32.0, -107.0, 33.0, -102.0, 31.0, -102.0, 35.0]),
           material: Cesium.Color.RED.withAlpha(0.5)
       }
   });
}).otherwise(function(error) {
   // 載入數據發生錯誤時的操作
});