Cesium GeoJSON详解

一、概述

Cesium是一个基于WebGL的JavaScript库，用于构建与时间和空间相关的地理信息应用程序。Cesium支持GeoJSON数据的加载和展示，使您能够轻松地将地理信息呈现在地球上。GeoJSON是一种开放的地理信息数据格式，它由简单的地理信息对象(JSON)组成，呈现了我们的世界各种形式和大小的地理特征。Cesium可以直接从URL加载GeoJSON数据或使用JavaScript加载GeoJSON数据。

二、加载GeoJSON数据

要加载GeoJSON数据，您必须创建一个EntityCollection对象。在Cesium中，entity可以是地形、地标、照相机、传感器、特效等等。然后，通过返回的promise实例将此对象中的GeoJSON数据加载到地图上。

var viewer = new Cesium.Viewer('cesiumContainer');
var dataSourcePromise = Cesium.GeoJsonDataSource.load('/sample.geojson');
dataSourcePromise.then(function(dataSource) {
    viewer.dataSources.add(dataSource);
    viewer.zoomTo(dataSource);
}).otherwise(function(error) {
    console.log(error);
});

三、可视化GeoJSON数据

在加载GeoJSON数据之后，您可以以多种方式可视化该数据。Cesium支持以下可视化技术：

1. 点

要在地球上显示点，您可以使用Cesium.PointGraphics对象，指定颜色、大小和形状。以下是一个例子：

var pointEntity = dataSource.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    point : {
        pixelSize : 10,
        color : Cesium.Color.RED,
        outlineColor : Cesium.Color.WHITE,
        outlineWidth : 2,
        heightReference : Cesium.HeightReference.CLAMP_TO_GROUND
    }
});

2. 线

要在地球上显示线，您可以使用Cesium.PolylineGraphics对象，指定线颜色，宽度和样式等。以下是一个例子：

var lineEntity = dataSource.entities.add({
    name : 'Line',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
                                                       -125, 35]),
        width : 10,
        material : Cesium.Color.ORANGE
    }
});

3. 面

要在地球上显示面，您可以使用Cesium.PolygonGraphics对象，指定面颜色，边框颜色，边框宽度等参数。以下是一个例子：

var polygonEntity = dataSource.entities.add({
    name : 'Polygon',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([
                        -72.0, 40.0,
                        -71.0, 40.0,
                        -71.0, 41.0,
                        -72.0, 41.0
                    ]),
        extrudedHeight: 500000.0,
        material : Cesium.Color.WHITE.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
});

四、GeoJSON符号化

符号化是将地理数据转换为可见图纸的过程。在GeoJSON中，符号化使用属性来定义模拟规则。以下是一个例子，它定义了弄脏和洁净属性（作为GeoJSON属性），并对它们进行簇集：

var options = {
  clustering: true,
  clusterRadius: 50,
  clusterLabels: true,
  style: new Cesium.Cesium3DTileStyle({
      color: {
          conditions: [
              ['${CLEAN} === 1', 'color("green")'],
              ['${DIRTY} === 1', 'color("red")'],
              [true, 'color("white")']
          ]
      }
  })
};
Cesium.GeoJsonDataSource.load('/inline.json', options).then(function(dataSource) {
    viewer.dataSources.add(dataSource);
});

五、总结

在本文中，我们对Cesium GeoJSON进行了详细介绍。首先，我们简述了Cesium和GeoJSON，然后介绍了如何加载和可视化GeoJSON数据。最后，我们讨论了符号化并提供了一些示例。在实际应用中，根据实际需求，您可以使用这些技术来更好地呈现地理数据。