以“纪念碑谷”为例,用无人机对景点进行航拍,并整合了 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 的工具和第三方库来实现。
相关资源:点石排名软件-快速提升关键字排名-电子商务工具类资源-CSDN文库
声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!