设计 3D Map Tour 导览游地图

大家好！我是智多纷，纷仔！今天我会教大家如何设计一个以网络地图为主轴的3D互动导览游地图。我会带大家游走香港地质公园，透过地质旅程体验及探索香港鲜为人知的一面。制作这个网络地图是不需要任何程式编写的知识，我们只需要用 ArcGIS 的 Story Map 应用程式便可以了！在制作地图之前，我们首先要准备三件事：第一是 ArcGIS的账号，第二是附有座标的空间数据，最后当然是制作 Story Map 的素材，例如图片、影片等等的多媒体内容！如果你们还未有 ArcGIS 账号的话，欢迎大家于GeoLab的网页上登记做会员，我们便会安排一个 ArcGIS账号给你们试用！

 

事不宜迟，一开始我们首先要登入 ArcGIS Online，在网址栏输入网址 www.arcgis.com，浏览器便会自动载入画面，按下 「Sign in」 输入你的用户名称及密码。而今次教学需要使用的素材我们已经提前为你们准备好，一些关于香港地质公园的多媒体资料及数据的 ZIP 档，也可以于 ArcGIS Online 这个云端平台下载。我们只需要于网页上方按「Groups」，ArcGIS 便会显示你目前的账号已加入那些 Group，你会发现有一个名为 「3D Map Tour Tutorial」的文件夹，再按下去你便会看到我们要下载的 zip 档。下载完及解压后，可暂时放于一边，可在制作Map Tour 时再使用。

 

现在先让我介绍什么是Story Map，Story Map 的中文是故事地图，是由美国环境系统研究所公司 ESRI开发的云端制图地理资讯系统 ArcGIS Online中的一个应用程式，其简单的操作可以帮助用户迅速地建立互动式的网络地图。 Story Map 的最大特点是可以结合 Web Map网络地图、文字、图片、影片及音讯，透过各种的content block内容构件，帮助你轻松整合并呈现精彩的故事！头先亦有提及过， Story Map 是透过各式各样的内容构件组成，而我们这次制作导览游地图的主角就是一个叫 Map Tour 的内容构件。

 

先按右上角的钟型图标旁的应用程式目录，你会发现除了 Story Map外，ArcGIS 还提供了很多不同款式的应用程式，每一款的 app 都有不同目的。而我们使用 Story Map 的目的是为了展示地图上的旅游景点及关于景点的有趣资讯，所以 Story Map 其实就像我们经常也使用到的 Power Point 或Google Slide，可以协助我们以最简单、直接，但同时很夺目的地图展示方式将资讯传递给读者们。回到 ArcGIS Online 网页版面，于应用程式目录中选择Story Map进入Story Map 的主页，在版面右上角按下绿色 「New Story」，再选择「Start from scratch」，打开一个新的 Story Map。

 

打开Story Map后，我们首先要设计一个可以吸引读者的封面页，封面页共有三个部份，分别是标题、简介及封面图片或影片。我们先准备一个独特的标题及故事简介，标题、简介及内容的文字可以于刚才解压的 「3D Map Tour」资料夹中找到，你可以打开资料夹「1_create-cover-page」中名为「cover-page-text」的Excel表。用滑鼠标示出 栏C的文字，按键盘的 Ctrl+C 复制封面的标题，再回到Story Map 打标题的位置， 按键盘的 Ctrl+V 贴上。制作简介也是同一做法，在同一个Excel表中复制文字再贴上Story Map 中。

 

完成文字的部份后，我们按一下右上角 「Add cover image or video」加入封面页的背景影片，再按 「browse」上载文件夹中名为「video」的 MP4 影片。 Story Map 的主题多样化及灵活，由背景、字体的大细及样式、到故事章节的布局，也可以自由选择自己喜欢的款式。 ArcGIS Story Map 亦提供不少预设的一键式主题，按自己喜好选择合适的主题布局，而我们这次就用这个黑色「Obsidian」的做导览游的主题。

 

下一步要做的就是加入网页的内容文字，文字是组成 Story Map 的其中一大重点。回到 3D 的文件夹，我们可以打开「2_add-content」的文件夹，当中有一个「body-text」的Excel表。跟刚才制作封面一样，复制栏C的文字，然后在 Story Map 中按加号，选择 「Text」，再将我们复制好的文字贴上。但这次需要留意的是，复制好的文字是需要选择Excel表中栏A 相应的文字类型，例如第一组是一个大段落类型的文字，我们便用滑鼠标示出整段文字，设置文字的选项便会出现。在这个小小的选项栏中，我们可以设置文字的类型、字体、连结及颜色等等。按下最左手边的类型选项，选择大段落，完成第一组的文字后，按键盘的 Enter 换行至新的 Text 构件，如此类推，用一样的做法复制余下的文字。

 

复制好这两个 bulleted points 的句子后，我们可以为两个园区名加上两种不同的颜色 ，强调一个公园，两个园区的概念。暂时整个 Story Map页面都只有文字，略为有点单调，我们可以在段落之间加手插图片增加趣味性及吸引读者的眼球。在大段落下面按加号，选择 「Image Gallery」，再按 「Browse」上载文件夹中所有的图片。加好图片后，移动滑鼠到图片的位置，设置「gallery」的选项就会出现，按一按齿轮，在这个选择的视窗我们会选「Jigsaw」方式去铺排这四张图片，之后按「Save」。

 

带读者进入 Map Tour 前，可以用一幅简单的2D互动小地图介绍我们今次旅程的路线，让读者有一个初步的概念，究竟地质公园在哪呢？导览游的每个景点又在公园中的哪个位置呢？我们先按加号，选择 「Map」，在弹出的视窗按右上角 的「Express Map」，然后可以关掉开始的提示。首先在世界地图中寻找香港的位置，我们可以在地图用滑鼠拉移及放大，或直接在右上角的寻找工具输入「Hong Kong」。找到位置后，我们可以调整地图的设定，在页面的左手面按下齿轮，再按最下面「Select Basemap」的部份，在这个时候可以见到 ArcGIS Online 所有预设的底图，现在可以随便选择一个地形图作为底图。

 

转好底图后，我们便可以在小地图中加插一块地质公园边界的多边形、八个景点的位置、方向箭嘴及少量文字。打开「3_create-express-map」的文件夹，当中有一幅名为「geopark-boundary」的图，我们可以参考图中地质公园的边界，再在自己地图上绘制出来。地图绘制的工具我们可以在页面的顶部，按下制作多边形的工具，然后将滑鼠移到地图位置，你会发现滑鼠的游标变成一个十字，代表绘制模式已经启动。然后我们可以开始用多边形包围地质公园的范围绘画，如果一不小心点错位置，我们可以按「Undo」还原上一步的动作。最后快按两次滑鼠左键完成多边形的绘制，再为它加上一个图层名称，而名称亦可以在文件夹中「express-map-label」的文字档中复制再贴上。

 

按左上角的图层选项，再贴上刚才复制好的文字。我们亦可以调较多边形的颜色。之后我们可以加插两个园区名的标签在多边形范围中，按下「T」字制，「新界东北沉积岩园区」的标签放在北面，再在右上角位置设定文字的底色为透明。而「西贡火山岩园区」就在大约中间的位置，如果不太肯定自己做得正确与否，我们可以参考 geopark 的图再确认。接着我们可以打开一个名为「poi-address」的表，我们需要复制栏 D 这一栏的地址，再贴在 Express Map 页面右上角的寻找位置工具上，然后顺序为每个景点加上数字符号，加完每一个景点都需要填回名称一栏。至于名称的文字都可以在同一份表的栏B复制，亦可调较符号的颜色。如此类推，每个景点都用相同做法，首先透过Search的功能找出景点的座标，然后用数字符号在地图上纪录位置，最后填回上景点名称，是不是很简单呢？

 

这个时候我已经标好八个景点的位置，之后我们亦可以加箭嘴符号标明路线图的方向及景点的次序。在绘图栏按箭嘴，画一条由景点一到景点二的路线，箭嘴线中间有一点，我们可按实并轻轻拉动改变线的弧度，之后亦可以在地图左上角位置设定箭嘴的颜色及线条的款式。我们将它设定成一条黑色虚线的箭嘴，接着便可如此类推完成余下的路线。最后加回一个起点及终点的黑底白字标签在景点一的旁边及景点八的旁边便大功告成了！

离开这个页面前，我们要将图例的窗格一直维持在打开的状态，所以记得要启动这两个图例的选项，最后就可以按右下角的「Done」离开。在 Story Map 的页面也要确保 Express Map 视窗可以显示所有图层及地质公园的范围，我会建议将地质公园的多边形尽量移放在视窗的中心点。所以有需要的都可以按画面上方的笔型工具，回到Express map 的介面调整地图的缩放级别及位置。在 「caption」 的部份加上关于小地图的说明。文字可以在 「caption」 的文字档复制。

 

终于到了制作Map Tour 的部份。我们只需要按一下加号，页面拉动至最下方选择 Map Tour。在这个页面选择中间的选项，我们会同时上载所有景点的相片来制作今次的 Map Tour。然后不需要人手每张加上。这个方法可以节省很多时间。在素材文件夹里面展开一个名为「4_build-map-tour」的文件夹，按进「photos」里面，你会看到每张相片都有一个号码标签。这个是预先排列的导览先后次序。由一号开始，直至八号景点来完成这次的导览游。使用滑鼠标示出全部8张相片，然后拉至上载空格。最后需要确保相片的先后次序是正确，可以按右下角的「Create Tour」完成构件的设置。

 

下一个步骤，是选择Map Tour的布局。预设显示的布局是用「Explorer」的形式呈现导览游，因为我们景点不多，所以选择「Guided」也可以，之后按 「Next」。这次会用3D地图为主轴，所以我们选择「Map focused」比较合适。你们可以因自己的喜好尝试不同的布局。完成布局后，我们要把Map Tour预设的底图改为一个3D的卫星地图。在右上角的「Map Options」，地图类型选择「3D」，然后 Base map 底图我们今次选择「Imagery」，亦即是卫星图。景点符号方面可以选择一个比较鲜艳及突出的颜色，这样放在卫星图上都有一个比较强烈的对比。最后这个设定都非常重要，这个部份是控制预设的地图缩放级别。因为是3D地图的关系，我们要用近景来捕捉每个景点的模型，所以选择「Custom」，再选择「Streets」。完成所有设定便可以按右下角的「Done」。

 

最后一个步骤是我们要在Map Tour的每个景点里面，加上相应的景点名称、简介，和最重要的是座标位置。首先，展开素材包的文件夹，在「photos」返回上一页。展开一个名为「map-tou-poi」的Excel表格。在左边绿色的栏位是景点名称，我们须复制再贴在「Title」的位置。蓝色的栏位就是描述景点简介的文字，同样地都是直接复制再贴上。然后，我们可以把页面向下拉动，会看到一个「Add Location」的按钮。顾名思义，我们可以透过这个功能找出景点的位置。其实这个步骤正正跟我们刚才做的2D小地图当中「Add Location」 的步骤一模一样，我们只需要把黄色栏C这一栏的地址，贴在地图的搜寻器便可以。找到正确的位置后便可以按「Add to Map」，然后再按右下角的「Add Location」。这样就完成一个景点了！如果需要控制3D场景的镜头，我们可以长按左键，再上下左右移动滑鼠，这就可以轻松地调整镜头的角度。

 

今次的教学先在止作结，大家都应该非常熟悉制作Map Tour的程序。各位同学可以尝试自己完成其余七个景点。让我智多纷都能发挥自己的小宇宙！终于完成啦！我，智多纷完成了所有景点，不知道聪明的你们完成了吗？我们的香港地质公园3D导览游就大功告成啦！在发布这个美丽的网页前，可以先预览作品，检查网页在不同的装置上，地图、图片及文字会不会出现移位的情况。在上方位置按预览的按钮。除了可以在电脑装置预览外，我们还可以在平板及电话装置进行预览。在预览完成后，感觉没有问题的话，便可以分享你的作品给其他人欣赏。在预览旁边有一个「Publish」的按钮，按下去便会看到发布的数个选项。我们在右方的 「Share」 部份选择 「Everyone public」。这么你的作品便可以分享给没有 ArcGIS 账号的人。这次纷仔的网页地图教学完结了，如果希望观看更多的教学影片及追踪 GeoLab最新的资讯，请记得订阅我们的 Youtube 频道，追踪我们的IG及 Facebook！我们下次再见！