很多人都见过风向图，直观形象，也是地图数据和现实数据在可视化上很好的结合。
这是我见的第一个风向图，记得是2012年吧，当时觉得很有意思，作为一名技术人员，自然好奇它是如何做到的，是Canvas还是SVG？但当时没深究。最近正好有人（大哥）提到了这个，不妨深入了解，一探究竟。于是乎，发现原来还有这么多玩法，大同小异，比如说这个，来自earth.nullschool.net：
当然还有来自度娘开源的echarts-x的：
基本上，这三个效果图基本涵盖了目前风向图的技术点和功能点（我自己的看法，因为windyty是基于earth.nullschool写的，前者多了一个worker线程处理数据，而后者在github上开源）。不知道哪一个最对你的胃口？对我而言，图1简单易懂，可以快速掌握风向图的实现；图2是实时的全球风向数据，而且是二进制格式，是大数据传输的一个方案；图3则采用WebGL实时渲染，算是大数据渲染的一个方案，所以各有千秋。正好本文就结合这三个例子说一下其中处理好的地方，也是一个由易到难的过程。
原理
乍看上去，多少会觉得无从下手。这是怎么做到的？其实吧，懂与不懂就是那一层纸，就看你愿不愿意戳破而已。我们先从数据说起。
首先介绍一下向量场（Vector Field）的概念。在维基百科的解释是：在向量分析中，向量场是把空间中的每一点指派到一个向量的映射。物理学中的向量场有风场、引力场、电磁场、水流场等等。如图，下面是一个二维的向量场，每一个点都是一个向量。
延伸阅读
- ssh框架 2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
- 从栈不平衡问题 理解 calling convention 2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
- 集合结合数据结构来看看(二) 2017-07-26
学习是年轻人改变自己的最好方式