时间

查看演示

使用简单渲染器、视觉变量和聚类来样式化事件，以显示要关闭的天数

什么是时间样式？

时间样式包括涉及日期/时间数据的所有可视化效果。您可以使用这些样式来可视化事件发生的时间和地点。常见示例包括：

时间线
之前和之后
期限
几何动画
属性动画

示例

时间线

时间线可视化效果使用连续色带显示日期/时间数据。它提供了一个即时视图，表示现象发生的时间或相对于所有其他数据点记录值的时间。

以下示例显示了 2000 年大西洋中的飓风位置。它使用颜色视觉变量来显示哪些飓风发生在季节早期，哪些飓风发生在季节后期。

查看演示

展开
代码块使用深色复制
          visualVariables: [{
            type: "color",
            field: "Date_Time",
            legendOptions: {
              title: "Date of observation"
            },
            stops: [
              { value: new Date(2000, 7, 3).getTime(), color: "#00ffff"},
              { value: new Date(2000, 9, 22).getTime(), color: "#2f3f56"}
            ]
          }]
 
展开

之前和之后

您可以使用具有发散色带的颜色视觉变量来可视化特定日期之前和之后发生的事件。

以下示例可视化了飓风位置的聚类，这些聚类按它们平均发生在 1977 年 1 月 1 日之前还是之后进行汇总。

查看演示

展开
代码块使用深色复制
          visualVariables: [{
            type: "color",
            field: "ISO_time",
            legendOptions: {
              title: "Before and after July 1"
            },
            stops: [
              { value: new Date(2013, 0, 1).getTime(), color: colors[0], label: "January 1" },
              { value: new Date(2013, 6, 1).getTime(), color: colors[1], label: "July 1" },
              { value: new Date(2013, 11, 31).getTime(), color: colors[2], label: "December 31" }
            ]
          }]
 
展开

期限

期限可视化根据日期字段显示要素的期限（或到有意义日期或当前日期的已用时间）。期限可视化可应用于以下情景：

资产投入使用多久了？
事件报告有多久了？
自上次检查以来多久了？
事件是否已超出了解决的期限？

期限通常使用 Arcade 表达式中的 DateDiff 函数进行定义，并使用颜色或大小变量进行映射。它使用所需的单位指定时间长度。

代码块使用深色复制
valueExpression = "DateDiff( Now(), $feature.date_created, 'hours' )" 

以下示例根据事件结束前相对于截止日期所经过的时间，来可视化纽约市已聚类的街道状况投诉。

查看演示

展开
代码块使用深色复制
          visualVariables: [{
            type: "color",
            valueExpression: "DateDiff($feature['closed_time'], $feature['due_time'], 'days')",
            valueExpressionTitle: "Days it took to close incident",
            stops: [
              { value: -21, color: colors[0], label: "21 weeks early" },
              { value: 0, color: colors[1], label: "On time" },
              { value: 21, color: colors[2], label: "21 weeks late" }
            ]
          }]
 
展开

几何动画

在大多数情况下，时序动画涉及为图层分配静态渲染器并随时间过滤要素。对于仅在特定时刻或时间窗口（例如地震、飓风、飞机旅行）出现的要素，这很有效。这需要 TimeSlider 微件来控制时间窗口。

此示例中的图层使用简单渲染器和显示旋转飓风符号的动画 GIF 进行渲染。此图层显示飓风相对于滑块拇指位置的当前位置。将添加另一个图层以显示飓风相对于时间滑块值的先前位置。

查看演示

GeoScene JS API
展开
代码块使用深色复制
        const renderer = {
          type: "simple",
          label: "Observed hurricane location",
          symbol: {
            type: "picture-marker",
            url: "/javascript/4.25//assets/img/guide/visualization/demos/cyclone-marker.gif",
            height: 20,
            width: 20
          },
          visualVariables: [{
            type: "size",
            field: "Category",
            stops: [
              { value: 1, size: 12 },
              { value: 2, size: 16 },
              { value: 3, size: 20 },
              { value: 4, size: 24 },
              { value: 5, size: 28 }
            ]
          }]
        };
 
展开

属性动画

属性动画是动画可视化，用于显示固定在不变位置的要素中的属性如何随时间变化。这些通常涉及时间滑块，因此用户能够浏览时间时刻或时间窗口。

对于具有静态位置（例如传感器、建筑物、国家/地区等）但属性随时间变化（例如人口、温度、风速）的要素，您可以动态更新渲染器以引用与特定时刻相关的数据值，而不是过滤要素。这样就无需将重复几何下载到客户端。

渲染器会随着滑块值的每次更改而更新。

展开
代码块使用深色复制
        const debounced = promiseUtils.debounce( (event) => {
          updateYearDisplay(event.value);
          updateRenderer(event.value);
          return updateHistogram(event.value);
        });
        slider.on(["thumb-change", "thumb-drag"], (event) => debounced(event).catch(() => {}));
 
展开

查看演示

展开
代码块使用深色复制
        function updateRenderer(value) {
          const renderer = layer.renderer.clone();
          const sizeVariable = renderer.visualVariables[0];
          const colorVariable = renderer.visualVariables[1];
          sizeVariable.valueExpression = getSizeValueExpression(value);
          colorVariable.field = "F" + value;
          renderer.visualVariables = [sizeVariable, colorVariable];
          layer.renderer = renderer;
        }
 
展开