矢量场可视化原理及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点旋转θ之后的坐标，如下图所示。