创建新体验

在 ArcGIS 中,可以使用 ArcGIS DashboardsArcGIS Instant AppsArcGIS StoryMaps 创建 web 应用程序。 对于本工程,您将选择 ArcGIS Experience Builder 来构建您的应用程序,因为它为您提供了对布局的最大控制权和自定义。

注:

您可以在我选择哪个应用程序构建器?一文中了解有关在不同情况下使用哪个应用程序构建器的详细信息。

使用 Experience Builder 构建的 web 应用程序也称为 web 体验。 您将首先使用空白全屏模板创建新体验。

  1. 打开 ArcGIS Online 或者您的 ArcGIS Enterprise 门户。
  2. 登录到您的 ArcGIS 帐户。
    注:

    如果您没有 ArcGIS 帐户,请参阅软件访问权限选项

  3. 在页面顶部您的用户名旁,单击应用程序启动器按钮。

    “应用程序启动器”按钮

  4. 单击 Experience Builder

    应用程序库中的 Experience Builder

    ArcGIS Experience Builder 随即显示在新选项卡中。

  5. 单击新建按钮。

    选择要启动的模板页面将显示可用于创建常见布局设计的模板列表。 在本教程中,您将从空白模板开始,但仍需选择页面类型:全屏、格网或滚动。 您将选择全屏,因为它对于以地图为主要焦点的应用程序来说是一个不错的选择,并且因为它为您提供了对布局的最大控制权和自由度。 此类型允许在画布的任意位置放置微件,即使相互重叠。

  6. 空白全屏卡片上,单击创建

    Blank fullscreen 模板上的创建按钮

    注:

    如果出现入门窗口,请单击跳过导览

    画布随即出现,您将在此处构建您的 web 应用程序。

  7. 在页面顶部的构建器工具栏上,单击无标题体验。 清除现有文本并键入 American River Marine Estuary

    体验标题

    在画布旁边,插入微件窗格已打开。 此窗格将列出您可以添加至布局的所有元素(称为微件)。

  8. 滚动到插入微件窗格的底部并找到布局部分。

    布局微件是允许您更好地组织页面上的其他微件的容器。 它们将使您的布局保持整洁,并随着屏幕大小的变化而始终保持整洁。 设计布局的最简单方法是先添加和排列布局微件,然后再添加其他微件。

  9. 插入微件窗格中,将微件拖动到画布上。

    将“行”微件从“插入微件”窗格拖动到画布上

  10. 在画布上“行”微件的工具栏上,单击对齐按钮,然后单击全尺寸

    “对齐”菜单中的“全尺寸”选项

    “行”微件随即展开以填充整个画布。

添加带有两个地图的地图微件

您已经制作了两张海洋河口地图,现在您需要在体验中展示这些地图。 接下来,您将添加一个地图微件并使用两个地图对其进行配置。

  1. 插入微件窗格中,滚动回窗格顶部,然后单击地图微件。 将其拖放到画布上的“行”微件内。

    将“地图”微件从“插入微件”窗格拖动到画布上

    默认地图随即出现在画布上。

  2. 拖动“地图”微件的左边缘或右边缘。

    随即出现垂直虚线。 “行”微件并排将内容组织到 12 个相等的空间中。

  3. 拖动地图的边缘,直到其填满该行中除了最左侧两个空间之外的所有空间。

    “地图”微件填充了行中 12 个空间中的 10 个空间

    您将为图例和其他微件保留左侧两个空间。

    在画布的另一侧,可以看到地图窗格,其中显示了所选微件的属性。 接下来,您将使用之前为此工程创建的两张地图来填充“地图”微件。

  4. 地图窗格中,单击选择地图

    “地图”窗格中的“选择地图”按钮

  5. 选择数据窗格的底部,单击添加新数据
  6. 添加数据窗口中,单击 ArcGIS Online 选项卡。 在搜索栏中,键入 American River owner:Learn_ArcGIS

    ArcGIS Online 选项卡和搜索栏

  7. 在搜索结果中,单击 Tidal classCover type 卡片。

    已选择 Tidal class 和 Cover type 地图

    所选地图上将显示复选标记。

  8. 单击完成

    随即将两个地图添加至选择数据窗格。

  9. 选择数据窗格中,单击 Cover typeTidal class

    Tidal class 和 Cover type 地图已添加至“地图”窗格

    随即将两个地图添加至地图窗格。 在画布上,“地图”微件现在显示了其中一张河口地图,而非之前显示的默认世界地图。 比例过小:河口在画布中央显得很小。 您将更改“地图”微件的默认范围。

  10. 地图窗格中的初始视图下,单击自定义。 单击修改

    “修改”按钮

  11. 修改初始视图窗口中进行平移和缩放,以使河口在视图中居中。

    “修改初始视图”窗口

  12. 单击确定

    在画布上,地图将缩放至已定义的比例和位置。

查看地图

接下来,您将查看两张地图并测试它们之间的切换。

  1. 在构建器工具栏上,单击实时视图

    “实时视图”按钮

    在实时视图中,您可以像用户一样与画布进行交互,而非选择微件。

  2. 在地图微件的左下角,单击“切换地图”按钮可以显示另一张地图。

    “切换地图”按钮

  3. 如有必要,请再次单击“切换地图”按钮,直到显示 Tidal class 地图(包含影像)为止。

    Tidal class 地图

    此地图定义了河口的潮间带、潮上带和搁浅潮汐区。 河口是一种湿地。 它们是沿海水体,通常将河流中的淡水与大海连接处的盐水混合。 这种混合可提供许多营养物质,由此产生了高水平的生物多样性。

    此河口名为美洲河,位于南澳大利亚的袋鼠岛。 这里是滨鸟、海鸟和鱼类的重要栖息地,包括鹈鹕泻湖保护公园。 但是,它正面临着日益发展、旅游业和养分载荷的威胁。

    注:

    您可以在南澳大利亚州政府环境与遗产部编写的袋鼠岛自然资源管理区:河口信息包报告中了解有关袋鼠岛美洲河和其他海洋河口的详细信息。

  4. 再次单击切换地图按钮可查看 Cover type 地图。

    Cover type 地图

    该地图显示了覆盖河口每个区域的主要植被或沉积物类型。 您可以在第一张地图上包含此信息,但其在单独的地图中更易于阅读。 在单张地图中包含的信息越多,则越难解释信息。 通常,最好的解决方案是制作第二张地图。

  5. 在地图上进行缩放和平移。
  6. 在地图的左上角,单击默认地图视图按钮。

    “默认地图视图”按钮

    地图将返回到您已配置的初始视图。

    注:

    如果您在屏幕上看不到完整布局,请单击 Experience Builder 右下角的调整宽度适应当前窗口按钮。

    调整宽度适应当前窗口按钮

配置地图工具

默认地图视图按钮是地图工具的示例。 接下来,您将配置其他工具,这些工具将显示在“地图”微件的顶部。 请花点时间考虑您的应用程序需要的内容。不要仅仅因为可以就向布局中添加内容:您应该始终能够解释为什么需要添加内容。 不必要的元素只会分散地图信息的注意力,甚至可能让地图阅读者感到困惑。

  1. 地图窗格中的工具下,关闭搜索工具。

    “搜索”工具已关闭

    搜索按钮将从地图中消失。 河口没有任何城镇或街道名称可供搜索,因此不需要搜索栏。

    罗盘工具是指北针。 并非每张地图都需要指北针,web 地图比静态地图更不可能需要指北针,因为用户可以缩小地图,直到找到可识别的地理位置为止。 但是,此应用程序将主要显示在触摸屏设备上,因此用户更有可能意外旋转地图。 可以通过添加指北针,用户可以更加轻松地重新定位地图。

  2. 工具下,打开罗盘工具。

    罗盘按钮将显示在地图上的默认地图视图按钮下方。

    地图上的“罗盘”工具

    借助图层底图工具,用户可以更改可见图层以及使用的底图。 当用户需要对其探索进行大量控制以制定决策时,这些选项将非常有用。 在本例中,您正在尝试讲述一个有关河口的受控故事。 为用户引入更改地图的方法会消除您的一些控制,并且可能会分散对消息的注意力。 您将不会包含图层底图工具。

    您的用户无需计算面积或距离,因此您也不会包含测量工具,但用户对河口的了解将受益于更好地了解其大小。 由于地图上帮助用户直观确定比例的视觉指示器相对较少,因此您将添加比例尺。

  3. 打开比例尺工具。

    “比例尺”工具已打开

    比例尺将显示在地图底部。

    地图上的比例尺

    注:

    您可以在“地图”微件帮助页面上阅读有关所有地图工具的信息。

  4. 在构建器工具栏上,关闭实时视图

    您无法通过规则来确定地图上应包含的工具。 您必须根据地图的目的、受众、消息以及地图的使用方式对每一项提出质疑。

添加带有标题的页眉

在 web 应用程序内显示地图的优势之一是能够自定义突出显示的地图标题。 您将为布局创建页眉并为标题添加文本微件。 可以在页面窗格上启用页眉和页脚。

  1. 在侧面工具栏上,单击页面按钮。 在随即出现的窗格中,单击突出显示的页面元素。

    “页面”窗格中的“页面”元素

    页面窗格将出现在画布的另一侧,其中显示了页面的属性。

  2. 页面窗格中,打开页眉切换按钮。

    “页眉”已打开

    画布顶部将显示蓝色页眉。 “行”微件将向下移动以容纳页眉。 页眉的默认蓝色在您的两个地图中均未显示。 为了形成一致且内聚的布局,请坚持使用有限的调色板,例如,重复地图中使用的颜色。

    您的两张地图都非常丰富多彩,您希望它们脱颖而出。 针对布局的非地图元素使用诸如黑色、白色和灰色等中性颜色将有助于地图脱颖而出。 黑色是一种中性颜色,也是地图中使用的颜色,因此它是适用于页眉的不错选择。

  3. 页面窗格中,单击填充旁的蓝色方块。 在标准颜色下,单击黑色方块。

    “填充”颜色菜单中的黑色

    页眉颜色随即更新。 接下来,您将为标题添加一个文本微件。

  4. 在画布上,指向页眉。 单击编辑页眉

    “编辑页眉”按钮

  5. 在侧面工具栏上,单击插入按钮。

    “插入”按钮

    插入微件窗格随即出现。

  6. 插入微件窗格中,单击以地图为中心旁的箭头以折叠此部分。

    “以地图为中心”部分的折叠按钮

  7. 同时折叠以数据为中心部分。
  8. 页面元素下,单击并拖动文本微件。 将其拖动到画布上并将其放到页眉上。

    将“文本”微件从“插入微件”窗格拖动到页眉上

    “文本”微件随即出现在画布上,并且将显示文本窗格。 默认情况下,文本将为黑色,其在标题的黑色背景下将不可见,因此在键入任何文本之前,请将其颜色更改为白色。

  9. 文本窗格的文本格式下,单击字体颜色按钮。 在标准颜色下,单击白色方块。

    文本颜色菜单中的白色

  10. 单击粗体按钮。

    “粗体”按钮

  11. 在画布上,双击文本微件并键入 American River Marine Estuary。 按 Enter 键并键入 Kangaroo Island, South Australia

    接下来,您需要增大文本的顶行。

  12. 双击文本的顶行以将其选中。 在随即出现的工具栏中,将字号更改为 25,然后按 Enter 键。

    “字号”设置为 25

    现在,文本微件不够大,无法显示完整标题。 您需要扩大其大小以填充页眉。

  13. 文本窗格中,单击样式选项卡。
  14. 单击样式选项卡正下方的选项按钮,然后单击全尺寸

    “选项”菜单中的“全尺寸”选项

    将文本微件设置为采用页眉的全尺寸将确保标题将始终具有最大可能空间以显示其文本。 当在较小的屏幕上查看应用程序时,这一点将变得更加重要。

  15. 单击地图旁的“行”微件的空白部分可以停止编辑页眉。

    到目前为止创建的体验的完整视图

  16. 在构建器工具栏上,单击保存按钮。

    “保存”按钮

在本教程中,您使用 ArcGIS Experience Builder 创建了一个 web 应用程序。 该应用程序包含带有标题的页眉和一个“行”微件,其中“行”微件包含一个带有两张地图和多个地图工具的“地图”微件。 您学习了一些对于设计 web 应用程序布局非常重要的设计概念,例如,如何为非地图元素选择颜色以及如何确定要包含的工具。 请参阅本系列中的下一个教程:排列具有多个微件的 Web 应用程序布局,以了解如何向 American River Marine Estuary 体验添加图例、书签和卷帘微件。