cesium源码解析篇:GeoJsonDataSource(Polygon)

本篇主要内容为

1. 介绍使用GeoJsonDataSource加载GeoJSON数据之后的代码调用和业务逻辑
2. 从中提炼对polygon进行解析和创建entity的函数以供参考
   • 读取GeoJSON
   • 获取 feature
   • 判断是 Polygon or MultiPolygon
   • 带 hole
   • 创建entity对象

代码调用栈

• Cesium.GeoJsonDataSource.load(data, options)
  • new GeoJsonDataSource().load(data, options) // 创建GeoJsonDataSource对象 并加载数据
    • fun preload(that, data, options, clear) // 调用外部函数进行预加载
      • promise = data.fetchJson() // 使用Cesium.Resource.fetchJson函数读取数据 返回一个promise
      • fun load // 调用外部函数load进行数据加载
        • fun tryHander // 根据输入的数据类型获取对应的处理函数
          • fun processFeatureCollection
            • fun processFeature
              • fun processMultiPolygon
              • fun processPolygon
              • fun processMultiLineString
              • fun processLineString
              • fun processmultiPoint
              • fun processPoint
              • fun processTopology

解析Polygon&创建Entity

1. 读取geojson文件 并返回promise

const jsonPromise = new Cesium.Resource.fetchJson({
    url: "../../SampleData/data.geojson"
})

2. 解析数据中的polygon 并返回entities对象

// 根据经度、纬度、高度计算得到空间笛卡尔坐标
function crsFunction(coordinates) {
    return new Cesium.Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2]);
};

// 将经度、纬度、高度数组转换为空间笛卡尔坐标数组
function coordinatesArrayToCartesianArray(coordinates, crsFunction) {
    const positions = new Array(coordinates.length);
    for (let i = 0; i < coordinates.length; i++) {
        positions[i] = crsFunction(coordinates[i]);
    }
    return positions;
}

// 根据多边形创建对应的entity         
function createPolygonEntity(polygon){

    const holes = [];
    // 如果为带洞多边形
    for (let i = 1, len = polygon.length; i < len; i++) {
      holes.push(
        new Cesium.PolygonHierarchy(
          coordinatesArrayToCartesianArray(
            polygon[i], crsFunction
            )
        )
      );
    }

    // 返回可用于创建entity的object对象
    return {
        polygon: {
            hierarchy:new Cesium.PolygonHierarchy(
                coordinatesArrayToCartesianArray(polygon[0], crsFunction),
                holes
            ),
            height: 0,
            material: Cesium.Color.RED.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.BLACK,
        },
        id: Cesium.createGuid()
    }
}

// 解析GeoJSON数据并返回用于创建entity的object
function getEntitiesFromGeoJSON(data){
    const entities = []
    data.features.forEach(feature => {
        // 获取每个feature的坐标信息和多边形类型
        const polygons = feature.geometry.coordinates;
        const polygonType = feature.geometry.type;

        // 对多边形和多多边形进行分别处理
        if (polygonType == "Polygon"){
            const entity = createPolygonEntity(polygons);
            entities.push(entity);
        } else if (polygonType == "MultiPolygon"){
            for (let i = 0; i < polygons.length; i++) {
                const entity = createPolygonEntity(polygons[i]);
                entities.push(entity);
            }
        }
    })
    return entities;
}

jsonPromise.then(function(data){
    const entities = getEntitiesFromGeoJSON(data);
})

3. 添加所有entity对象

entities.forEach(function(entity){
    viewer.entities.add(entity)
})