交互地图设计经典案例

分享给朋友:

用地图呈现数据已经不算新颖的方式了,当数据种类繁多,并且伴有时间跨度的时候,静态地图往往无法满足读者的要求。这时候,互动地图灵活多变,信息量巨大的优点就体现出来了。下面就介绍几种最为常见制作互动地图的方式,跟着小编一起做你的第一个互动地图吧!

当几年前Google Maps还一统天下的时候,利用Fusion Tables制作互动地图是一种较为主流的方式,凭借Google Maps强大的地理数据,具体地址和经纬度之间的换算非常精确,上手很容易,而且做出来效果也不赖。

下面就为大家介绍基于Google Mps制作的交互地图:纽约时报在2011年为了纪念纽约地图诞生200年,制作了显示这两百年来曼哈顿地图里街道变化的作品——“How Manhattan’s Grid Grew”链接>>>

manhattan grow

这个作品中最令人称道的是:利用拉动时间条的方式,读者可以清晰地看到两百年间曼哈顿道路的变化,是如何增加到现在的条数,并且是怎样慢慢成为现在方方正正的模样的。作者还提供了不同年代各个地区人口密度变化的数据可视化,用颜色深浅显示密度高低。地图中的元素不外乎点线面三种,你可以利用Fusion Tables先从最简单的点开始制作属于自己的互动地图,教程请点这里

2012年之后,随着MapBox的横空出世,Google Maps显得逊色不少,一大原因是MapBox是完全开源的软件,它可以让每个人根据实际情况对地图进行修改,更新快而且准确度高。值得一提的是它提供的制作地图的软件TileMill也比Fusion Tables更独立,支持更多的文件格式,设计界面更加华丽,并且可以进行大量的数据运算。

WNYC(纽约公共电台)的数据小组利用MapBox作出了许多互动地图。下面给大家展示比较有代表性的一幅链接>>>

wnyc2

这张互动地图展现了上一届纽约市长选举时,每个街区投票人数的情况。这个作品对于区域的划分非常细致,配色非常舒服,直观但又能表示趋势。颜色越深表示投票率越低,当读者鼠标扫到特定区域,还会显示具体的数据,要做到这点,需要多层数据的叠加。

这是MapBox为NYC Open Data(纽约开放数据)制作了许多精彩的互动地图,并且在GitHub上传了源代码,大家可以戳这里进行学习,

最后介绍的Leaflet是一个开源的基于移动开发的互动地图JavaScript库, 它同样可以加载在MapBox上。Leaflet 的代码量小,可以加入更多插件,其API(应用程序界面)清晰易懂,对于想在地图上增加多媒体功能的是首选。

下面展现给大家的案例是前段时间纽约时报做的一个专题 “找寻纽约市里安静的地方“链接>>>

quiet

这些地方是根据读者提供的816条建议绘画出来,蓝点比较密集的地方即可以视作城市中比较安静的角落,纽约时报选了其中17个地点,各自拍摄了一段视频,让读者直观地体验一下这份安静。当你的鼠标移到这些地方的时候,就会出现关于地点的一段描述,以及相应的视频,你可以点击观看视频,同时你还可以自己在地图上标注你觉得纽约安静的地方。Leaflet入门教程请戳这里