创建 Web 地图

在分析影像或准备地理空间数据后,为与受众共享,通常将这些项目作为图层在 ArcGIS Online 中进行发布。 以引人入胜的方式呈现这些图层的一种好方法是将它们封装到 Web 应用程序中。

在创建 web 应用程序之前,首先需要在 web 地图中收集所有感兴趣的图层。 首先,您将在 ArcGIS Online 中设置 web 地图。

  1. 登录到您的 ArcGIS 组织帐户
    注:

    如果您没有组织账户,请参阅软件访问权限选项

  2. 单击功能区上的地图

    “地图”选项

    即会创建新地图。

    提示:

    如果您位于新会话中,则单击地图将打开新地图。 否则,将打开现有地图(您上次使用的地图)。 如果打开了现有地图,请单击新建地图

    Map Viewer 中的空地图

    接下来,您将添加感兴趣的图层并开始组织您的地图。 第一个图层是 2014 年泥石流后立即拍摄的影像。

    注:

    在本教程中,图层已在 ArcGIS Online 中发布。 在实际工程中,图层很可能是由您或您的组织发布的。 您可以在利用 ArcGIS Online 中的卫星影像评估玉米田的冰雹损失教程的创建在线切片影像图层部分中了解如何将您自己的影像上传至 ArcGIS Online。 或者,您也可以使用来自可靠和权威来源的预先存在的图层,例如 ArcGIS Living Atlas of the World

  3. 图层窗格中,单击添加

    “图层”窗格中的“添加”按钮

    随即显示添加图层窗格。

  4. 添加图层窗格中,单击我的内容,然后选择 ArcGIS Online
  5. 在搜索栏中,输入 Aerial Imagery Oso Slide Area owner: esri_event

    显示多个结果。

  6. 对于 Aerial Imagery Oso Slide Area 图层,单击添加按钮。

    为 Aerial Imagery Oso Slide Area 图层添加按钮

    将图层添加到地图中,地图会放大到其范围。 图层包含 2014 年奥索镇泥石流之后拍摄的影像,位于华盛顿州斯诺克米西镇(西雅图以北)的农村地区。 影像中间的浅色形状是泥石流的结果。 泥石流发于山上,向北流动,并倾泻而下,致使河流与附近公路阻塞,Steelhead Drive 社区被完全掩埋。 此悲剧性灾难共造成 43 人丧生。

    由于您正在构建的地图将主要由影像组成,因此您还需要选择基于卫星影像的底图。

  7. 内容(深色)工具栏上,单击底图。 选择影像底图。

    影像底图

    该底图显示整个世界的卫星影像,可作为其它图层的背景。 您现在将添加一个面图层以显示泥石流影响的边界。

  8. 内容工具栏上,单击图层。 在图层窗格中,单击添加
  9. ArcGIS Online 中搜索 Oso Mudslide Impact Area owner:Learn_ArcGIS。 添加 Oso Mudslide Impact Area 图层。

    图层随即添加到地图。

    地图中的 Oso 泥石流影响区域

    此图层表示泥石流影响的边界,包括泥石流本身以及泥石流阻塞附近位于东部的 Stillaguamish 河而造成的洪水。 您将更改其符号化以确保其不会隐藏影像。

  10. 添加图层窗格顶部,单击后退箭头。

    “返回”箭头

    图层窗格列出了您到目前为止添加的所有图层。

  11. 确保已选择 Oso Mudslide Impact Area。 在设置(浅色)工具栏中,单击样式

    “样式”选项

  12. 样式窗格的选取样式下,对于位置(单一符号),单击样式选项

    样式选项按钮

  13. 对于符号样式,单击编辑按钮。
  14. 符号样式窗口中,单击无颜色图标。 对于轮廓颜色,单击编辑按钮。

    符号样式设置

  15. 选择颜色窗格中,对于 #,输入 ff0000,然后按 Enter 键。 单击完成

    红色轮廓颜色

  16. 对于轮廓宽度,将值增加为 5

    “轮廓宽度”选项设置为 5

  17. 样式选项窗格中,单击完成。 再次单击完成

    地图现在显示了影响边界,而不会遮挡图像。

    使用红色轮廓显示影响边界的地图

    接下来,您要将图层重命名为更短、更有意义的名称。

  18. 图层窗格中,对于 Oso Mudslide Impact Area 图层,单击选项按钮并选择重命名

    “重命名”选项

  19. 重命名图层 Impact area,然后单击确定
  20. 同样,将 Aerial Imagery Oso Slide Area 图层重命名为 Postevent imagery

添加历史底图

地图的一个问题是默认影像底图显示当前景观。 为了进行比较,用于显示泥石流发生前景观的底图将非常有用。 为此,您需要添加历史影像图层作为底图。

  1. 内容工具条上,单击底图。 在底图窗格中,单击当前底图

    当前底图选项

  2. World Imagery 下,单击添加按钮。

    “底图”窗格中的“添加”按钮

  3. 添加图层窗格中,在 ArcGIS Online 中搜索 Oso_2012 owner:Learn_ArcGIS。 对于 Oso_2012 图层,单击添加按钮。

    Oso_2012 图层的添加按钮

  4. 在窗格的顶部,单击后退箭头。 如有必要,在地图上放大,直到 2012 年的影像可见。

    2012 年影像图层已添加到地图

    新图层现在是底图的一部分,显示了灾前景观。 此影像拍摄于 2012 年,也就是奥索镇泥石流的两年前,显示了 Steelhead Drive 社区被泥石流摧毁之前的情况。 一部分影像被泥石流之后拍摄的影像覆盖。

    如果用户缩小至超出 Oso_2012 影像的范围,则将显示常规影像底图,从而提供无缝体验。

  5. 内容工具栏上,单击图层
  6. 图层窗格中,指向 Postevent imagery,单击以打开和关闭可见性按钮,从而比较灾前和灾后的景观。

    可见性按钮

    您可以看到本地 Steelhead Drive 社区如何完全被泥石流掩埋。

    Steelhead Drive 社区所在的区域

    注:

    根据屏幕的大小,您可能需要放大以查看两个图层之间的差异。

    选择更精确的范围后,您将保存地图。

  7. 如有必要,可以将 Postevent imagery 图层设置为可见。
  8. 对于 Impact area 图层,单击选项按钮,然后选择缩放至

    整个影响边界都显示在地图范围内。

  9. 内容工具栏上,单击保存并打开,然后选择另存为

    “另存为”按钮

  10. 保存地图窗口中,输入以下信息:
    • 对于标题,输入 2014 Oso Mudslide Imagery and Extent
    • 对于标签,输入 OsoWashingtonmudslide,在每个单词后按 Enter 键。
    • 对于摘要,输入 This web map displays the 2014 Oso mudslide impact area (estimated) and imagery of the aftermath

    保存地图窗口

  11. 单击保存

添加草图图层

接下来,您将向地图添加注释以使其更易于理解。 您将使用草图图层添加这些注释。 创建草图图层是向地图添加少量要素(例如箭头和标注)的好方法。 草图图层中的要素和地图一起保存,因此只有您(即地图作者)可对这些要素进行编辑和保存。

  1. 关闭 Postevent imagery 图层。
  2. 内容工具栏上,单击添加并选择创建草图图层

    “添加”菜单中的“创建草图图层”选项

    随即显示草图窗格。 此外,地图中还会出现一个工具栏,其中包含草图图层的几何选项。

    注:

    如果出现新建草图图层窗口,您可以将其关闭。

  3. 在地图工具栏上,单击线按钮。

    线按钮

    草图窗格将改为显示线要素的符号选项。

  4. 草图窗格中,对于颜色,单击编辑符号。 确认颜色为 #ffffff,然后单击完成
  5. 对于宽度,选择 6。 对于箭头,选择以右侧箭头结尾的符号。

    宽度和箭头参数

  6. 单击地图上泥石流开始的区域。

    在鼠标指针的控制下,地图上会显示一个点,并从该点开始延伸出一条线。

  7. 双击 Steelhead Drive 社区的位置以放置端点箭头并完成该线的绘制。

    箭头应指示泥石流的方向。

    地图上的箭头草图

    注:

    要修改箭头,请在地图工具栏上单击选择按钮。 单击线,以在地图上将其选中。 您可以拖动要素的控点以调整其大小或进行旋转。

    接下来,您将添加一些标注。

  8. 在地图工具栏上,单击文本按钮。

    文本按钮

    草图窗格将更改为显示文本选项。

  9. 在地图上,单击泥石流箭头起点上方的位置。 在草图窗格中,对于内容,将文本替换为 Landslide

    文本内容已更改为 Landslide

    地图上的文本将更新。 您将为文本添加一个晕圈,使其与底图相比更加突出。

  10. 草图窗格中,打开晕圈。 在晕圈下,对于颜色,选择编辑按钮。

    晕圈设置

  11. 选择颜色窗格中,在 # 旁输入 2b2b2b,然后按 Enter 键。 单击完成

    文本要素在地图上更加清晰可见。

    地图上的文本要素

    注:

    如果需要重新定位文本要素,请在地图工具栏上单击选择按钮。 单击文本要素以将其选中。 指向文本要素,直到您的光标更新为移动要素符号。 将文本要素拖至所需位置。

  12. 同样,创建文本要素来标注上游洪水的位置(位于影响区域的东侧)和 Steelhead Drive 社区。 确保两个文本要素都具有黑色晕圈。

    添加到地图的两个附加文本要素

    添加的文本要素是标注。 接下来,您将添加虚线,以指向受影响的社区。

  13. 在地图工具栏上,单击线按钮。 在地图上,在 Steelhead Drive 社区文本要素下单击,然后在构成社区中心的房屋群附近双击。

    添加的第一条线

  14. 草图窗格中,对于模式,选择包含中等大小破折号的虚线。

    中等大小的虚线模式

  15. 对于宽度,输入 4

    线的笔划样式将在地图上更新。

    地图中已格式化的线

    您的地图注释图层现已完成。 现在,您将完成并共享地图。

  16. 关闭草图窗格。 在图层窗格中,再次打开 Postevent imagery 图层。
  17. 在地图上,进行缩小,直到显示所有图层,但是目前还不行,因为文本相对于影像过大。
  18. 图层窗格中,对于草图图层,单击选项按钮并选择重命名。 将图层重命名为 Reference information
  19. 内容工具栏上,单击保存并打开,然后选择保存

    最后,您将共享地图。

  20. 内容工具栏上,单击共享地图。 在共享窗口中,选择所有人(公众),然后单击保存

    您已经构建了一个在线地图,其中包含所有灾前灾后影像,以及可帮助用户理解地图的补充数据和注释。 通过打开和关闭图层的方法对比灾前和灾后的影像,泥石流所造成的破坏可以一目了然,并排对比虽然较为方便,但效果却不及此方法。 您将把地图封装在 Web 应用程序中以增强其功能并使其更简明易懂。

创建应用程序

现在您的 web 地图已准备就绪,可以将其添加到 web 应用程序中,以尽可能以最佳方式呈现其信息。 用应用程序选择一个 web 地图,并向其添加功能和工具,从而改进用户体验。 您的目标是让受众轻松比较影像。 您将创建具有滑动功能的应用程序,以供用户在灾前和灾后影像之间滑动。

  1. 内容工具栏上,单击创建应用程序,然后选择 Instant Apps

    Instant Apps 选项

    ArcGIS Instant Apps 随即在新选项卡中打开。 Instant AppsInstant Apps 提供了可用于创建应用程序的应用程序模板。您将使用包含滑动功能的 Media Map 模板。

  2. 对于媒体地图,单击选择

    Media Map 模板

    提示:

    要在选择模板之前了解有关模板的详细信息,单击模板名称旁的箭头。

  3. 创建应用程序 - Media Map 窗口中,对于标题,输入泥石流之前和之后的 Oso

    创建应用程序 - Media Map 窗口

  4. 单击创建应用程序

    即会基于该模板创建应用程序。 它显示您的地图并具有自定义选项。

    默认应用程序

    地图的一侧是用于配置应用程序的窗格。 窗格分四步,每步具有不同的选项集。 首先,您想要在应用程序上启用滑动功能。您可以通过搜索滑动工具进行添加。

  5. 单击搜索设置。 在搜索设置窗口中,搜索滑动,然后单击滑动工具结果。

    搜索结果中的滑动工具

    随即显示一条通知,要求您关闭快速模式。 快速模式是用于配置 Instant Apps 中的应用程序的默认模式,可简化配置体验。 滑动工具不是快速模式中的设置之一,因此要进行启用,需要关闭快速模式。

  6. 关闭快速模式窗口中,单击继续

    交互性窗格随即出现并显示几个可用的交互性选项。

  7. 打开卷帘工具

    滑动工具已打开

    将显示用于配置该工具的选项。 可将图层设置为在滑动栏之间滑动并更改其方向。 您希望灾后影像默认显示,但在使用滑动工具时消失。 要实现此效果,您需要在滑动工具中将灾后影像设置为前导图层。

  8. 对于选择前导图层,展开灾后影像。 选中影像

    选择前导图层选项

  9. 在地图上,前后拖动滑动栏测试功能。

    地图上的滑动工具

    可利用此工具轻松比较灾前和灾后的地区样貌。 对比影像显示,Steelhead Drive 社区已完全被泥石流掩埋,几乎踪迹全无。

添加更多功能

接下来,您将向应用程序添加更多可用功能。 尤其是,您需要添加比例尺和测量功能,以便用户可以了解灾难范围。

  1. 单击搜索设置,然后搜索比例尺。 在搜索结果列表中,单击比例尺

    比例尺搜索结果

    交互性窗格随即出现。

  2. 导航下,打开比例尺

    比例尺工具选项

    比例尺即会添加至地图的下方角落。

    地图上的比例尺

    还可以在此窗格中找到测量工具,因此您无需进行搜索。

  3. 交互性窗格中,打开测量工具

    测量工具选项

    打开测量按钮即会添加至地图的上方角落。

    打开测量按钮

  4. 单击打开测量按钮。 在测量工具栏上,单击测量面积按钮。

    测量面积按钮

  5. 在地图上,绘制一个面。 双击以完成绘制。

    所绘制面的面积单位为平方米,周长单位为米。

    地图上的测试测量

    用户可使用此工具测量滑坡距离以及受影响面积。

  6. 单击清除按钮。

    “清除”按钮

    即会清除测量。

  7. 单击打开测量按钮关闭测量工具栏。

    最后,您将移除打开图例按钮,该按钮位于打开测量按钮下方。 此按钮默认包含在应用程序中,但是不适用于您的地图。

  8. 单击搜索设置,然后搜索图例。 在搜索结果列表中,单击图例

    关于窗格随即出现并显示图例选项。

  9. 关闭图例

    图例工具已关闭

    打开图例按钮即会从应用程序中移除。

完成应用程序

在启动应用程序并测试微件之前,您需要添加关于应用程序作用的文本信息并更改其主题。

  1. 单击关于

    关于选项

    随即显示关于窗格。

  2. 单击应用程序详细信息

    应用程序详细信息选项

  3. 打开简介面板。 对于简介面板内容,单击编辑

    简介面板选项

  4. 简介面板内容窗口中,复制并粘贴或输入以下文本:

    该应用程序将显示 2014 年华盛顿斯诺克米西镇奥索泥石流影像。 使用“卷帘”工具比较泥石流前后影像。

    红色轮廓显示泥石流(包括洪水)的影响范围。

    此灾难导致 43 人死亡,并造成数百万美元的财产损失。

    简介面板内容窗口

  5. 单击关闭

    打开简介面板按钮将在地图顶部打开测量按钮旁显示。 单击打开简介面板按钮时,窗口中将显示文本。

    接下来,您将添加包含应用程序标题的页眉。

  6. 应用程序详细信息窗格中,打开页眉

    页眉工具已打开

    页眉将在地图顶部显示。

    地图上的页眉

    接下来,您将更改应用程序的主题。

  7. 单击主题与布局

    主题与布局选项

  8. 主题和布局窗格中,单击主题
  9. 对于选择模式,单击 Dark

    “选择模式”设置为“深色”

    地图上的页眉和按钮将从白色更改为黑色。 黑色将反映与灾难严重程度相匹配的严肃基调。

    您已配置完应用程序。接下来,您需要发布该应用程序。

  10. 主题窗格底部,单击发布

    “发布”按钮

  11. 发布窗口中,单击确认

    片刻之后,即会发布该应用程序。 共享窗口随即出现并显示用于共享应用程序的选项。

  12. 共享窗口中,单击启动

    该应用程序将在新的浏览器选项卡中启动。

    已完成的应用程序

  13. (可选)测试已完成应用程序的功能,例如滑动工具、测量工具或简介面板。

添加元数据

在完成应用程序前,最后一个步骤是添加元数据。 元数据是说明应用程序功能的信息。 所有 ArcGIS Online 项目都具有元数据,可以通过项目页面对其进行访问。

  1. 关闭此应用程序。 在应用程序编辑器的顶部,单击选项按钮,然后选择内容

    内容按钮

    现在,Oso Mudslide Before and After Web 制图应用程序已经在您的内容页面中。 在将应用程序展示给他人之前,需要共享应用程序以及应用程序所基于的地图。 您已经与所有人共享了地图,现在您将共享该应用程序。

  2. 选中 Oso Mudslide Before and After 应用程序旁边的框。

    已选中 Oso Mudslide 应用程序

  3. 在项目列表上方,单击共享。 在共享窗口中,选择所有人(公众)
  4. 单击保存

    共享应用程序后,即可添加元数据。

  5. 单击 Oso Mudslide Before and After Web 应用程序的标题。

    随即显示详细信息页面。 您在创建应用程序之初虽已填入摘要、标签等一些元数据,但应用程序依然没有描述和制作者名单。 而且还使用通用的默认缩略图。

    首先,您将替换默认缩略图。 可将其替换为应用程序的截屏、您选择的图像或者 Learn ArcGIS 网站的图像

  6. 在缩略图上方,单击编辑缩略图

    “编辑缩略图”选项

  7. 创建缩略图窗口中的上传图像下,单击浏览
  8. 浏览到要用作缩略图的文件,然后双击。 在创建缩略图窗口中,单击保存

    接下来将添加描述。

  9. 在项目页面上,单击描述旁的编辑。 复制并粘贴以下描述:

    该地图将显示 2014 年奥索镇泥石流受灾区(估算结果)及灾后影像。 Impact Area Boundary 图层是由遥感影像创建的,并由 FEMA 和 NGA 提供。 Post-Event Imagery 图层是在奥索镇受灾的两天之后拍摄的灾区影像。

  10. 单击保存
  11. 对于使用条款,单击编辑并输入。 单击保存
  12. 在页面一侧的底部,对于制作者 (归属),单击编辑并输入 Esri 灾害响应计划、FEMA、NGA、斯诺克米西镇和华盛顿交通部

    这些组织均参与了最初的数据编译。

  13. 单击保存

    元数据即会添加到项目详细信息中。 您的应用程序现已完成。

在本教程中,您获取了与 2014 年奥索镇泥石流相关的现有影像图层,并将其添加到 ArcGIS Online 的 Web 地图中。 然后您使用 Web AppBuilder 将 Web 地图封装到一个 Web 应用程序中。 您用微件对应用程序进行了自定义,以向用户提供符合您规范的体验。 然后,您共享了地图,并为其提供了元数据。 现在,您的应用程序已经完成,您可以将其展示给受众,并为他们讲述这场灾难。

您可以在教程库中找到更多教程。