WebGL Earth颱風監測web應用

01-25

文章首發於本人微信公眾號：WebGL Eearth颱風監測web應用

前言

花了一天時間，開發了一個基於WebGL Eearth的颱風監測系統，寫這個web應用的目的有兩個：

1、我在github上創建了@viseye組織已經一段時間，但是遲遲沒有項目，於是近期打算寫一個

2、另一個原因是我再知乎開了可視化編程專欄，文章偶爾需要繼續更新，就得找些東西來寫

相關地址：

github @viseye：viseye · GitHub
知乎可視化編程專欄：可視化編程 - 知乎專欄
VisEye Website: Website by viseye
個人微信公眾號id：giscafer

颱風監測web應用webglearth-typhoon

運行截圖

下圖GIF格式，有動畫，點擊圖片即可播放

Demo Url

在線demo:Website by viseye

建議使用支持WebGL HTML5的瀏覽器打開，IE10+或新版Google Chrome等

iPhone 瀏覽器和微信（IOS）內置瀏覽器測試可打開

實現

1、服務端
服務端使用nodejs搭建伺服器，提供前端數據請求的api介面，目前部署於BAE

app.js代碼如下，主要是使用express搭建一個簡單的server

/** * app entry */"use strict"const path=require("path");const express=require("express");const bodyParser=require("body-parser");const Typhoon=require("node-typhoon");const app=express();app.set("port",(process.env.PORT || 3000));app.use("",express.static(path.join(__dirname,"public")));app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended:true}));// Additional middleware which will set headers that we need on each request.app.use((req, res, next)=>{ res.setHeader("Access-Control-Allow-Origin", "*"); // Disable caching so we"ll always get the latest comments. res.setHeader("Cache-Control", "no-cache"); next();});//get real-time typhoon information app.get("/api/typhoonActivity",(req,res)=>{ Typhoon.typhoonActivity().then(info=>{ res.send(info); }).catch(err=>{ res.send(err); });});//get historical typhoon information app.get("/api/typhoonList",(req,res)=>{ let year=new Date().getFullYear(); Typhoon.typhoonList(year).then(info=>{ res.send(info); }).catch(err=>{ res.send(err); });});app.listen(app.get("port"),()=>{ console.log("Server started: http://localhost:"+app.get("port")+"/");});

2、中間件 node-typhoon

中間件說的是nodejs的·middleware·，·webglearth-typhoon·使用了個人自己封裝的node-typhoon（已發布到npm），提供了獲取實時颱風的介面，以及歷史颱風信息的介面，目前版本是v1.0.0，後期會更新。

如下數據結果是今天（2016年10月15日11:53:33）獲取的颱風信息，兩個颱風從太平洋方向過來

[ { "enname": "SARIKA", "lat": "14.40", "lng": "124.30", "movedirection": "西北西", "movespeed": "22", "name": "莎莉嘉", "power": "12", "pressure": "970", "radius10": "100", "radius7": "220", "speed": "35", "strong": "颱風", "tfid": "201621", "time": "2016-10-15 11:00:00", "timeformate": "10月15日11時" }, { "enname": "HAIMA", "lat": "8.20", "lng": "143.90", "movedirection": "北西", "movespeed": "22", "name": "海馬", "power": "8", "pressure": "998", "radius10": null, "radius7": "200", "speed": "18", "strong": "熱帶風暴", "tfid": "201622", "time": "2016-10-15 08:00:00", "timeformate": "10月15日8時" }]

更多見：node-typhoon

3、前端 webglearth2
官方介紹：
webglearth2 - WebGL Earth 2 - the source code of the project,There is an extremely easy to use JavaScript API - fully mimicking LeafletJS.

webglearth2是一個開源虛擬地球web應用程序，可以運行在任何支持HTML5 WebGL標準的web瀏覽器上，以及移動設備,如iPhone,iPad或基於Android的手機也會支持。此外提供LeafletJS封裝的地圖API。

傳送門：GitHub - webglearth/webglearth2: WebGL Earth 2

webglearth-typhoon實現整個思路:

前端載入虛擬三維球+地圖後，通過調用nodejs伺服器中node-typhoon提供的Api獲取颱風信息，數據返回前端後，組裝好，通過marker和氣泡彈窗展示信息的方式載入到地圖。This is all~

TODO

1、加上歷史颱風查詢展示；

2、實時颱風路徑情況

（感興趣的同學可以一起開發）

總結

總結一下用到的技術

JavaScript+HTML5+CSS 網頁必須的，不多說
JavaScript新標準ES6，源碼可能用了一些ES6的新特性書寫
WebGL
LeafletJS 一個地圖JavaScript庫
Nodejs 服務端

好像都是JavaScript~~~

源碼

Github：GitHub - viseye/webglearth-typhoon: A typhoon web application base on WebGL Earth

愛學習、愛分享的同學，可關注個人微信公眾號（id:giscafer）