我要投搞

标签云

收藏小站

爱尚经典语录、名言、句子、散文、日志、唯美图片

当前位置:VR彩票 > 地形图图式 >

交互故事地图零基础 DIY 指南附 27 种源码丨城市数据派

归档日期:07-11       文本归类:地形图图式      文章编辑:爱尚语录

  说到交互故事地图,是一种全新的图文内容叙述方式,结合地理位置,不仅仅是图文并茂,还支持在线交互,非常适合做历史文化、事件发展、防灾响应的展示。比如我们分享过很多案例:

  可是,怎么做呢?为什么他们能做出这么好看的交互故事啊,我是小白甚至不会编程,有希望吗?

  这篇 DIY 指南就是从天而降的小天使,帮助你迈出制作可视化交互故事的第一步!学过本教程,你也可以做出这样的交互故事地图了!

  🎈在此献上在线体验入口。在公众号后台回复关键词「交互故事」,即可获得项目源码!

  注意:数据已准备好供您使用。本课程不涉及数据清理和地理处理。不要将此数据用于出版。因为它需要进行事实检查,其中一些可能会丢失或无效。此数据仅用于演示数据驱动的样式。

  🔗 Mapbox 可视化选情数据中文教程上下,涵盖了核心的概念,比如表达式

  🔗地图设计指南 (请关注 Mapbox 公众号回复 技术 获得,中文版即将出炉)

  这是很重要的开始,因为交互故事的内容,数据占到了一大半。而大部分开发者遇到的问题,除了数据源(前面都告诉你啦!),还有就是从网上下载或者自行制作的数据却浑然不知应该如何去使用。

  Tilesets 可被高度缓存并快速加载,由矢量切片(Vector Tiles)组成,用于快速缓存,缩放和提供地图。Mapbox Web 和移动端矢量瓦片(Vector Tiles)比栅格瓦片(Raster Tiles)小 75%。这样可以快速,平滑地从地图的世界视图缩放到街道级细节。

  顾名思义,矢量切片(Vector Tiles)含有的是矢量数据,而不是渲染图像。它们以紧凑的结构化格式包含了几何形状和元素 - 如道路名称,地名,门牌号码。矢量切片(Vector Tiles)仅在客户端请求时被渲染,例如 Web 浏览器或移动应用程序的请求,且是在客户端进行渲染。

  CSV(Comma-separated Value)是一种常见的表格数据,可以在 Excel 中打开,只有在含有坐标的时候,可以被绘制在地图上,比如下面的数据。

  GeoJSON 是 Mapbox Web Service 和 API 支持的地图数据的文件格式。作为 JSON 格式的子集,它可以在现代软件中被解析,并且可以原生支持 Java 语言。

  KML 是一种类似于 GeoJSON 的文件格式,但在 Google 产品中更常用。相似之处是,与 GeoJSON 一样,它可以存储点,线,多边形和其他矢量数据;与 GeoJSON 不同的是,它基于 XML 而不是 JSON。

  GPX 或 GPS eXchange 格式是通常由 GPS 接收器创建的数据格式。您可以将 GPX 文件上传到 Mapbox 帐户,以便在自定义地图样式中使用。

  请注意,Mapbox 不支持沿线的值(例如,沿着慢跑路线的各个点的高程和时间)。可以上载沿一行的值的 GPX 文件,但 Mapbox 将忽略该行的任何数据。

  TIFF(有时是TIF)是用于保存光栅图像的文件格式。使用 Mapbox,TIFF 通常是 GeoTIFF,这意味着文件嵌入了地理配准信息。

  在了解了数据格式之后,我们就可以开始上手 Mapbox 了,Mapbox 中有一些常见的定义:

  我们在不久前为您准备了一套入门系统中文教程:地图界的 PS — Mapbox Studio 入门指南(中英文教程合集),还有官方操作手册文档,不过我们在这里再进行一些针对课程的介绍。

  Mapbox 自带的 6 款 Tilesets 已经有一些在设置里面了,可以直接拿来用,包括卫星数据、街道、地形等等。

  Mapbox Studio 中已经有一些核心样式了,你可以直接拿来使用,或者创建新的空白样式,自己发挥,也支持上传 JSON 样式文件。

  图层(Layer)的类型必须是上面几个之一。通过 Mapbox GL JS 文档的样式规范部分,我们可以了解到这些类型的含义👇

  数据上传、样式都搞定了以后,我们下面就要进阶交互设计了!有请 Mapbox GL JS👏

  Mapbox GL JS 是强大的 Java 库,可以帮助你制作酷炫、高度自定义的交互地图。当你按照Mapbox 样式规范设计好地图后,Mapbox GL JS 会将它与矢量瓦片结合(符合 Mapbox 矢量瓦片规范),并用 WebGL 渲染出来。

  我们可以参考 Mapbox GL JS 的文档中 Display a map 的例子。将下面的代码复制到文本中,保存并修改后缀为.html,再用浏览器打开。

  如果还是不太明白,可以参考 Mapbox GL JS 的文档中 Display a map with a custom Layer 的例子,您可以将两部分代码进行比较,找到差异,就知道什么地方变动导致了地图样式的改变。

  在 Mapbox GL JS 文档中,我们提供了 26 种交互方式的源码。

  「打开方式」是一样的,类似于显示地图,将代码复制到文本中,保存并修改后缀为.html,再用浏览器打开。

  这么多种交互方式,相信你一定已经找到自己喜欢的交互方式,并且跃跃欲试了吧!

  文章来自公众号:Mapbox (微信号:Mapbox_China)点击上图,了解详情

  商业合作、投稿等,请联系客服小派派微信号 xiaopaipai_udparty,加好友必须备注:合作+机构名称返回搜狐,查看更多

  声明:该文观点仅代表作者本人,搜狐号系信息发布平台,搜狐仅提供信息存储空间服务。

本文链接:http://odontalgia.com/dixingtutushi/181.html