SuperMap iClient3D for WebGL使用GeoJSON数据实现遮罩效果

作者：YoungBeen7.7 

一、前言

        本代码展示了如何在3D地理信息可视化平台中创建地理遮罩效果。通过加载GeoJSON格式的数据文件，计算并显示指定区域的遮罩（例如，东半球和西半球的遮罩），并使用精确的坐标来定义其边界。

二、思路

       具体实施步骤如下：

        1、加载GeoJSON数据：获取地理区域的轮廓数据，并将其转化为可在3D环境中显示的格式。

        2、坐标转换：将地理坐标（如经纬度）转换为三维坐标系中的位置。

        3、创建遮罩效果：根据坐标数据定义东半球和西半球的区域，应用透明或半透明材质生成遮罩效果。

        4、边界线的展示：为每个遮罩区域添加可视化的边界线，使其在地图上更加显眼。

三、数据处理

        获取对应区域的轮廓GeoJSON文件：GeoJSON是地理信息系统（GIS）中常用的文件格式，包含了地理区域的几何形状和属性数据。可以选择公开的地理数据集，或者根据需求自定义区域的GeoJSON文件。

四、前端加载代码

 function init(SuperMap3D, scene, viewer) {
    // 获取相机对象
    var camera = scene.camera;

    // 存储遮罩点坐标的数组
    const maskpointArray = []

    // 加载数据文件（假设是一个 GeoJSON 格式的数据）
    $.get('./data/省_广东_1.json', function (json) {
        const precision = 0.0001;  // 设置精度，用于在两部分半球之间生成重叠区域

        // 计算第一个半球的边界坐标（假设是西半球）
        const hemisphere1Coordinates = [
            -180, -89,   // 左下角
            0 - precision, -89,  // 右下角
            0 - precision, 89,   // 右上角
            -180, 89    // 左上角
        ];

        // 计算第二个半球的边界坐标（假设是东半球）
        const hemisphere2Coordinates = [
            0 + precision, -89,  // 左下角
            180, -89,    // 右下角
            180, 89,     // 右上角
            0 + precision, 89    // 左上角
        ];

        // 定义遮罩的颜色和透明度
        const maskMaterial = new SuperMap3D.Color(0.1, 0.2, 0.3, 0.8);

        // 创建第一个半球的遮罩实体（西半球部分）
        const hemisphere1Mask = viewer.entities.add({
            polygon: {
                // 使用从经纬度坐标转换的多边形来表示遮罩区域
                hierarchy: new SuperMap3D.PolygonHierarchy(
                    SuperMap3D.Cartesian3.fromDegreesArray(hemisphere1Coordinates)
                ),
                height: 500,
                material: maskMaterial  // 使用定义的遮罩材质
            }
        });

        // 从加载的GeoJSON数据中提取坐标
        for (let i = 0; i < json.features[0].geometry.coordinates[0][0].length; i++) {
            // 将坐标添加到 maskpointArray 数组中
            maskpointArray.push(json.features[0].geometry.coordinates[0][0][i][0]);
            maskpointArray.push(json.features[0].geometry.coordinates[0][0][i][1]);
        }

        // 将从经纬度转换的坐标生成Cartesian3对象
        var maskspoint = SuperMap3D.Cartesian3.fromDegreesArray(maskpointArray);

        // 定义全球坐标的边界
        const globalCoordinates = [
            -180, -89,  // 左下角
            1, -89,     // 右下角
            1, 89,      // 右上角
            -180, 89    // 左上角
        ];

        // 另一部分全球坐标的边界（东半球部分）
        const globalCoordinates1 = [
            180, 89,    // 左下角
            -1, 89,     // 右下角
            -1, -89,    // 右上角
            180, -89    // 左上角
        ];

        // 创建第二个半球的遮罩实体（东半球部分）
        const hemisphere2Mask = viewer.entities.add({
            polygon: {
                hierarchy: new SuperMap3D.PolygonHierarchy(
                    SuperMap3D.Cartesian3.fromDegreesArray(hemisphere2Coordinates),
                    [
                        {
                            positions: maskspoint // 在这里添加挖空区域的坐标
                        }
                    ]
                ),
                height: 500,
                material: maskMaterial  // 使用定义的遮罩材质
            }
        });

        // 为了避免遮罩材质显示错误，手动设置材质
        hemisphere2Mask.polygon.material = maskMaterial;

        // 创建边界线实体，用于显示遮罩区域的边界
        const line = new SuperMap3D.Entity({
            id: 2,
            polyline: {
                positions: maskspoint,  // 使用刚才定义的遮罩坐标
                width: 2,               // 设置边界线宽度
                material: SuperMap3D.Color.fromCssColorString('#6dcdeb')  // 设置边界线颜色
            }
        });

        // 将边界线实体添加到视图中
        viewer.entities.add(line);
    });
}

五、效果展示