【WebGIS】Cesium：GeoJSON加载

GeoJSON 是一种常用的地理空间数据格式，它用于表示简单的地理要素及其属性，而且被广泛应用于 Web 地图和 GIS 系统中。在 Cesium 中，GeoJSON 文件可以很方便地加载到三维场景中展示，而且可以添加样式和变乱处理。本文将为你提供详细的渐进式学习教程，资助你逐步掌握如安在 Cesium 中加载和利用 GeoJSON 数据。
初识 GeoJSON

GeoJSON 是一种基于 JSON（JavaScript Object Notation）的格式，用于表示地理要素，它支持点、线、面（Polygon）、多点、多线和多面等多少对象。GeoJSON 的数据布局包括以下根本部门：

• Feature：一个地理要素。
  
• FeatureCollection：多个 Feature 的集合。
  
• 多少类型：Point（点）、LineString（线）、Polygon（面）等。
  

GeoJSON 示例

一个简单的 GeoJSON 文件大概像这样：

1. {
2.   "type": "FeatureCollection",
3.   "features": [
4.     {
5.       "type": "Feature",
6.       "geometry": {
7.         "type": "Point",
8.         "coordinates": [102.0, 0.5]
9.       },
10.       "properties": {
11.         "name": "Sample Point"
12.       }
13.     }
14.   ]
15. }

复制代码

Cesium 中加载 GeoJSON

在 Cesium 中，加载 GeoJSON 非常简单。Cesium 提供了 GeoJsonDataSource 类，用于解析和加载 GeoJSON 数据。通过该类，你可以轻松地将 GeoJSON 文件加载到场景中。
底子用法

以下是加载一个简单 GeoJSON 文件的代码示例：

1. const viewer = new Cesium.Viewer('cesiumContainer');
3. // 加载 GeoJSON 文件
4. Cesium.GeoJsonDataSource.load('path/to/your/geojson-file.geojson')
5.     .then(function(dataSource) {
6.         viewer.dataSources.add(dataSource);
7.         viewer.flyTo(dataSource);  // 自动飞到数据范围
8.     })
9.     .catch(function(error) {
10.         console.error(error);
11.     });

复制代码

这段代码演示了如何利用 GeoJsonDataSource.load() 方法加载一个 GeoJSON 文件并将其添加到 Cesium 场景中。如果加载乐成，Cesium 将会自动将视角飞到加载的 GeoJSON 数据的范围。
本地加载与远程加载

除了加载本地的 GeoJSON 文件外，GeoJsonDataSource 也支持从远程服务器加载 GeoJSON 文件。例如：

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

复制代码

GeoJSON 的样式自定义

加载 GeoJSON 后，Cesium 允许你自定义要素的样式，比如点的颜色、线条的宽度和多边形的填充颜色等。样式通过 GeoJsonDataSource.clampToGround、GeoJsonDataSource.stroke 等属性来设置。

1. Cesium.GeoJsonDataSource.load('path/to/your/geojson-file.geojson', {
2.     stroke: Cesium.Color.RED,       // 线条颜色
3.     fill: Cesium.Color.YELLOW.withAlpha(0.6),  // 多边形填充颜色
4.     strokeWidth: 3,                 // 线条宽度
5.     markerSymbol: '?',              // 标记符号
6.     markerSize: 12,                 // 标记大小
7.     markerColor: Cesium.Color.BLUE  // 标记颜色
8. }).then(function(dataSource) {
9.     viewer.dataSources.add(dataSource);
10. });

复制代码

在这个例子中，GeoJSON 中的点、线和多边形的样式都被自定义了。你可以根据需求进一步调整这些样式以满足项目的需求。
GeoJSON 数据的动态更新

Cesium 还允许你动态更新或添加 GeoJSON 数据。你可以通过更新 GeoJsonDataSource 来实现这一点。例如，你可以实时地从服务器获取最新的 GeoJSON 数据并更新体现。

1. const dataSource = new Cesium.GeoJsonDataSource();
2. viewer.dataSources.add(dataSource);
4. // 定期更新 GeoJSON 数据
5. setInterval(function() {
6.     dataSource.load('https://example.com/updated/geojson-file.geojson');
7. }, 10000);  // 每 10 秒刷新一次数据

复制代码

在这个例子中，我们通过定时器每 10 秒从服务器加载新的 GeoJSON 数据，更新 Cesium 场景中的体现。
GeoJSON 的变乱处理

Cesium 支持对 GeoJSON 中加载的每个要素（如点、线、面）添加鼠标点击、悬停等交互变乱处理器。这可以极大地增强用户与地图的互动体验。
添加点击变乱

以下示例展示了如何为 GeoJSON 数据中的要素添加鼠标点击变乱：

1. Cesium.GeoJsonDataSource.load('path/to/your/geojson-file.geojson')
2.     .then(function(dataSource) {
3.         viewer.dataSources.add(dataSource);
4.         const entities = dataSource.entities.values;
6.         for (let i = 0; i < entities.length; i++) {
7.             const entity = entities[i];
8.             
9.             entity.description = `Name: ${entity.properties.name.getValue()}`;
10.             
11.             // 添加点击事件
12.             viewer.screenSpaceEventHandler.setInputAction(function(click) {
13.                 const pickedObject = viewer.scene.pick(click.position);
14.                 if (Cesium.defined(pickedObject) && pickedObject.id === entity) {
15.                     alert('Clicked on ' + entity.name);
16.                 }
17.             }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
18.         }
19.     });

复制代码

该代码为每个 GeoJSON 要素添加了点击变乱。当用户点击某个要素时，弹出一个对话框体现该要素的名称。
贴附到地形

在 Cesium 场景中，GeoJSON 的多少体默认是悬浮在空中的。如果必要将这些多少体贴附到地形上（例如体现在真实的地形外貌上），可以利用 clampToGround 选项。

1. Cesium.GeoJsonDataSource.load('path/to/your/geojson-file.geojson', {
2.     clampToGround: true // 将几何体贴附到地形上
3. }).then(function(dataSource) {
4.     viewer.dataSources.add(dataSource);
5. });

复制代码

这段代码将加载的 GeoJSON 数据贴地体现，使得其更加符合地形的实际形状，尤其是当你利用了真实的 Cesium 天下地形时，这样的体现效果更加天然。
GeoJSON 数据的性能优化

在处理大型 GeoJSON 文件时，大概会碰到性能问题。为了进步性能，Cesium 提供了多种方法进行优化，例如：

• 利用 simplify 参数来淘汰多少体的复杂度。
  
• 利用服务器端对 GeoJSON 进行预处理，淘汰数据量。
  

1. Cesium.GeoJsonDataSource.load('path/to/large-geojson-file.geojson', {
2.     clampToGround: true,
3.     simplify: true // 简化几何体
4. }).then(function(dataSource) {
5.     viewer.dataSources.add(dataSource);
6. });

复制代码

通过属性加载样式

在 Cesium 中，可以通过 GeoJSON 数据中的属性字段来自定义多少体的高度、颜色等属性。这些属性通常存储在 GeoJSON 的 properties 中，而 Cesium 提供了灵活的 API，可以根据这些属性字段动态设置多少体的外观和行为。
以下是详细的步骤，逐步讲解如何利用 GeoJSON 属性字段来自定义多少体的高度和颜色等属性。
准备 GeoJSON 文件

起首，确保你的 GeoJSON 文件包罗有你想用来设置多少体属性的字段。例如，下面是一个包罗高度（height）和颜色（color）的 GeoJSON 示例：

1. {
2.     "type": "FeatureCollection",
3.     "features": [
4.         {
5.             "type": "Feature",
6.             "geometry": {
7.                 "type": "Polygon",
8.                 "coordinates": [
9.                     [
10.                         [
11.                             102.0,
12.                             0.0
13.                         ],
14.                         [
15.                             103.0,
16.                             0.0
17.                         ],
18.                         [
19.                             103.0,
20.                             1.0
21.                         ],
22.                         [
23.                             102.0,
24.                             1.0
25.                         ],
26.                         [
27.                             102.0,
28.                             0.0
29.                         ]
30.                     ]
31.                 ]
32.             },
33.             "properties": {
34.                 "height": 3000,
35.                 "color": "#ff0000"
36.             }
37.         },
38.         {
39.             "type": "Feature",
40.             "geometry": {
41.                 "type": "Point",
42.                 "coordinates": [
43.                     101.5,
44.                     0.5
45.                 ]
46.             },
47.             "properties": {
48.                 "height": 10000,
49.                 "color": "#00ff00"
50.             }
51.         }
52.     ]
53. }

复制代码

这个 GeoJSON 文件包罗两个要素：一个多边形和一个点，它们都有各自的高度和颜色属性。
加载 GeoJSON 数据

利用 Cesium 的 GeoJsonDataSource 来加载这个 GeoJSON 文件，并通过 entities API 来访问并修改每个多少体的外观和高度。下面是加载的根本代码：

1. const viewer = new Cesium.Viewer('cesiumContainer');
3. Cesium.GeoJsonDataSource.load('path/to/your/geojson-file.geojson')
4.     .then(function(dataSource) {
5.         viewer.dataSources.add(dataSource);
7.         const entities = dataSource.entities.values;
9.         // 遍历所有实体，基于 GeoJSON 中的属性字段来设置高度和颜色
10.         for (let i = 0; i < entities.length; i++) {
11.             const entity = entities[i];
13.             // 访问每个实体的 properties
14.             const height = entity.properties.height.getValue();
15.             const color = Cesium.Color.fromCssColorString(entity.properties.color.getValue());
17.             // 设置多边形或点的高度和颜色
18.             if (entity.polygon) {
19.                 entity.polygon.extrudedHeight = height;  // 设置多边形的高度
20.                 entity.polygon.material = color;         // 设置多边形的颜色
21.             } else if (entity.point) {
22.                 entity.point.pixelSize = 10;             // 设置点的大小
23.                 entity.point.color = color;              // 设置点的颜色
24.                 entity.position = Cesium.Cartesian3.fromDegrees(
25.                     entity.position.getValue(Cesium.JulianDate.now()).longitude,
26.                     entity.position.getValue(Cesium.JulianDate.now()).latitude,
27.                     height                                  // 设置点的高度
28.                 );
29.             }
30.         }
31.     })
32.     .catch(function(error) {
33.         console.error(error);
34.     });

复制代码

• 访问 properties 字段：entity.properties 包罗了 GeoJSON 中的自定义属性字段。通过 entity.properties.fieldName.getValue() 可以获取相应的值。
  
• 设置高度：对于 polygon，可以通过 entity.polygon.extrudedHeight 来设置其拉伸高度。对于 point，可以通过 entity.position 设置其在三维空间中的位置，高度值包罗在第三个参数中。
  
• 设置颜色：可以通过 Cesium.Color.fromCssColorString() 方法，将 GeoJSON 属性中的颜色字符串转换为 Cesium 中的颜色对象，并应用到 polygon.material 或 point.color 中。
  

通过属性加载多边形

Cesium Viewer 初始化

1. const viewer = new Cesium.Viewer('cesiumContainer', {
2.     timeline: false,
3.     animation: false,
4.     infoBox: false,
5.     imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
6.         url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=" + MAP_KEY,
7.         layer: "vec",
8.         style: "default",
9.         tileMatrixSetID: "w",
10.         format: "tiles",
11.         maximumLevel: 18
12.     })
13. });

复制代码

• 创建一个 Cesium.Viewer 实例，并设置根本设置选项，例如关闭时间轴和动画控件，同时利用天地图作为底图。
  

加载 GeoJSON 文件

1. Cesium.GeoJsonDataSource.load('path/to/your/geojson-file.geojson', {
2.     clampToGround: true
3. }).then(function(dataSource) {
4.     // 处理加载成功的逻辑
5. });

复制代码

• 利用 Cesium.GeoJsonDataSource.load 方法加载 GeoJSON 文件，并利用 clampToGround: true 选项确保多少贴合地面。
  

遍历和渲染实体

1. const entities = dataSource.entities.values;
2. for (let i = 0; i < entities.length; i++) {
3.     const entity = entities[i];
4.     if (entity.polygon) {
5.         const properties = entity.properties;
6.         const height = properties.height ? properties.height.getValue() : 0;
7.         const colorValue = properties.color ? properties.color.getValue() : '#ffffff';
8.         entity.polygon.extrudedHeight = height;
9.         entity.polygon.material = Cesium.Color.fromCssColorString(colorValue);
10.         entity.polygon.outline = false;
11.     }
12. }

复制代码

• 遍历 dataSource.entities.values，该数组包罗所有加载的实体。
  
• 通过 properties 对象获取每个多边形的 height 和 color 属性，并分别用于设置 extrudedHeight（拉伸高度）和 material（颜色）。
  
• 利用 Cesium.Color.fromCssColorString 将颜色字符串转换为 Cesium 的颜色对象。
  

调整视角

1. viewer.zoomTo(dataSource);

复制代码

• 利用 viewer.zoomTo 方法自动调整视角，使加载的所有实体都在视野范围内。
  

结语

通过本文，你已经相识了如安在 Cesium 中加载、展示和交互 GeoJSON 数据。Cesium 提供了强盛的 API 来自定义样式、处理变乱、动态更新数据，而且可以高效地加载大型数据集。在实际项目中，你可以结合 Cesium 的其他功能，如 3D Tiles、地形和影像图层，构建出复杂的三维可视化应用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。