ArcUser 2021 秋季

克里斯蒂安·埃肯斯

数据驱动的地图回答有关位置数据的问题，例如在哪里？什么？多少？什么时候？数据驱动的地图通常从单个数据快照中讲述一个故事。例如，使用 2020 年美国人口普查数据的地图将仅反映 2020 年 4 月 1 日的美国人口状况。

图 1. 单个飓风通常由多个位置表示，每个位置都有唯一的时间戳。每个位置都是图层中的一个要素，在动画播放时被过滤，呈现出随着时间的推移沿着路径移动的单一飓风的外观。

然而，数据驱动的动画可以提供更广阔的视角。它们可以让您看到数据如何随时间变化。动画不仅仅是回答基本的“在哪里？什么？多少？什么时候？单个时间范围内的问题来回答问题，例如

    · 这座城市是如何发展到今天的规模的？

    · 与 50 年前相比，地球变暖的速度有多快？

    · 20年后地球上的人口会是什么样子？

使用 ArcGIS API for JavaScript，您可以创建分为三类的动态和交互式数据驱动动画：

    · 几何动画

    · 分发动画

    · 属性动画

每个类别都有一个特定的数据结构和代码模式，用于逐步执行动画序列。为每个类别提供了用例、数据结构和代码模式。

图2. 地震代表了在转瞬即逝的不同地点发生的一系列事件。几何动画非常适合制作地震前震和余震的动画。

几何动画

此类别通过过滤特征可见性来制作动画。几何动画可视化随时间改变位置或几何的特征。飓风随时间推移的位置、火场边界的变形边界或显示为沿路径移动的点的车辆路线都是几何动画的示例。这种类型的动画也可以用来表示转瞬即逝的事件，例如地震，这些事件发生在一个单一的时刻，但通常与其他类似事件一起发生。

图 3. 几何动画必须由数据源驱动，该数据源包含地图中相关主题的每个事件（时间戳和位置）的一个特征。在此示例中，热带风暴 Gritelle 在表中以六行形式表示 - 每行都有不同的位置和时间，代表其六个记录位置。

数据结构

几何动画中使用的数据将地图的主题（例如，飓风）表示为表格中的一行或多行，每行都包含唯一的几何图形和时间戳。在飓风示例中，一场飓风可能具有 20 个或更多关联特征，每个特征都位于不同的位置和时间。

代码模式

要可视化随时间改变位置的要素，您必须根据预定义的时间间隔过滤图层视图中的要素，并在每个动画帧上更新该过滤器。幸运的是，在这种情况下，TimeSlider 小部件为您完成了所有繁重的工作。您所做的只是为滑块提供对将发生动画的视图的引用，并设置图层或其关联服务的时间信息，如清单 1 所示。

清单1

当用户单击滑块上的播放按钮时，滑块会根据滑块拇指位置管理过滤。在飓风应用程序中，单击“播放”会使用一系列过滤器更新图层视图，使每个飓风看起来就像沿着一条路径移动一样。

在这个动画中，图层的渲染器（或样式）是固定的。动画 GIF 表示每个飓风的每个位置。每个图标的大小都根据飓风的类别编号进行缩放，如清单 2 所示。

清单2

分布动画

分布动画通过更改颜色断点或停止点，随着时间的推移累积特征，将它们的分布可视化。与几何动画不同，此技术不涉及移动特征。它只是显示静态要素添加到地图的位置和时间。这是一种可视化增加和减少以及显示变化是快速发生还是缓慢发生的好技术。

例如，您可以使用此方法通过动画显示自城市成立以来建造建筑物的时间来显示城市的发展。您可以使用颜色来突出显示持续存在且不会转瞬即逝（如地震）的要素的增长率。

图 4：（左）1900 年在纽约市建造的建筑物。大量亮蓝色的建筑物脚印表明建筑的快速增长。（中）这张地图中蓝色的缺失表明 1940 年的建筑增长缓慢。（右）2007年，整个城市的建筑有零星、温和的增长。

图 4 中的示例不仅显示了纽约市建筑物的建造时间，还显示了它们每年的建造速度。随着滑块逐年推进，建筑物颜色会发生变化。每栋建筑在其建造年份都闪烁着亮蓝色。随着应用程序中当前时间的继续推进，它逐渐淡化为深紫色。更多的蓝色区域表示更快的增长。更多的紫色区域表示增长缓慢或没有增长。

数据结构

当您有一个图层或表时，这种动画样式很有效，其中每个要素都代表地图中的一个对象，例如建筑物，如图 4 所示。每个要素都用单个静态几何图形表示，并包含一个日期字段，其中包含创建特征的日期或顺序。或者，每个要素都可以有一个包含年份或序列号的数字字段。

代码模式

清单 3 中显示的应用程序代码不是通过累积过滤数据来显示功能的增长，而是首先在浏览器中加载所有数据，并为其分配一个将在每个动画帧上更新的样式。

动画从 1880 年开始，这是数据集中最古老的一年。对于每个动画帧，更新基线年份，以便突出显示与滑块上的年份匹配的特征，并调用一个函数来根据该年份更新图层的色标。请注意，对日期值（即 CNSTRCT_YR）的引用和渲染器中的颜色保持不变。但是，随着当前年份的变化，所有色标都会以 10 年和 50 年的恒定间隔与更新的年份相抵消。停止值的不断增加会产生平滑的动画。在整个动画过程中，停止之间的间隔必须保持恒定。

属性动画

属性动画更改渲染器的数据或属性值。在这些动画中，要素具有固定的位置，并使用图层属性值随时间的变化进行动画处理。例如，您可以使用此技术为以下内容设置动画：

    · 代表气象站的图层中一天中的温度变化

    · 一层县中每天 COVID-19 病例数的变化

    · 使用网格图层中的数据进行气候变化，其中每个要素代表一个位置，其温度记录已超过 120 年

数据结构

属性动画要求每个特征由表中的单行表示，表中的多列包含以不同时间戳或间隔记录的属性值。通常，每一列名称都反映了变量以及记录它的时间或日期（即，每个时间间隔每个变量一个字段）。例如，要为网格图层的温度异常数据设置动画，图层中的每条记录都将具有几何形状以及包含每个记录年份的异常值的列。如果您想对大量数据进行动画处理，这可能会导致表格非常宽。作为替代技术，如果值之间的间隔是恒定的，您可以将多个值存储为单个列中的管道分隔列表。然后，您可以使用 ArcGIS Arcade 表达式解析所需的值。

代码模式

要在静态几何图形中为不断变化的属性设置动画，您必须在每个动画帧上更新图层的渲染器（在此动画场景中可以使用任何渲染器）。属性动画技术与分布动画明显不同，除了对数据值的引用之外，您必须在动画中保持所有渲染器断点、停止点和其他属性不变。

保持渲染器的属性不变非常重要，这样您就可以轻松比较帧之间每个特征的变化。例如，如果您更改了特定颜色所代表的值，则动画将无法阅读并且不会向观众传达任何信息。

在这种动画技术中，每个动画帧都会调用一个函数来获取对渲染器的引用。然后，此函数将滑块的年份或日期与图层中的相应字段进行匹配，并将该新字段名称发送回渲染器。渲染器的这种轻微更改将刷新地图，更新可视化以表示新的数据值集。

由于所有数据值都在 GPU 中的要素顶点上进行编码，因此您可以简单地引用序列中的下一个值，以创建具有非常快的性能（高达每秒 60 帧）的流畅动画。

该动画显示了 (a) 2020 年 5 月 1 日每 100,000 人中活跃的 COVID-19 病例；(b) 2020 年 8 月 1 日；(c) 2020 年 11 月 1 日；(d) 2020 年 12 月 1 日。表中的每一行代表一个县，每一列代表一天的 COVID-19 病例数。

结论

随着过去几年 ArcGIS API for JavaScript 的性能和绘图改进，您现在可以使用您在要素图层、CSV、GeoJSON 和 OGC 图层中拥有的数据创建流畅、动态、交互式和高性能的数据驱动动画。如果您不确定哪种动画技术适合您，请查看表 1。

表格1

总结表 2 总结了用于在 ArcGIS API for JavaScript 中创建动画的每种技术、数据结构和编码模式。

表2