风场是环境影响评价的专业术语， 通常可以用来反应天气系统及其强弱，逆时针旋转的风场反映低压， 顺时针则反映高压，风速则反映强弱。本文主要提供SuperMap iClient3D for Cesium产品风场（http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#windParticle）示例代码参数讲解。
目录
1.SuperMap iClient3D for WebGL
2.SuperMap iClient3D for Cesium
一、风场数据介绍
1.数据转换
常见风场数据为nc，需要转化为前端可加载得格式，例如json格式。GitHub上有开源工具可以进行转换，本文使用的开源工具为：GitHub - cambecc/grib2json: converts GRIB2 files to JSON
下载好的数据可以通过基于java开发的工具：grib2json进行转换成下面展示的json数据格式.
2.json风场数据格式介绍
风场可视化在SuperMap产品和在原生cesium可视化原理基本相同。通过FieldLayer3D场数据图层进行加载。 如果需要场数据指定范围可以通过layerBounds 参数去设置。
原始的标准数据是nc数据，里面参数很多， 但是咱们不能直接用需要转成json才行。 示例数据json只是其中的一小部分参数，实际业务场景所含参数通常比示例数据要多。示例数据中包含参数nx\ny\max以及data。nx横向划分栅格数量,示例数据为360；ny纵向划分栅格数量，示例数据为181；data记录了nx*ny=360*181=65160个风力数值。
风场数据json数据格式中,nx,ny代表横向纵向划分为多少网格,data是风速数据，表示风速大小，风场数据一般含有两个{header:{},data:[]}这样的结构，第一个里面的data是当前格子的横向风速，第二个指的是纵向风速（有可能反过来不过不影响）。类似这种参数讲解网上也有很多，此处不多赘述。
【header参数】
介绍：
- parameterCategory ： 配置了数据记录内容，风力数据默认为2
- parameterCategoryName ： 风向数据默认：Momentum
- parameterNumber： 记录了数据方向：U向为2，V向为3
- parameterNumberName： U-component_of_wind/V-component_of_wind
- numberPoints： 数据点数量
- nx ： 横向划分栅格数量
- ny ： 纵向划分栅格数量
- dx ： 横向步长
- dy ： 纵向步长
- lo1 ： 横向起点，全球默认为0
- la1 ： 纵向起点，全球默认为-90
- lo2 ： 横向终点，全球默认359.5，根据步长有所不同
- la2 ： 纵向终点，全球默认-90
*示例风向数据将地球以0.5（dx\dy）为步长分为横向360(nx)、纵向181(ny)个栅格。然后记录了每个栅格中南北方向（U）、东西方向（V）两个方向上的风力值。
二、前端代码详解
1.SuperMap iClient3D for WebGL
风场示例代码如下：http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#windParticle
<body>
<div id="Container"></div>
<div id="toolbar" class="tool-bar param-container">
<div class="param-item">
<button type="button" id="startField" class="button black">启动风场</button>
</div>
</div>
<script>
function onload(SuperMap3D) {
var viewer = new SuperMap3D.Viewer('Container', {
infobox: false,
skyAtmosphere: false
});
viewer.resolutionScale = window.devicePixelRatio;
viewer.imageryLayers.addImageryProvider(new SuperMap3D.SingleTileImageryProvider({
url: './images/BlackMarble_2020.jpg'
}));//添加暗色底图
var scene = viewer.scene;
var colorTable = new SuperMap3D.ColorTable();//创建颜色表
colorTable.insert(2, new SuperMap3D.Color(254 / 255, 224 / 255, 139 / 255, 0.95));//颜色表插入新项
colorTable.insert(2, new SuperMap3D.Color(171 / 255, 221 / 255, 164 / 255, 0.95));
colorTable.insert(2, new SuperMap3D.Color(104 / 255, 196 / 255, 160 / 255, 0.95));
colorTable.insert(4, new SuperMap3D.Color(44 / 255, 185 / 255, 156 / 255, 0.95));
colorTable.insert(4, new SuperMap3D.Color(25 / 255, 169 / 255, 178 / 255, 0.95));
colorTable.insert(7, new SuperMap3D.Color(50 / 255, 136 / 255, 189 / 255, 0.95));
colorTable.insert(10, new SuperMap3D.Color(31 / 255, 110 / 255, 183 / 255, 0.95));
colorTable.insert(15, new SuperMap3D.Color(5 / 255, 98 / 255, 184 / 255, 0.95));
var fieldLayer = new SuperMap3D.FieldLayer3D(scene.context); //创建场数据图层
fieldLayer.particleVelocityFieldEffect.velocityScale = 0.4 * 100.0; //初始化效果，获取图层的粒子效果渲染器，设置粒子的速度缩放倍数
fieldLayer.particleVelocityFieldEffect.particleSize = 1.2;//设置粒子的大小。 fieldLayer.particleVelocityFieldEffect.paricleCountPerDegree = 1.0;//设置每经纬度内产生的粒子数，用来控制粒子数量。
//fieldLayer.particleVelocityFieldEffect._fade0pacity=0.996;
scene.primitives.add(fieldLayer); //添加场图层
var particleWindField = [];
var particleWindInverseField = [];
var dataChanged = false;
fieldLayer.particleVelocityFieldEffect.colorTable = colorTable;//设置颜色表,可以根据风速强度指定粒子渲染的颜色。
//加载风场数据
$.ajax({
url: './data/winds.json',
success: function(data) {
var p = 0;
for(var j = 0; j < data.ny; j++) {
particleWindField[j] = [];
particleWindInverseField[j] = [];
for(var i = 0; i < data.nx; i++, p++) {
particleWindField[j][i] = data.data[p]; particleWindInverseField[j][i] = [-data.data[p][0], -data.data[p][1]];
}
}
$('#toolbar').show();
$('#loadingbar').remove();
document.getElementById("startField").onclick = function() {
fieldLayer.fieldData = particleWindField;
};
}
});
}
if(typeof SuperMap3D !== 'undefined') {
window.startupCalled = true;
onload(SuperMap3D);
}
</script>
</body>
2.SuperMap iClient3D for Cesium
示例代码如下链接，其接口含义与SuperMap iClient3D for WebGL一致，此处不多赘述，可自行类比。http://support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/editor.html#windParticle
三、风场美化效果
前端美化依靠接口， 其美化效果多样，可按实际项目所需自行选择风格样式进行美化，本文择取部分接口展示代码美化效果对比。
1.参数介绍
FieldLayer3D场数据图层类，通过该图层加载场数据。支持哪些参数设置：
| fieldData | 获取或者设置图层的场数据。 |
| layerBounds | 获取或者设置图层数据的X、Y方向范围。 |
| NetCDFData | 获取或者设置NetCDF场数据图层。NetCDF场图层对象具有longitude、latitude、uwnd、vwnd、timeOrder【可选】五个参数。longitude：NetCDF场数据的经度维度。longitude：NetCDF场数据的经度维度。 uwnd：NetCDF场数据的U分量（纬向风）风速，单位：米/秒。vwnd：NetCDF场数据的V分量（经向风）风速，单位：米/秒。timeOrder：NetCDF场数据对应的时间索引。 |
| NetCDFInfo | 获取或者设置NetCDF场数据的头文件信息，包括维度、变量及对应的属性信息。 |
| particleVelocityFieldEffect | 获取图层的粒子效果渲染器。 |
| type | 获取该图层类型标识。 |
| visible | 获取或者设置图层的可见性。 |
| zBounds | 获取或者设置图层数据的Z方向范围。 |
ParticleVelocityFieldEffect场数据图层粒子效果渲染器类，支持哪些参数设置：
| 【接口】 | 【介绍】 |
| colorTable | 设置颜色表,可以根据风速强度指定粒子渲染的颜色。 |
| fieldTextureSize | 获取或设置粒子纹理的大小。sizeFixed值为true时，fieldTextureSize代表粒子纹理的像素长度；sizeFixed值为false时，fieldTextureSize代表粒子纹理的实际大小，单位：米。 |
| filter | 获取或设置是否启用粒子过滤功能，默认值为false。 |
| MaxFilterValue | 获取或设置可显示粒子的最大速度值。 |
| MinFilterValue | 获取或设置可显示粒子的最小速度值。 |
| paricleCountPerDegree | 设置每经纬度内产生的粒子数，用来控制粒子数量。 |
| particleColor | 设置粒子的颜色。 |
| particleLifeRange | 设置粒子的生命周期范围，粒子生命周期将在这个范围内随机产生,是个两个元素的[]。单位为毫秒。 |
| particleSize | 设置粒子的大小。 |
| show | 设置粒子效果渲染器是否启用。 |
| sizeFixed | 获取或设置粒子纹理是否固定大小。值为true时粒子纹理大小固定，值为false时粒子纹理大小随图缩放。 |
| textureEffect | 设置粒子效果是否采用纹理效果，默认值为false。 |
| textureEffectUrl | 设置粒子纹理的URL路径。 |
| velocityScale | 设置粒子的速度缩放倍数。 |
2.效果展示举例
2.1.以colorTable为例，设置不同颜色表高度值与颜色信息，所展示的结果如下图所示：
2.2.以particleColor为例，设置不同的粒子颜色值，其效果展示如下图所示：
2.3.以particleSize为例，设置不同粒子大小，其效果展示如下图所示：
2.4.以paricleCountPerDegree为例，设置每经纬度内产生的粒子数调整粒子数量，其效果展示如下图所示：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
