矢量场可视化原理及Web前端风场流场的可视化实现

本文以风场流场为例介绍一种简单矢量场绘制方法，同时提供了三种Web前端风场与流场绘制的实践

• 矢量场绘制原理
• Web前端风场绘制的三种实践
  • Openalyers绘制
  • Geoserver发布并设置样式
  • 直接绘制，底图移动根据坐标重绘

矢量场绘制原理

相较于标量数据，矢量数据既有大小，又有方向。因此对矢量数据进行可视化时，不仅要表示出其数据的大小，还要通过某种方法表示出其数据的方向。本文采用箭头图的方法来说明矢量场可视化原理，即将每个矢量数据绘制成箭头，箭头的长度表示矢量数据的大小，箭头指向的方向则代表矢量数据的方向。

箭头长度的确定

由于箭头的长度代表矢量数据的大小，因此，要根据矢量数据的大小，根据一定的比例来确定箭头的长度。
为了使显示效果自然美观，根据计算机屏幕及人体视觉因素的考虑，令箭头的最大长度为50像素，及一个NetCDF文件中大小最大的一个矢量数据Vmax所对应的箭头为50像素，则每个矢量数据的长度为：

箭头结构点的坐标计算

一个箭头的结构下图所示，要绘制一个箭头，需要四个点，即箭头尾点P1、箭头顶点P2、箭头左点P3、箭头右点P4。

在某个矢量数据格点绘制箭头时，格点的位置即箭头尾点P1，箭头长度l以及箭头的方向是已知的，因此，需要根据P1点的坐标和箭头的方向，求出P2、P3、P4点的坐标。
为了计算任意方向角度的四个点的坐标，首先计算方向角为0即箭头朝向正北方向时的箭头的四个点，然后根据旋转公式，即可得到旋转后的箭头的四个点的坐标。
方向角为0时，即箭头朝向正北方向，如下图所示。

此时，箭头尾点P1点坐标 以及箭头主体P1P2的长度l已知，绘制箭头时，为了使箭头视觉效果美观，令箭头的两翼P2P3、P2P4与箭头主体P1P2的夹角α1、α2等于30°，箭头两翼P2P3、P2P4的长度分别为箭头主体P1P2长度的30%。由此可以求出箭头顶点P2及箭头左右点P3、P4的坐标：

根据以上公式，即可计算出方向角度为0的矢量箭头各个点的坐标，在此基础上，要绘制任意方向角度的矢量箭头，只需将此箭头的各个点绕箭头尾点P1旋转对应的角度，如下图。即

其中，θ为旋转的角度， 为P2、P3、P4绕P1点旋转θ之后的坐标，如下图所示。

通过以上步骤，便可以将一个矢量格点数据绘制成一个可视化的箭头符号，箭头的长度代表矢量数据的大小，箭头的方向代表矢量数据的方向。

Web风场流场三种绘制方法

1.Openalyers绘制

根据数据起始经纬度、风向风速/u(经向风速)v(纬向风速）根据原理中的计算公式按一定比例因子计算出该风矢的终点坐标，然后将数据按照GeoJSON LineString进行组织，然后对其进行解析后作为一个图层加载到你创建的map对象上即可。
两点注意
计算终点坐标要将经纬度坐标转换为web墨卡托进行计算
线要素样式设置时在其终点处加箭头图片方向与线的倾向一致

var styleFunctionCurrent = function(feature) {
     
            var geometry = feature.getGeometry();
            var styles = [
                // linestring
                new ol.style.Style({
     
                stroke: new ol.style.Stroke({
     
                    color: '#000000',
                    width: 3
                })
                })
            ];
            geometry.forEachSegment(function(start, end) {
     
                var dx = end[0] - start[0];
                var dy = end[1] - start[1];
                var rotation = Math.atan2(dy, dx);

                // arrows
                styles.push(new ol.style.Style({
     
                geometry: new ol.geom.Point(end),
                image: new ol.style.Icon({
     
                    src: 'data/arrow.png',
                    anchor: [0.75, 0.5],
                    rotateWithView: true,
                    rotation: -rotation
                }),
                text:new ol.style.Text({
      
                    text: textCurrent,
                    textAlign:'start',
                    rotateWithView: true,
                    textBaseline:'bottom',
                    rotation: -rotation
                }) 
                }));
            });
            return styles;
    };

动起来吧！！！

黑色粒子是溢油、箭头是流、气象符号是风。做这个DEMO时数据是伪造的请包涵

2.Geoserver发布并设置样式

三步走
geoserver安装NetCDF插件
发布NetCDF风场/流场数据文件
利用sld设置样式

3.直接绘制，底图移动根据坐标重绘

根据上面介绍的方法在canvas上直接绘制，canvas绝对定位到地图上，大小设置与浏览器视图窗口大小一致。每次地图范围改变根据当前地图范围重新绘制。
这里涉及到绘制效率的问题，推荐PIXI.js 一个2D的WebGL绘图库。PIXI.js

强迫症写完回去睡觉
BY.WXQ