手把手教你把無人機飛行軌跡做成一張漂亮的可視化交互地圖，太美！

旅行 x 航拍 x 地圖

會碰撞出怎樣的火花

Tri Sanguanbun 是一位來自泰國的開發者，現居芝加哥。他不僅是地圖愛好者，更熱愛踢足球，甚至做了一款發現周邊球場，一起約踢球的 Turfmap APP。

除了踢球，Tri 小哥還十分熱愛旅行。最近，他前往位於美國亞利桑那/猶他州之間的著名景點，傳說中的「紀念碑谷」（Monument Valley）。

Copyright Tri Sanguanbun

Copyright Tri Sanguanbun

在享受美景的同時，Tri 可不僅僅是觀光，他用無人機對景點進行航拍，並整合了 Mapbox 的工具將數據進行可視化，製作成一張可以交互的地圖。將紀念碑谷的壯麗景色在地圖上呈現出來，並在地圖上展現無人機的飛行軌跡。

GIF

這張地圖的奇妙之處在於可以以掃動手勢在兩種地圖風格之間進行交互。Tri 分享了如何製作這樣一張地圖的具體步驟，讓我們一起跟隨他感受這一趟神奇的紀念碑谷之旅吧!

第一階段：設計

Tri 是我們平台的早期使用者，他認為 Mapbox Studio 是比其前身 TileMill 更棒的開發工具，更加美觀易用。在所有地圖式樣中，Tri 最喜歡衛星地圖和等高線圖，因此他決定在這一次的項目中將二者結合起來。

在構建地圖交互邏輯方面，Mapbox GL-JS完全可以勝任。在這裡你可以看到許多新奇的交互玩法實例，Tri 在參考了其中一些之後，認為這個實例中在兩種不同類型地圖之間以掃動手勢進行切換最適合呈現此次的視覺效果。

Tri首先在 Studio Styles 中建立新的地圖風格，他使用了戶外風格的地圖作為模板，並對相關圖層的顏色進行微調，以搭配現實中紀念碑谷岩石的紅色色調。

使用 Mapbox Studio 對地圖風格進行自定義

當以上地圖風格創建完畢之後，Tri 又新建了一張衛星圖風格的地圖，為了實現最終這兩張地圖拼接在一起時可以有良好的視覺效果，他對衛星圖風格的顏色做了一些調整，並且讓它變得略微透明一些。

第二階段：整合無人機飛行數據

Tri 小哥總結了一下如何將無人機（使用的是 DJI 系列）的飛行數據整合進地圖中：

將 iPhone 與電腦連接。

通過 iTunes 將 DJI GO 4 這個應用的 「FlightRecords」文件夾下載到電腦。

使用 Airdata 將 .txt 文件格式轉化為 .kml 文件格式。

將數個離散的 .kml 文件整合保存進同一個 .kml 文件中。這樣可以保證在 Mapbox 中所有無人機數據都在同一個圖層中。

在 Mapbox Studio 中，上傳剛剛保存數據的 .kml 文件，新建一份瓦片數據。

打開之前保存的地圖風格，使用剛剛建立的瓦片數據添加一個新圖層。

對該圖層進行風格自定義。在這個項目中，Tri 建立了一個環繞數據圖層，用以表示無人機的飛行位置，另外建立了軌跡數據圖層，用以顯示無人機的飛行路徑。

第三階段：代碼

最後這一部分則是代碼和測試方面的工作。以下是 Tri 使用的 Javascript 代碼來實現他想要的效果，這部分是由我們 Mapbox 的開發者貢獻的：

Tri"s Map Madness 2018

body{margin:;padding:; }

#map{position:absolute;top:;bottom:;width:100%; }

body{

overflow: hidden;

}

body* {

-webkit-touch-callout: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.map{

position: absolute;

top:;

bottom:;

width:100%;

}

.mapboxgl-compare.compare-swiper{

background-color:#a86036!important;

}

mapboxgl.accessToken ="pk.eyJ1IjoidHJpMTExNCIsImEiOiJjamZtd2hwdW0wemhpMnFxb3JobndlbWtoIn0.BSjGdsZVEoARweLQvz9b6Q";

varbeforeMap =newmapboxgl.Map({

container:"before",

style:"mapbox://styles/tri1114/cjfnwos9x2f0k2rmmcb074f0r",

center: [,],

zoom:

});

varafterMap =newmapboxgl.Map({

container:"after",

style:"mapbox://styles/tri1114/cjfnx795k2ff72rqxmsbwfcgw",

center: [,],

zoom:

});

Tri 對部分代碼做了改動，首先他更改了一下掃動按鈕的顏色，之後則是生成公共 Token ，之後則是更改一下想要定製的地圖風格。

這樣一切就大功告成啦！你可以從這一案例中看到通過 Mapbox Studio 和 Mapbox GL-JS 對你的地圖進行定製化是多麼隨心所欲！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！