以“纪念碑谷”为例，用无人机对景点进行航拍，并整合了 Mapbox 的工具将数据进行可视化，制作成一张可以交互的地图。将纪念碑谷的壮丽景色在地图上呈现出来，并在地图上展现无人机的飞行轨迹。

第一阶段：设计

首先在 Studio Styles 中建立新的地图风格，使用了户外风格的地图作为模板，并对相关图层的颜色进行微调，以搭配现实中纪念碑谷岩石的红色色调。

地图风格创建完后，新建一张卫星风格地图，为达到两张地图拼接后良好的视觉效果，可对卫星风格地图略微调整，让它更透明些。

第二阶段：整合无人机飞行数据将 iPhone 与电脑连接。

通过 iTunes 将 DJI GO 4 这个应用的 “FlightRecords”文件夹下载到电脑。

使用 Airdata 将 .txt 文件格式转化为 .kml 文件格式。

将数个离散的 .kml 文件整合保存进同一个 .kml 文件中。这样可以保证在 Mapbox 中所有无人机数据都在同一个图层中。

在 Mapbox Studio 中，上传刚刚保存数据的 .kml 文件，新建一份瓦片数据。

打开之前保存的地图风格，使用刚刚建立的瓦片数据添加一个新图层。

对该图层进行风格自定义。在这个项目中，建立一个环绕数据图层，用以表示无人机的飞行位置，另外建立了轨迹数据图层，用以显示无人机的飞行路径。

第三阶段：代码

最后这一部分则是代码和测试方面的工作。以下是 Tri 使用的 Javascript 代码来实现他想要的效果，这部分是由我们 Mapbox 的开发者贡献的：

Tri's Map Madness 2018

body { margin:0; padding:0; }

#map { position:absolute; top:0; bottom:0; 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: 0;

bottom: 0;

width: 100%;

}

.mapboxgl-compare .compare-swiper {

background-color: #a86036 !important;

}

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

var beforeMap = new mapboxgl.Map({

container: 'before',

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

center: [0, 0],

zoom: 0

});

var afterMap = new mapboxgl.Map({

container: 'after',

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

center: [0, 0],

zoom: 0

});

更改下扫动按钮的颜色，然后生成公共Token ，最后更改一下想要定制的地图风格。大功告成！

如果你想进一步将地图以 3D 方式呈现，可以参考使用 Mapbox 的工具和第三方库来实现。