上癮了，最近又給公司擼了一個視覺化大屏(附原始碼)

我拿到的需求是這樣的，需要在地圖上將我司船舶的軌跡展示出來。聽起來很簡單，一開始我也是這樣想的。通過一些BI工具應該可以輕鬆實現，比如這樣的：

仔細觀察可以看到，這種軌跡是兩點之前的弧線，適合用來展示航空的航線或者起點終點方向型別軌跡，而載入了外掛後發現，其功能是無法支援船舶軌跡的資料的，所以該外掛被pass掉了。

百度已經無法找到合適的資源了，於是我又轉向了微信公眾號搜尋，我發現了folium這個地圖視覺化的庫。它的視覺化地圖讓人著迷，也支援不同的瓦片（高德，谷歌，也有內建的）風格供你選擇，可以在地圖上描繪點，圈，直線，熱力圖等風格的圖片，但是如何將軌跡在地圖上描繪出來，不論是如何搜尋技術文章，也無論是看官方檔案，能實現軌跡的只能通過點來描繪，當點足夠密集，就相當於軌跡了，類似於中國颱風網這種圖的樣式，如下圖。

但現實情況是，我們船舶的軌跡是沒有如此頻繁的軌跡資料的，那麼folium包也沒有辦法實現我的需求。終於，功夫不負有心人，plotly 這個視覺化的包被我找到了。

1、實踐之軌跡地圖

軌跡地圖使用plotly包，具體指令碼如下，資料為自己模擬資料。

import  os
import plotly.graph_objects as go
import plotly as py

url = r'D:\working_directory\task\文章\shipping_line.html'
mapbox_access_key = '需要你自己去mapbox的網站去申請一個賬號'
style = 'streets'
# 採用的風格為streets型別

fig = go.Figure()
color_map = ['#7bd3f6', '#bcbd22', '#17becf','#d62728']
lat_li = []
lng_li = []
for item in [(122.180204,30.806457),(123.256865,29.762908),(123.366728,28.631261),(122.048368,26.350981),(120.048857,24.705378),(119.060087,22.835386),(119.543486,19.433918),(119.960966,16.276336),(116.159697,11.413759),(110.183134,5.067372),(105.173368,0.064226),(101.833525,1.909575),(101.833525,1.909575),(101.833525,1.909575),(88.122587,3.840643),(80.300322,5.154913),(76.433134,7.338996),(71.247587,13.900433),(63.425322,22.246862),(56.394072,25.857701)]:
    lng_li.append(item[0])
    lat_li.append(item[1])

fig.add_trace(go.Scattermapbox(
    name='vessel',
    mode='markers+lines',
    lon=lng_li,
    lat=lat_li,
    marker={'size': 2, 'color': color_map[3]},
    showlegend=False
))

fig.update_layout(
    margin={'l': 0, 't': 0, 'b': 0, 'r': 0}
    , mapbox={
        'center': {'lon': 90, 'lat': 8},
        'zoom': 1
        , 'style': style
        , 'accesstoken': mapbox_access_key}
)

if os.path.isfile(url):
    os.remove(url)
py.offline.plot(fig, filename=url, auto_open=False)
# 儲存為html檔案

效果圖如下：

2、最終制作出來的效果圖

就這樣，對大屏各個模板進行打磨，我們最終效果圖是這樣的。

3、20個大屏的由來

在這裡插入圖片描述
這次大屏需求之後，陸陸續續接了很多新的需求。我們整理了近20個視覺化大屏模板，今天分析給大家，梳理不易，獲取前記得點贊、收藏、關注。

4、獲取方式

20款開源的視覺化大屏(含原始碼)已打包放置後臺了，獲取方法如下：

方法1、微信搜尋公眾號：Python學習與資料探勘，後臺回覆：視覺化
方法2、掃描二維條碼或者傳送圖片到微信識別，後臺回覆：視覺化

在這裡插入圖片描述