很多人都見過風(fēng)向圖,直觀形象,也是地圖數(shù)據(jù)和現(xiàn)實(shí)數(shù)據(jù)在可視化上很好的結(jié)合。
這是我見的第一個(gè)風(fēng)向圖,記得是2012年吧,當(dāng)時(shí)覺得很有意思,作為一名技術(shù)人員,自然好奇它是如何做到的,是Canvas還是SVG?但當(dāng)時(shí)沒深究。最近正好有人(大哥)提到了這個(gè),不妨深入了解,一探究竟。于是乎,發(fā)現(xiàn)原來還有這么多玩法,大同小異,比如說這個(gè),來自earth.nullschool.net:
當(dāng)然還有來自度娘開源的echarts-x的:
基本上,這三個(gè)效果圖基本涵蓋了目前風(fēng)向圖的技術(shù)點(diǎn)和功能點(diǎn)(我自己的看法,因?yàn)閣indyty是基于earth.nullschool寫的,前者多了一個(gè)worker線程處理數(shù)據(jù),而后者在github上開源)。不知道哪一個(gè)最對(duì)你的胃口?對(duì)我而言,圖1簡(jiǎn)單易懂,可以快速掌握風(fēng)向圖的實(shí)現(xiàn);圖2是實(shí)時(shí)的全球風(fēng)向數(shù)據(jù),而且是二進(jìn)制格式,是大數(shù)據(jù)傳輸?shù)囊粋€(gè)方案;圖3則采用WebGL實(shí)時(shí)渲染,算是大數(shù)據(jù)渲染的一個(gè)方案,所以各有千秋。正好本文就結(jié)合這三個(gè)例子說一下其中處理好的地方,也是一個(gè)由易到難的過程。
原理
乍看上去,多少會(huì)覺得無從下手。這是怎么做到的?其實(shí)吧,懂與不懂就是那一層紙,就看你愿不愿意戳破而已。我們先從數(shù)據(jù)說起。
首先介紹一下向量場(chǎng)(Vector Field)的概念。在維基百科的解釋是:在向量分析中,向量場(chǎng)是把空間中的每一點(diǎn)指派到一個(gè)向量的映射。物理學(xué)中的向量場(chǎng)有風(fēng)場(chǎng)、引力場(chǎng)、電磁場(chǎng)、水流場(chǎng)等等。如圖,下面是一個(gè)二維的向量場(chǎng),每一個(gè)點(diǎn)都是一個(gè)向量。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26