ScatterplotLayer 은 원시 포인트를 그릴 수 있지만 이러한 포인트의 분포를 시각화하려면 포인트를 지리 그리드로 집계할 수 있는 레이어가 필요합니다. HexagonLayer 및 GridLayer 은 모두 원시 지점에서 분포 히트맵을 시각화할 수 있는 집계 계층입니다.

제어판 업데이트

산점도 레이어에서 육각형 레이어로 전환할 수 있도록 제어판을 업그레이드할 것입니다. 이제 그렇게 하여 육각형 레이어를 만들 때 변경 사항을 볼 수 있습니다.

육각형 컨트롤을 포함하도록 CONTROLS 파일에서 index.svelte 상수를 업데이트합니다. CONTROLS는 이제 다음과 같아야 합니다.

const CONTROLS = {
  showHexagon: {
    displayName: "Show Hexagon",
    type: "boolean",
    value: true
  },
  radius: {
    displayName: "Hexagon Radius",
    type: "range",
    value: 100,
    step: 50,
    min: 50,
    max: 1000
  },
  coverage: {
    displayName: "Hexagon Coverage",
    type: "range",
    value: 1,
    step: 0.1,
    min: 0,
    max: 1
  },
  upperPercentile: {
    displayName: "Hexagon Upper Percentile",
    type: "range",
    value: 100,
    step: 0.1,
    min: 80,
    max: 100
  },
  showScatterplot: {
    displayName: "Show Scatterplot",
    type: "boolean",
    value: true
  },
  radiusScale: {
    displayName: "Scatterplot Radius",
    type: "range",
    value: 10,
    step: 1,
    min: 1,
    max: 100
  },
};

육각형 레이어에 대한 상수 추가

Deck.gl은 속성을 업데이트하는 방법을 결정하기 위해 레이어 소품을 비교합니다. 불필요한 재계산을 방지하기 위해 createDataLayers() 함수 외부에서 상수 매개변수를 정의합니다.
index.svelte에서 다른 변수 선언 아래에 이러한 상수를 추가할 수 있으며 나중에 HexagonLayer로 전달할 것입니다.

const HEATMAP_COLORS = [
  [255, 255, 204],
  [199, 233, 180],
  [127, 205, 187],
  [65, 182, 196],
  [44, 127, 184],
  [37, 52, 148]
];

const LIGHT_SETTINGS = {
  lightsPosition: [-73.8, 40.5, 8000, -74.2, 40.9, 8000],
  ambientRatio: 0.4,
  diffuseRatio: 0.6,
  specularRatio: 0.2,
  lightsStrength: [0.8, 0.0, 0.8, 0.0],
  numberOfLights: 2
};

const ELEVATION_RANGE = [0, 1000];

육각형 레이어 추가

이제 HexagonLayer 만 렌더링하면 됩니다. HexagonLayer 태그 내에서 <script> 가져오기:

import { HexagonLayer } from "@deck.gl/aggregation-layers";

HexagonLayer 함수에 createDataLaters()를 추가합니다.

function createDataLayers(props) {
  const { data, settings } = props;
  return [
    settings.showScatterplot && new ScatterplotLayer({
      id: "scatterplot",
      getPosition: d => d.position,
      getFillColor: d => d.pickup ? PICKUP_COLOR : DROPOFF_COLOR,
      getRadius: d => 5,
      opacity: 0.5,
      pickable: true,
      radiusMinPixels: 0.25,
      radiusMaxPixels: 30,
      data,
      onHover: (hoverProps) => handleHover("scatterplotLayer", hoverProps),
      ...settings
    }),
    settings.showHexagon && new HexagonLayer({
      id: "heatmap",
      colorRange: HEATMAP_COLORS,
      elevationRange: ELEVATION_RANGE,
      elevationScale: 5,
      extruded: true,
      getPosition: d => d.position,
      lightSettings: LIGHT_SETTINGS,
      opacity: 0.8,
      pickable: true,
      data,
      onHover: (hoverProps) => handleHover("hexagonLayer", hoverProps),
      ...settings
    })
  ];
}

육각형 레이어 유형을 포함하도록 handleHover() 함수를 업데이트합니다.

function handleHover(layerType, hoverProps) {
  let label;
  if (layerType === "scatterplotLayer") {
    label = hoverProps.object ? (hoverProps.object.pickup ? "Pickup" : "Dropoff") : null;
  }
  if (layerType === "hexagonLayer") {
    let count = hoverProps.object ? hoverProps.object.points.length : null;
    label = `${count} pickups or dropoffs here`;
  }
  // Set the coordinates for the tooltip.
  hover.x = hoverProps.x;
  hover.y = hoverProps.y - 20;
  hover.hoveredObject = hoverProps.object;
  hover.label = label;
}

이제 데이터를 표시하기 위한 컨트롤과 함께 HexagonLayer가 표시되어야 합니다.

다음

다음 자습서에서는 D3.js를 사용하여 지도의 지리 공간 데이터와 상호 작용할 막대 차트를 추가할 것입니다.