SuperMap iDesktopXiClient3D for WebGL 基于确定性空间插值生成水体流场

摘要
1 原始数据解析
2 数据空间插值
- 2.1流场UVW0.dat文件转xlsx
- 2.2生成流场点数据
- 2.3生成U、V栅格数据
- 2.4裁剪U、V栅格数据
- 2.5生成零值棋盘网格
- 2.6生成U、V棋盘栅格
3 棋盘栅格转棋盘点
- 3.1U、V棋盘栅格矢量化
- 3.2U、V字段追加
- 3.3流场数据JSON标准解析
- - 3.3.1流场数据JSON范例
  - 3.3.2参数说明
  - 3.3.3参数信息来源
4 WebGL前端三维呈现

作者：xun

摘要

空间插值常用于将离散点的测量数据转换为连续的数据曲面，以便探究空间现象的分布模式，按照数学原理来分，分成确定性插值和地统计插值（也可以叫非确定性）。
确定性插值是以研究区域内的相似性，或者以平滑度为基础，由已知样点来创建连续的栅格表面的插值方法。其中距离加权倒数（IDW）插值是较为常见的确定性插值方法，基于样点相近相似的原理，假设每个采样点都具有一定的局部影响能力，两个样点距离越近，则它们的性质越相似，反之，距离越远则相似性越小。它通过计算与到附近区域样点的加权平均值来估算出单元格的值。
每个流场点流速由坐标位置和U、V两个法线向量构成，非均匀分布流场点可按距离加权倒数（IDW）插值的方式分别对U和V进行插值，构建流场U栅格和V栅格，通过栅格矢量化提取每一个栅格格子的中心点，得到类似棋盘网格均匀分布的流场U值和V值点数据。最后，将均匀分布的流程点数据转为json格式可用于WebGL前端三维呈现。
在这里插入图片描述

1 原始数据解析

流场数据分两批次提供，第一批次为“日日算”Excel数据，第二批次为标准的*.data的流场数据。本文档阐述如何对*.data格式的流场数据处理为棋盘网格均匀分布的点数据。
在这里插入图片描述

原始数据由“体数据”、“原数据”、“坐标转换数据”三个文件夹构成，每个文件夹分别有一份UVW0.dat文件。
“原数据”、“坐标转换数据”文件夹里的UVW0.dat文件可以用记事本等工具打开。选择“原数据”里的UVW0.dat文件作为源数据。
在这里插入图片描述

单个UVW0.dat文件由两部分组成：
第一部分：流场点数据：Variables= “X” “Y” “ZB” “Z” “H” “U” “V” “C”
一行记录对应一个流场的点id，主要关注 “X” “Y” “U” “V” “C”；
一共有“N”条点数据，“Zone N= 47290 E= 91824”
第二部分：Tin数据：“F=FEPOINT ET=TRIANGLE ”，一行记录对应一个tin数据，每一列对应构成tin的三个顶点id；一共有“E”条Tin数据，“Zone N= 47290 E= 91824”。

2 数据空间插值

2.1流场UVW0.dat文件转xlsx

在wps新建xlsx文件，“数据-获取数据-导入数据-直接打开数据文件”选择“原数据”里的UVW0.dat文件，选择分隔符号，完成数据转换。
在这里插入图片描述

在这里插入图片描述

由于流场数据只用到Variables= “X” “Y” “ZB” “Z” “H” “U” “V” "C"的数据，剔除第二行“Zone N= 47290 E= 91824 F=FEPOINT ET=TRIANGLE”。及第二部分：Tin数据记录。
在这里插入图片描述

最终的xlsx成果如下：
在这里插入图片描述

2.2生成流场点数据

在超图桌面端SuperMap iDesktopX中新建数据源，选择导入xlsx成果数据，选择“首行为字段信息”，“导入空间数据”，一键生成流场点数据。

在这里插入图片描述

2.3生成U、V栅格数据

在超图桌面端SuperMap iDesktopX中对选择“空间分析-插值分析-距离反比权重” 分别对流场点数据的U、V值进行插值，分别构建出U和V的流场栅格。
在这里插入图片描述

2.4裁剪U、V栅格数据

在超图桌面端SuperMap iDesktopX中导入流场的“范围面shp”数据，得到范围面数据集。
在这里插入图片描述

将2.3得到的U、V栅格数据、范围面数据添加到地图窗口。选择“地图-地图裁剪-选中对象区域裁剪”，裁剪后得到范围面的U、V栅格。

在这里插入图片描述

2.5生成零值棋盘网格

超图桌面端SuperMap iDesktopX任意选择U或者V栅格数据集，通过复制数据集的方式，得到一份“棋盘网格”栅格数据。
在这里插入图片描述

选择“棋盘网格”栅格数据，“数据-数据处理-代数运算”
在这里插入图片描述

2.6生成U、V棋盘栅格

超图桌面端SuperMap iDesktopX中“数据-数据处理-栅格镶嵌”，将2.4裁剪生成的U、V栅格数据，分别与2.5生成的零值棋盘网格数据进行镶嵌，分别得到U值棋盘栅格和V值棋盘栅格。

在这里插入图片描述

3 棋盘栅格转棋盘点

3.1U、V棋盘栅格矢量化

超图桌面端SuperMap iDesktopX中“空间分析-矢栅转换-栅格矢量化”，将2.6生成的U、V棋盘网格进行栅格矢量化，得到U值棋盘点和V值棋盘点。

在这里插入图片描述

3.2U、V字段追加

超图桌面端SuperMap iDesktopX中，通过“数据-数据处理-追加列”功能，将V值棋盘点数据的V字段和值，追加到U值棋盘点中。

在这里插入图片描述

3.3流场数据JSON标准解析

3.3.1流场数据JSON范例

{“nx”:815,“ny”:704,“max”:1.6841634341693739,“extent”:[114.1492542,30.38561341,114.5745801,30.70384409],“data”:[[0,0],[0,0]…]}
在这里插入图片描述

3.3.2参数说明

名称	含义
“nx”	棋盘列
“ny”	棋盘行
“max”	最大流速值
“extent”	四至信息，排序[W,S,E,N]
“data”	棋盘格点[u,v]数组

3.3.3参数信息来源

1.获取2.5生成零值棋盘网格的栅格信息，记录列和行信息，作为nx和ny的值。
在这里插入图片描述

2.获取2.3生成的U、V栅格数据的Umax、Umin和Vmax、Vmin信息，可计算得到流速的最大值
在这里插入图片描述

3.将3.2得到的点数据进行投影转化为4490大地坐标，记录数据集的四至信息（E、S、W、N），作为"extent"[W,S,E,N]的来源。

在这里插入图片描述

4 WebGL前端三维呈现

所需产品包：supermap-iclient3d-for-webgl_webgpu-11.2.0 及以上版本。下载地址：supermap-iclient3d-for-webgl_webgpu-11.2.0下载链接
对应接口：FieldLayer3D场数据图层类
对应的参数介绍可查看该篇博客： FieldLayer3D场数据图层类接口介绍，可通过ParticleVelocityFieldEffect可修改场数据图层粒子效果渲染效果。
流场数据需要通过fieldLayer.particleVelocityFieldEffect._setDataBounds设置数据的范围，该范围就是流场json中extent的四至范围。
示例代码如下：

            let dataBounds = SuperMap3D.Rectangle.fromDegrees(118.60696, 31.933451, 118.780261, 32.150184); // dem50p
            let center = SuperMap3D.Rectangle.center(dataBounds);
             fieldLayer.particleVelocityFieldEffect._setDataBounds(dataBounds);

流场示例代码如下：产品包路径/examples/webglparticleWaterFlow.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>水场</title>
    <link href="../../Build/SuperMap3D/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/font-awesome.min.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <link href="./css/style.css" rel="stylesheet">
    <link href="./style/particleWaterFlow.css" rel="stylesheet">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script src="./js/slider.js"></script>
    <script src="./js/config.js"></script>
    <script src="./js/tooltip.js"></script>
    <script src="./js/spectrum.js"></script>
    <script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script>
</head>

<body>
    <div id="Container"></div>

    <div id='loadingbar' class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>

    <div class="legend-toolbar">
        <p style="font-size: 1.3em;">水流速度</p>
        <div id="color-legend">
            <div class="color-legend-label"> 2 </div>
            <br />
            <div class="color-legend-label"> 1.5 </div>
            <br />
            <div class="color-legend-label"> 1 </div>
            <br />
            <div class="color-legend-label" style="margin-top:0.5em;"> 0.5 </div>
            <br />
            <div class="color-legend-label" style="margin-top:0.5em;"> 0</div>
        </div>
    </div>

    <script>
        function onload(SuperMap3D) {
            let EngineType = getEngineType();
            const viewer = new SuperMap3D.Viewer('Container', {
                contextOptions: {
                    infobox: false,
                    skyAtmosphere: true,
                    contextType: Number(EngineType)  // Webgl2:2 ; WebGPU:3
                }
            });

            viewer.scenePromise.then(function (scene) {
                init(SuperMap3D, scene, viewer);
            });
        }

        function init(SuperMap3D, scene, viewer) {
            viewer.scene.skyBox.show = false;
            viewer.scene.sun.show = false;
            scene.globe.depthTestAgainstTerrain = false;
            scene.skyBox.show = false;
            scene.fog.enabled = false;

            viewer.imageryLayers.addImageryProvider(new SuperMap3D.BingMapsImageryProvider({
                key: URL_CONFIG.BING_MAP_KEY,//当场景出现黑球时可至官网（https://www.bingmapsportal.com/）申请key
                url: URL_CONFIG.BINGMAP
            }));

            //全球影像图层调节
            const imageryLayer = viewer.imageryLayers._layers[1];
            imageryLayer.brightness = 1.2
            imageryLayer.saturation = 0.6
            imageryLayer.contrast = 1.0

            let floor = 0.1;
            let ceil = 1.6841634341693739;
            let dx = (ceil - floor) / 5;
            const colorTable = new SuperMap3D.ColorTable();
            colorTable.insert(floor, new SuperMap3D.Color(255 / 255, 35 / 255, 35 / 255, 1.0));
            colorTable.insert(floor + dx, new SuperMap3D.Color(223 / 255, 202 / 255, 67 / 255, 1.0));
            colorTable.insert(floor + dx * 2, new SuperMap3D.Color(116 / 255, 205 / 255, 180 / 255, 1.0));
            colorTable.insert(floor + dx * 3, new SuperMap3D.Color(107 / 255, 159 / 255, 204 / 255, 1.0));
            colorTable.insert(floor + dx * 4, new SuperMap3D.Color(107 / 255, 143 / 255, 204 / 255, 1.0));

            const fieldLayer = new SuperMap3D.FieldLayer3D(scene.context); //场数据图层
            fieldLayer.particleVelocityFieldEffect.colorTable = colorTable;
            fieldLayer.particleVelocityFieldEffect.velocityScale = 0.1; //初始化效果
            fieldLayer.particleVelocityFieldEffect.particleSize = 4;
            fieldLayer.particleVelocityFieldEffect.paricleCountPerDegree = 500;

            let dataBounds = SuperMap3D.Rectangle.fromDegrees(118.60696, 31.933451, 118.780261, 32.150184); // dem50p
            let center = SuperMap3D.Rectangle.center(dataBounds);
            fieldLayer.particleVelocityFieldEffect._setDataBounds(dataBounds);

            scene.camera.setView({
                destination: SuperMap3D.Cartesian3.fromRadians(center.longitude, center.latitude, 10000),
                orientation: {
                    heading: 6.28316380083,
                    pitch: -1.5707876933496
                }
            });

            scene.primitives.add(fieldLayer); //添加场图层

            let particleWindField = [];
            let particleWindInverseField = [];
            //加载风场数据
            $.ajax({
                url: './data/grid-wind1.json',
                success: function (data) {
                    let p = 0;
                    for (let j = 0; j < data.ny; j++) {
                        particleWindField[j] = [];
                        particleWindInverseField[j] = [];
                        for (let i = 0; i < data.nx; i++, p++) {
                            particleWindField[j][i] = data.data[p];
                            particleWindInverseField[j][i] = [-data.data[p][0], -data.data[p][1]];
                        }
                    }
                    $('#loadingbar').remove();
                    setTimeout(function () {
                        fieldLayer.fieldData = particleWindField;
                    }, 3000)
                }
            });

        }
        if (typeof SuperMap3D !== 'undefined') {
            window.startupCalled = true;
            onload(SuperMap3D);
        }
    </script>
</body>

</html>