动画颜色视觉变量

尝试一下在线预览

此示例使用 HTML 滑块和 requestAnimationFrame() 可视化了纽约市超过 100 万座建筑物的建造年限。滑块允许用户探索相对于指定年份的建筑物结构。颜色视觉变量用于根据其相对于滑块值的建造年份来可视化每个建筑物。例如，如果选择值 1984 ，则 1984 年建造的建筑物将使用浅蓝色进行着色。根据建筑年份，该年之前建造的建筑物会沿着蓝色到粉红色的坡道逐渐着色。在选定年份之前建造 20 多年的建筑物以粉红色着色。此外，我们在图层上应用了 绽放 效果，使建筑物在地图上突出显示。单击“播放”按钮以动画化 1880 年和 2017 年之间的滑块。这很好地描述了该时间跨度内的建筑活动。

这种可视化是通过以下方式使用颜色视觉变量实现的：

renderer.visualVariables = [
  {
    type: "color",
    field: "CNSTRCT_YR",
    legendOptions: {
      title: "Built:"
    },
    // year is the slider value set by the user
    stops: [
      {
        // buildings built in the given year are blue
        value: year,
        color: "#0ff",
        label: "in " + Math.floor(year)
      },
      {
        // if built 0 - 20 years prior to the slider value then
        // the color is interpolated between blue and pink
        value: year - 20,
        color: "#f0f",
        label: "in " + (Math.floor(year) - 20)
      },
      {
        value: year - 50,
        color: "#606",
        label: "before " + (Math.floor(year) - 50)
      }
    ]
  }
];