基于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 则可以将瞬息间成百上千的数据点记录下来,连点成线,最终可以计算路线总距离。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容