动画层视图效果

尝试一下在线预览

此样本可视化了 2008 年美国总统大选在该国每个投票区的获胜者。每个点的颜色表示获胜者：奥巴马为蓝色，麦凯恩为红色。大小代表该投票站的总票数。 FeatureLayerView featureEffect 用于可视化获胜者和第二名候选人之间的差距或胜利幅度。

在要素上设置的 featureEffect 取决于 Slider 的值。如果滑块位置靠近“有争议”标签，则应用了 drop-shadow 效果的要素代表获胜者以很小的差距并列或获胜的区域。当滑块手柄移向“山崩”时，具有 drop-shadow 效果的要素代表获胜者以较大优势获胜的区域。落在当前间隙百分比值之外的要素会应用 blur, grayscale 和 opacity 效果，以便它们在地图上变得柔和。单击“播放”按钮以动画显示“有争议”和“山崩”之间的滑块，以探索竞争激烈的区域，以及那些第二名候选人从未真正有机会获胜的区域。

/**
 * Creates an featureEffect centered around a gap between the 2 candidates.
 * If the precincts have the specified gap percentage, drop-shadow
 * effect is applied to make them stand out from the rest. If they
 * fall outside of the specified gap percentage, grayscale, blur
 * and opacity effects are applied to subdue their presence.
 */
function createEffect(gapValue) {
  gapValue = Math.min(100, Math.max(0, gapValue));

  function roundToTheTenth(value) {
    return Math.round(value * 10) / 10;
  }

  return {
    filter: {
      where: `PERCENT_GAP > ${roundToTheTenth(gapValue - 1)} AND PERCENT_GAP < ${roundToTheTenth(gapValue + 1)}`
    },
    includedEffect: "drop-shadow(0, 2px, 2px, black)",
    excludedEffect: "grayscale(25%) blur(5px) opacity(25%)"
  }
}