创建 Web 应用程序

要为公园网站创建 Web 应用程序,您将使用 ArcGIS Instant AppsInstant Apps 包括一个应用程序模板库和多个配置选项,因此您可以设计一个针对受众需求量身定制的应用程序。

注:

如果需要创建功能来参与公共推广户外娱乐活动,则使用 Recreation Outreach 解决方案。 本教程重点介绍如何创建 Web 和原生应用程序,此处描述的步骤是参与户外娱乐需要考虑的一部分内容。

选择 Web 应用程序模板

首先,您将登录到 ArcGIS Online,并使用 Instant Apps 选择一个合适的模板。

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

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

  2. 在功能区中,单击内容

    内容选项

    转至内容页面,其中显示帐户中的所有内容。 此页面还包含用于创建内容(包括应用程序)的选项。

  3. 单击创建应用程序,然后选择 Instant Apps

    “创建应用程序”菜单中的 Instant Apps 选项

    Instant Apps 库页面随即在新的浏览器选项卡中打开。 库中包含许多应用程序模板,您可以基于模板功能进行过滤。 因为您最终想使用 ArcGIS AppStudio 将 Web 应用程序转换为原生应用程序,所以将搜索具有 AppStudio 兼容性的模板。

  4. 对于搜索应用程序功能,输入 AppStudio,然后选择 appstudio

    AppStudio 作为搜索词的搜索框

    库已过滤至将 AppStudio 兼容性作为功能的模板。 您希望应用程序具备的另一个功能是显示徒步路线的高程。

    使用高程剖面图是显示线性路径(例如小径)高程的一个好方法,此剖面图是景观的二维横截面视图,可描绘高程的上升和下降。 您将进一步过滤库,以显示具有高程剖面图功能的模板。

  5. 对于搜索应用程序功能,输入 Elevation Profile,然后选择 elevation profile

    Elevation Profile 作为搜索词的搜索框

    此功能已添加为过滤器。 现在,库中仅包含一个项目:Nearby 模板。 您将查看应用程序描述,以确认是否为您所需的应用程序。

  6. 对于 Nearby,单击选项按钮并选择应用程序描述

    “应用程序描述”选项

    随即显示包含应用程序文本描述的窗口。 描述指出,此模板基于位置搜索引导用户到达感兴趣点并提供方向指引。 结合了 AppStudio 和高程剖面图功能,此模板似乎正是您帮助公园游客搜索和了解附近徒步路线所需要的。

  7. 在描述窗口中,单击关闭
  8. 对于 Nearby,单击选择
    提示:

    要在选择之前预览应用程序模板,单击示例以查看使用此模板的应用程序示例。

    Nearby 模板的“选择”按钮

    创建应用程序窗口随即显示,其中包含提供应用程序标题和搜索标签的选项。

  9. 对于为应用程序提供标题,输入 Santa Monica Mountains Hiking Trails
  10. 对于添加标签,输入 Los AngelesHikes,需在每次输入后按 Enter 键。
  11. 可以选择用于保存应用程序的文件夹。

    已填写标题和标签的“创建应用程序”窗口

  12. 单击创建应用程序

    应用程序已创建,随即显示应用程序设置页面。

选择地图

接下来,您将配置模板以适应需求。 要执行的第一步是选择要在应用程序中显示的地图。此地图将显示圣莫尼卡山中的徒步路线和小径起点。

  1. 如有必要,关闭欢迎使用应用程序设置页面窗口。

    默认情况下,此应用程序设置页面已设置为快速模式。 此模式包括所有应用程序设置经过简化的一部分,旨在强调最基本的设置并引导您完成配置过程。

    您可以关闭快速模式以查看所有设置,或者根据需要搜索特定设置,考虑到您的目的,使用此模式即可。 第一步是为应用程序选择地图。

  2. 单击步骤 1. 地图

    在步骤 1. “地图”选项

    将选择已为您创建的圣莫尼卡徒步路线 Web 地图。 通常,您可能必须自行创建要在应用程序中显示的地图,但是对于本教程而言,将假设您已创建地图。

    注:

    要了解有关创建 Web 地图的详细信息,请尝试 ArcGIS Online 入门

  3. 单击选择地图

    “选择地图”按钮

    选择地图窗口随即显示。 默认情况下,窗口将显示您拥有的地图。 您将使用的地图由 Learn ArcGIS 管理员帐户所有。

  4. 单击我的内容并选择 ArcGIS Online

    ArcGIS Online 选项

    现在,窗口显示在 ArcGIS Online 上公开共享的所有地图。

  5. 在搜索栏中,输入 Santa Monica Trails Nearby owner:Learn_ArcGIS

    Santa Monica Trails Nearby 搜索

    地图列表过滤为显示单个结果:Santa Monica Trails - Nearby,由 Learn_ArcGIS 所有。

  6. 对于 Santa Monica Trails - Nearby,单击选择地图

    搜索结果中的“选择地图”按钮

    应用程序预览会更新为显示路线地图。

    显示圣莫尼卡山徒步路线和小径起点的地图

配置功能

应用程序不仅可以显示地图。 还包含多种功能,可更改用户与应用程序交互并从中获取有意义信息的方式。 您希望应用程序具备的主要功能为:搜索附近徒步路线的功能、查看路线高程剖面图的功能以及显示路线方向的功能。

首先,您将指定游客用于查找附近徒步路线和小径起点的搜索距离。

  1. 在配置窗格中,单击返回

    “返回”按钮

    您将返回到基本设置列表。 列表上的下一步为关于,您可以进行调整以更改应用程序中的文本,从而帮助用户更好地理解使用方法。 该应用程序已包含默认文本,描述了在地图上查找位置的各种搜索方法,因此您无需更改此设置。

    第三步附近包含应用程序搜索功能的设置。

  2. 单击步骤 3. 附近

    步骤 3. 附近选项

    您将选择要包含在搜索结果中的图层。 您希望用户可以同时搜索徒步路线和小径起点。

  3. 对于结果中包含的图层,选中 SAMO Public Trailheads and Access PointsSAMO Public Trails

    “结果中包含的图层”设置

    默认搜索距离为 2 千米,考虑到公园的面积为 638 平方千米(或约 246 平方英里),此距离并不是很远。 您将增加距离并将测量单位更改为英里。

  4. 对于最大搜索距离,输入 5。 对于搜索单位,选择英里

    “最大搜索距离”和“搜索单位”参数

    您已配置搜索功能。 接下来,您将配置高程剖面图功能,允许游客在选择徒步路线之前查看路线高程。 高程剖面图不在快速窗格的基本设置列表中,因此您将搜索此功能。

  5. 单击搜索设置

    “搜索设置”选项

  6. 搜索设置窗格中,输入高程,然后单击将高程剖面图链接添加到弹出窗口

    “将高程剖面图链接添加到弹出窗口”搜索结果

    因为此设置未显示在快速模式中,在继续操作之前,系统将提示您关闭快速模式。

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

    结果窗格随即出现,包含搜索结果的所有设置。

  8. 打开将高程剖面图链接添加到弹出窗口

    “将高程剖面图链接添加到弹出窗口”选项

    现在,高程剖面图可用于路线图层。

    显示的另一个选项为显示方向的选项。 您希望用户可以看到到达小径起点的方向,因此将启用此选项。

  9. 打开显示方向。 对于要在结果中包含方向链接的图层,选择 SAMO Public Trailheads and Access Points

    “显示方向”选项

    您已启用并配置希望 Web 应用程序具备的所有功能。

完成应用程序

您需要向应用程序添加一些最终更改。首先,将为路线图层创建自定义过滤器,使游客可以专门搜索已铺设道路的公园路线。

  1. 结果窗格中,单击返回
  2. 单击过滤器

    “过滤器”选项

  3. 打开启用过滤。 对于选择图层,选择 SAMO Public Trails

    “启用过滤”和“选择图层”参数

  4. 对于自定义过滤器,单击添加过滤器

    要添加过滤器,您将创建表达式。 路线图层包含路线类型的属性信息,因此,您可以使用该信息创建按已铺设公园道路路线类型过滤的表达式。

  5. 单击添加表达式

    “添加表达式”按钮

  6. 创建表达式 Type is Paved park road

    内容为 Type is Paved park road 的表达式

    您还将命名过滤器。 名称将显示在应用程序中,因此需要解释其过滤条件。

  7. 对于过滤器显示名称,输入已铺设公园道路

    “过滤器显示名称”参数

  8. 单击保存

    您将添加的另一个小功能是一个按钮,用户可以通过此按钮切换底图,以显示该区域的卫星影像。 对于想要更好地了解地形真实外观的用户而言,此功能很有帮助。

  9. 在配置窗格中,单击交互性

    配置窗格中的“交互性”选项

  10. 交互性窗格中,单击修改
  11. 打开底图切换。 对于选择底图,单击影像

    “底图切换”和“选择底图”选项

    您的 Web 应用程序已完成。 其中包含您需要的所有功能,甚至提供更多有助于游客规划徒步行程的功能。

发布应用程序

您现在要做的就是发布应用程序并将其共享,以供所有人查看。

  1. 单击发布按钮。

    “发布”按钮

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

    随即显示一个窗口,询问您是否对高级内容进行授权。 因为 Santa Monica Mountains Hiking Trails 图层具有路径选择功能,所以是高级服务。

    如果您未授权高级内容,则没有 ArcGIS 帐户的用户在使用您的应用程序时可能无法看到路线图层。如果您授权高级内容,那么每次有用户查看该应用程序时,都会消耗您组织的配额。 除非确定您的组织可以承受成本,否则您不应授权高级内容。

    在此情景中,您是效力于政府机构的官员,因此希望授权高级内容,以便所有用户都可以查看应用程序的内容。 但是,考虑到本教程的目的,您将使高级内容保持未授权状态,以避免不必要的配额消耗。

  3. 授权高级内容窗口中,单击不授权,继续

    您的应用程序已发布。 共享窗口随即出现,显示用于共享应用程序的选项。当前,应用程序未共享。 您要将其与公众共享,以供所有人查看。

    注:

    考虑到本教程的目的,您选择了不授权高级内容,因此没有 ArcGIS 帐户的用户可能无法在应用程序中查看路线图层。

  4. 单击更改共享设置

    “更改共享设置”选项

  5. 共享窗口中,选择所有人。 单击保存
  6. 单击查看应用程序

    您的 web 应用程序已完成并将显示在新浏览器选项卡中。 所有具有应用程序 URL 的用户都可以进行访问。

    接下来,您将配置与 Web 应用程序功能完全相同的原生应用程序。 配置原生应用程序时,您希望基于 Web 应用程序,因此需要从 URL 中复制 Web 应用程序的 ID 以供稍后引用。

  7. 可以选择性地测试一些应用程序功能,例如搜索栏或过滤器。
  8. 在 URL 中,复制 id= 之后的字母数字字符串。

    URL 中的 ID

  9. 将 ID 粘贴到易于再次访问的位置,例如 Notepad 文档,然后关闭应用程序。

    稍后,您将在教程中使用此 ID。

您已使用 Instant Apps 成功创建并发布了 Web 应用程序。


创建原生应用程序

您已创建一个 Web 应用程序,可供公园游客在到达前在线访问。 但是,即使用户已经开始徒步旅行,此应用程序的许多功能仍十分有用。 为了适应这些用户,您将创建一个可安装到智能手机上并离线使用的原生应用程序。 此应用程序将包含与 Web 应用程序相同的功能,以及使用智能手机硬件的附加自定义功能(例如文本转语音)。

注:

要使应用程序离线工作,您的 Web 地图必须包含离线区域。 要了解如何创建离线区域,请参阅教程执行普查摸底调查

选择原生应用程序模板

要创建原生应用程序,您将使用 ArcGIS AppStudio 并选择创建 Web 应用程序时使用的模板。

  1. 打开 ArcGIS AppStudio
    注:

    如果您没有 ArcGIS AppStudio,则可以从 ArcGIS AppStudio 资源页面免费下载。 运行下载的文件以打开安装向导。 按照向导的说明安装软件。

  2. 单击登录,然后选择登录

    “登录”选项

  3. 使用您的 ArcGIS 帐户登录。
  4. 单击新建应用程序

    “新建应用程序”按钮

    注:

    如果您从未在 AppStudio 中创建应用程序,新建应用程序按钮的位置可能与示例图像不同。

    随即显示新建应用程序窗口。 其中会列出多个应用程序模板和样式。 您要选择 Nearby 模板,即用于创建 Web 应用程序的模板。

  5. 单击模板选项卡。

    “模板”选项卡

  6. 在模板列表中,单击 Nearby 模板。

    Nearby 模板

    随即显示所选模板的摘要和描述。

  7. 在描述下,单击创建

    应用程序随即创建,与其他应用程序一同列出。 如果这是您首次使用 AppStudio,则其将为唯一的应用程序。 侧窗格将提供有关应用程序的详细信息,其中包括其名称。

  8. 在应用程序列表中,确认已选择您的新应用程序。 在侧窗格中,单击编辑标题按钮。

    编辑标题按钮

  9. 将标题更改为 Santa Monica Trails,然后单击保存更改按钮。

    “保存更改”按钮

配置设置

您希望应用程序的设计代表组织或应用程序的功能。 要增加应用程序的视觉感染力和信息价值,您需要添加图像、描述和图标。 然后,您将使用 Web 应用程序的 ID,以将其功能添加到原生应用程序。

  1. 下载 images 压缩文件夹。
  2. 将 images 压缩文件夹提取至计算机上可轻松记住的位置,例如 Documents 文件夹。

    该文件夹包含三张图像,您将使用它们为您的应用程序赋予独特而一致的标识。

  3. AppStudio 的应用程序列表中,确认已选择 Santa Monica Trails 应用程序。 在侧窗格中,单击设置

    设置按钮

    随即显示 AppStudio 设置窗口。 首先,您将更新缩略图。

  4. AppStudio 设置窗口的详细信息选项卡中,单击默认缩略图。

    默认缩略图

  5. 打开窗口中,浏览至所下载文件夹中的 thumbnail-santa-monica-trails 图像并双击。

    Santa Monica Trails 缩略图

    随即将显示一条消息,说明此图像的副本将替换您的当前缩略图。

  6. 单击

    缩略图已替换。 接下来,您要将应用程序的摘要更改为传达应用程序用途的标语。

  7. 对于摘要,删除现有文本并输入 Discover - Hike - Enjoy

    您还将添加一个图标以在智能手机和其他设备上表示该应用程序。

  8. 单击资源选项卡。 对于应用程序图标,单击默认图标。

    默认图标

  9. 选择图像窗口中,浏览至所下载文件夹中的 icon-santa-monica-trails 图像并双击。

    Santa Monica Trails 图标

  10. 复制文件窗口中,单击

    随即添加图标。 您还将添加背景图像。

  11. 单击属性选项卡。 在启动屏幕选项卡上,对于背景图像,单击默认背景图像。

    默认背景图像

  12. 打开窗口中,浏览至所下载文件夹中的 background-santa-monica-trails 图像并双击。

    Santa Monica Trails 背景

  13. 复制文件窗口中,单击

    随即添加背景。 您将更改应用程序的主色以匹配图像的绿色。

  14. 对于标识颜色,输入 #339689

    标识颜色已设置为 #339689

  15. AppStudio 设置窗口的底部,单击应用

    您的更改已应用。 AppStudio 设置窗口保持打开状态。 您将使用此窗口将 Web 应用程序的 ID 添加到原生应用程序。这样,用户即可在使用原生应用程序时访问 Web 应用程序的功能。

  16. AppStudio 设置窗口的属性选项卡上,单击图库选项卡。
  17. 对于 Nearby Web 应用程序,删除现有文本并粘贴 Web 应用程序的 ID。在 ID 的开头处添加 id:

    “Nearby Web 应用程序”选项

  18. 单击应用。 设置应用完成后,关闭 AppStudio 设置窗口。

在桌面上测试应用程序

您已配置并自定义应用程序。现在,将在计算机上进行测试。

  1. AppStudio 中,确认已选择 Santa Monica Trails 应用程序。 在侧窗格中,单击运行

    “运行”按钮

    您的应用程序随即在新窗口中打开。

    桌面上的原生应用程序

    桌面应用程序的行为与应用程序在智能手机上的运行方式相似。

  2. 单击开始

    应用程序将显示来自 Web 应用程序的路线和小径起点地图。 说明解释了找到附近感兴趣点的方法。

    桌面上的原生应用程序显示路线和小径起点的地图

  3. 放大和缩小该地图。
  4. 单击地图中的任意位置。

    单击地图时将显示一个图钉,周围显示 5 英里的搜索半径。 该半径范围内的所有路线和小径起点都将在应用程序底部列出。

    包含 5 英里搜索半径的原生应用程序

  5. 如有必要,单击地图或滚动查看附近路线,直到路线列于应用程序底部。 对于路线,单击高程

    高程按钮

    地图随即缩放到路线并显示高程剖面图,此剖面图可显示整条路线的高程变化。

    原生应用程序中的高程剖面图

  6. 关闭高程剖面图。 对于您刚刚查看的同一路线,单击详细信息

    “详细信息”按钮

    随即显示更多关于路线的信息。

  7. 关闭详细信息页面。 在地图上,单击一个小径起点(由带有旅行者的黑色方形表示)。
  8. 对于小径起点,单击详细信息

    每个小径起点的详细信息页面都包含一个方向按钮。 此按钮将显示到达小径起点的路径选择信息。 考虑本教程的目的,您不会添加密钥,但可以参阅为应用程序提供 Lite 级别许可主题以了解详细信息。

    当用户在智能手机上运行应用程序时,他们将看到基于其智能手机功能的路径选择替代选项。

  9. 关闭 Santa Monica Trails 应用程序。

使用代码自定义应用程序

Nearby 模板已包含实用原生应用程序所需的所有代码。但如果您希望应用程序具备更多功能,该如何呢? 通过更改应用程序代码,您可以添加一些仅使用模板无法实现的功能。

接下来,您将编辑应用程序的代码,以添加文本转语音功能。 此功能将允许该应用程序使用智能手机硬件来读出最近的小径起点的名称和距离。

  1. AppStudio 的应用程序列表中,确认已选择 Santa Monica Trails 应用程序。 在侧窗格中,单击编辑

    编辑按钮

    Qt Creator 随即打开,显示与应用程序关联的代码文件。 Nearby 模板包含使用 Qt Modeling Language (QML) 的文件,该语言旨在创建以用户界面为中心的应用,例如应用程序。

    您将向其中一个 QML 文件添加一个新的 QML 组件。

  2. 如果出现快速 UI 浏览窗口,则单击取消
  3. 工程窗格中的 Nearby 文件夹中,展开 Nearby 文件夹和 views 文件夹。 双击 NearbyMapPage.qml 文件。

    NearbyMapPage.qml 文件

    文件随即显示在 Qt Creator 的编辑器窗格中。 该文件的第 17 到 31 行涉及导入运行其余代码所需的各种库和框架。 首先,您将添加一行以导入允许文本转语音功能的应用程序框架。

  4. 在第 28 行 (import ArcGIS.AppFramework.Platform 1.0) 之后,按 Enter 键以添加一行。 在新的行 (29) 中,添加以下代码:
    import ArcGIS.AppFramework.Speech 1.0

    第 29 行的导入代码行

    接下来,您将添加一个使用文本转语音功能的 QML 组件。 您将为该组件指定 ID tts(文本转语音),以便在用户搜索路线时进行引用。

  5. 滚动至第 124 行。 添加以下组件(确保保留缩进):
    TextToSpeech {
        id: tts
    }

    TextToSpeech 组件

    在搜索期间查询地图图层后,您将引用新的 QML 组件。 当用户完成对附近路线的搜索时,文本转语音功能将读出路线的名称及其距离。

    您的代码将使用添加的 tts 组件和 say 组件,该组件会提示文本转语音功能读出某些内容。 您的代码将结合对地图上要素属性的引用和文本字符串来定义所读出的内容。

  6. 滚动至约 2600 行 (//if results are not empty)。 根据您添加前几行的方式,行号可能会略有不同。

    这部分代码定义了如果搜索完成并且具有有效结果时要执行的操作。

  7. mapPageCarouselView.highlightResult(mapView.featuresModel.get(0).initialIndex); 一行(大约第 2606 行)后,按 Enter 键。 在空行中,粘贴以下代码:
    tts.say(mapView.featuresModel.get(0).search_attr + " is " + mapView.featuresModel.get(0).distance + " miles away");

    读出搜索结果的组件

    提示:

    或者,按下 Ctrl+F 键以查找或搜索特定单词。

  8. 在功能区上,单击文件并选择保存“NearbyMapPage.qml”
    提示:

    或者,按 Ctrl+Shift+S 以保存更改。

  9. Alt+Shift+R 运行工程。

    工程随即运行并显示一个窗口,其中包含有关代码的常规消息。 工程运行完成后,将显示应用程序的桌面版本。

  10. 如果您的桌面具有文本转语音功能,请启动应用程序并单击路线附近的地图。 (确保桌面的音量已打开。)

    现在,当您在具有文本转语音功能的设备上运行该应用程序时,设备会大声读出最接近的搜索结果。

  11. 关闭应用程序的桌面版本。

上传应用程序

应用程序即已完成。 您需将其上传到 ArcGIS 组织。 然后,可以选择性地在移动设备上进行测试。

  1. AppStudio 中,确认已登录到 ArcGIS 帐户。
  2. 在应用程序列表中,确认已选择 Santa Monica Trails 应用程序。 在侧窗格中,单击上传

    “上传”按钮

    随即显示 AppStudio 上传窗口。 此窗口提供与您的组织或公众共享路线的选项。 目前,您不会共享该应用程序,尽管在实际场景中您最终希望将其公开共享。

  3. AppStudio 上传窗口中,单击上传

    上传完成后,将显示一条消息通知您上传成功。 如果您稍后对应用程序执行更改,则可以通过再次上传来更新应用程序。

  4. 关闭 AppStudio 上传窗口。

    可以选择性地在移动设备上测试应用程序。

  5. 在 Android 或 iOS 移动设备上,从 Google PlayApple App Store 下载并安装 ArcGIS AppStudio Player
    注:

    您还可以创建应用程序安装文件 .apk(适用于 Android)和 .exe(适用于 Windows),以在设备上安装原生应用程序。 对于任何 AppStudio 应用程序,上述步骤都是相同的。您可以按照使用 ArcGIS AppStudio 构建 311 移动应用程序教程的创建应用程序安装文件一节中介绍的步骤执行操作。

  6. 打开 AppStudio Player
  7. 单击登录。 对于 ArcGIS Online,单击登录,然后使用您的 ArcGIS 帐户登录。

    随即显示您的应用程序列表。 列表包含您的路线应用程序。

  8. 对于 Santa Monica Trails 应用程序,单击下载按钮。
  9. 应用程序下载完成后,单击以将其打开。
  10. 在应用程序中,单击路线旁边的地图并搜索附近路线。 确认设备已读出卡片轮播中的第一条结果。 (您可能需要打开设备音量。)

通过一个 Web 地图,您创建了一个可在浏览器中使用的 Web 应用程序和一个可在智能手机上运行的自定义原生应用程序。 国家公园的访客可以使用您的应用程序更高效地规划行程。

您可以使用 Instant AppsAppStudio 创建各种用途的应用程序。 试用一些其他的应用程序模板,以针对您和受众的需求量身定制吸引人的交互式应用程序。

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