說實話氣象不是我的專業，所以一拿到這份檔案說要做成一個類似熱力圖一樣的那種效果的時候有點懵逼。但是問題不大，花了一下午的時間研究了一下

技術棧：前端

關鍵詞：氣象DAT，leaflet，turfjs

主要參考文章：Javascript(turfjs)等值線圖繪製 - SegmentFault 思否

1.資料格式說明

紅色部分表示資料的經緯度四至範圍，分別代表了經度和緯度的最大最小值

紫色部分為資料池，可以將其想象為一張柵格資料表從114.67，32.42起，125.32，25.43止

綠色部分為資料池的行列數，結合經緯度很容易得到資料間隔為0.01個經度和緯度

2.技術路線

分為兩步

2.1提取dat資料

對檔案稍作處理後（去掉無用的頭部資訊），讀取檔案

與經緯度構成物件集合

黃框內對資料進行了1/100的抽稀，可根據實際需要修改

2.2視覺化

2.2.1結合leaf和turf

根據上邊讀取組合得到的物件集合構成featurecollection類，為turf分析做準備

2.2.2插值計算（將視覺化圖形平滑的關鍵）

第二個引數意義為grid大小，圖中的0.4指返回的grid是一個經、緯度分別為0.4的方格的集合

通過調節第二個引數可以控制插值結果，數值越小計算量越大，獲得的grid 方格數越多，數值也就越平滑

參考https://turfjs.org/docs/#interpolate

2.2.3分類視覺化

將grid中的資料根據實際需要分類分色進行視覺化展示

Isobands第二個引數為數值分割點

綠框中修改各數值範圍內的顏色

3.結果

綜上，可以通過修改數值抽稀數量,插值網格大小以及分類視覺化中的分割點和分割範圍顏色調整最終成圖效果

有興趣的同學可以拿去嘗試一下

連結：https://pan.baidu.com/s/1YhTmvPDM0fOdw75YDYPbQQ

提取碼：jbxr

本文轉自 https://zhuanlan.zhihu.com/p/389530163，如有侵權，請聯絡刪除。