StoryMapJSTimeline JS 都是 Knight Lab 推出的工具,用处顾名思义,用地图讲故事。

把二月份在云南游玩的行程用 StoryMapJS 做了个例子作为参考。

同类比较

可以做 StoryMap 的工具不少,也都提供了实例可以参考

前四款不需要编码,有些界面还更美观,大家可以根据需要选择,我不选择的原因是数据和服务绑定。

用法

StoryMapJS 支持两种模式:Maps 和 Really big images (gigapixel),前者是包含”正常”地理位置信息的地图,后者是不包含地理位置信息的大尺寸图片,内容可以是历史地图、画作、照片,通过设置对图片指定位置进行说明(这也是一种有趣的”地图”)

以下说明仅针对 Maps 模式

StoryMapJS 从 JSON 读取数据比较简单,见文档

地图类型在 JSON 中通过 map_type 设置,大致三种

地图的玩法,往简单了说,一张基础地图打底,上面叠加图层添加自定义标识,往复杂了说玩法就太多了。刚上手把 map_type 设置为 osm:standard 即可,这是最常用的标准地图。

每个 slide 可以通过 location 设置经纬度,数据格式为 decimal,北半球和东半球为正数,反之为负数。国内的地址可以通过百度地图拾取坐标系统查询对应的经纬度。

map_as_image 设置为 false,则 StoryMapJS 会生成连线按顺序连接地图上每个标记点。缺点是没有更多的选项,比如行程分段又不想分成多个 StoryMap 会比较纠结,又比如大军兵分两路似乎是无法实现。

另外 StoryMapJS 会根据标记点的密集程度自动进行缩放,但是向后翻页的情况处理得不好。