以“纪念碑谷”为例，用无人机对景点进行航拍，并整合了 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
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 的工具和第三方库来实现。
