基于Mapbox GL JS 而建的实时地图,就是麻瓜世界的活点地图呀!

还记得《哈利•波特》里的那张活点地图吗?

活点地图 Marauder's Map

你有没有注意到,这张可以用来实时监测霍格沃茨人物活动状况的地图,其实就是我们现在经常提到的实时地图(Real-time map),嗯,“麻瓜”(没有魔法的普通人如你我)世界中人类的“活点地图”。

不过其实更接近于活点地图的应用,还属去年Snapchat 与Mapbox 合作上线的那款App Snap Map(详情可点击查看Snapchat 与Mapbox 强强联手推出 Snap Map)。

这款类似“找朋友”游戏的App,可以让你实时查看好友的位置,并与他们进行即时互动。

除了在社交网络上找朋友,活点(实时)地图在现实世界中还可以有怎样的应用?

下面就为你介绍三个案例,简单学习一下,指不定哪天你有需要用Mapbox  GL JS自制一份活点地图的时候呢。


  实时监测比赛& 查看比赛回放 之Mapbox 在 Red Bull Heavy Water 比赛中的应用

作为世界上难度最高,也是最刺激的专业海洋比赛之一,Red Bull Heavy Water 每年都会吸引世界上几十位最顶尖的运动员参加,来挑战全长7.5英里 高达10英尺的巨浪。

去年,我们专门为这一赛事定制了一张实时地图——Red Bull Heavy Water Real-time map(可点击链接查看)。

这张赛事地图,除了可以显示每位运动员所处的实时位置,同时还可以监测海浪高度、速度,以及流向的变化。

赛事组织方与 SpoonDrift 合作在赛程沿线置放浮标以进行实时追踪,然后我们再根据这些实时数据来制作实时地图。

比如,我们用每个人的头像作为标记,追踪他们的实时位置;在图上用箭头和坡度来呈现海浪的速度与流向;然后再利用Mapbox GL JS添加即时数据,这样就能让大家看到每位运动员的实时比赛状况了。

即时你错过了实时比赛,仍然可以打开这份地图查看比赛回放——在这里你不光可以看到每位运动员当天的比赛轨迹记录,还查看某一段赛程的比赛视频回放!

Red Bull Heavy Water 的组织者 Grant Washburn 后来跟我们分享了他使用实时地图的喜悦——

这张实时地图真的在一定程度上颠覆了观赛体验!

以往那种对比赛文字、图片以及视频直播和回顾,每种方式都有每种方式的局限性,但现在有了实时地图,人们就可以更加直观地欣赏比赛,这种更加强调及时性和互动性的沉浸式观赛体验,很可能会成为日后体育比赛直播/回放的主流形式。

   地图应用体验多样性之Mapbox 在 Rebelle Rally 中的应用

我们还为去年的Rebelle Rally——一项在为期八天,专对女司机们开放的越野拉力赛事,制作了实时地图。

因为这项赛事的比赛规则是,所有参赛者智能携带纸质地图和指南针而不能使用任何带有GPS 导航功能电子设备,一方面为了能对比赛进行实时监测,另一方面还为了保障所有参赛人员的安全,我们制作了一张卫星街道(Satellite Streets)风格的地图,在展现地表路况的同时,添加地点标记和实时互动功能。

Rebelle Rally 的创始人 Emily Miller 也在赛后跟我们分享了她对基于Mapbox 网页应用制作的实时地图的看法——

不再局限于只在地图上寻找地理位置,Mapbox 的存在很大程度上增强了地图的实用。在实时活动、粉丝互动、社区活动过程当中,Mapbox 地图提供的不只是功能体验上的多样性,甚至还有商业上的考量。

  上帝视角看雪橇比赛之Mapbox 在Iditarod 雪橇赛中的应用

最初只是为了对车夫和雪橇犬进行测试的Iditarod 雪橇赛,从1973年创办到现在,已经发展成了一项具有高度竞技性的雪上比赛。

比赛中,狗拉雪橇的车符合16条狗组成的队伍将从安克雷奇附近的Willow 出发,用8-15天穿行约1868公里到达Nome,用时最短的人将获胜。

由于比赛路程远、耗时长等客观限制,想要实时监测距离、地面环境以及检查站和每个人的排位名次也是相当有难度的,所以我们用run-time styling 创建了这样一张“上帝视角”的地图。

点击图片查看更多演示详情

利用Mapbox.js 中可以进行大规模线路分析的Turf 补丁,雪橇犬比赛的实时地图,可以以20毫秒为间隔对“参赛者”进行定位,达到60帧动画实时呈现的效果。Turf 则可以将瞬息间成百上千的数据点记录下来,连点成线,最终可以计算路线总距离。

没想到吧?!“麻瓜世界”里的活点地图,竟然还可以有这么炫酷好玩儿的应用。所以赶紧行动起来啊,跟随这份网页应用教程的指导,创造一份自己的“活点地图”吧!

你可能感兴趣的:(基于Mapbox GL JS 而建的实时地图,就是麻瓜世界的活点地图呀!)