열지도 계층

1. 개요
2. 시각화 라이브러리 로드
3. 가중치가 적용된 데이터 지점 추가
4. 열지도 계층 사용자 지정

열지도 계층은 클라이언트측 열지도 렌더링을 제공합니다.

개요

열지도는 지리적 지점에서 데이터 강도를 나타내는 데 사용되는 시각화입니다. 열지도 계층이 활성화되면 지도 위에 색칠된 오버레이가 나타납니다. 기본적으로, 강도가 더 높은 영역은 빨간색이 되고, 강도가 낮은 영역은 초록색으로 나타납니다.

Google Maps JavaScript API는 열지도 계층을 통해 클라이언트측 열지도 데이터를 렌더링하거나 퓨전 테이블을 통해 서버측 열지도 데이터를 렌더링할 수 있습니다. 다음은 두 메서드 간의 몇 가지 주요 차이점입니다.

열지도 계층	퓨전 테이블 계층
대량의 데이터 지점은 성능 저하를 초래할 수 있습니다.	데이터 지점이 많아도 성능에 거의 영향을 미치지 않습니다.
색상, 그라데이션, 데이터 지점 반경, 각 데이터 지점의 강도 등과 같은 옵션을 변경하여 열지도의 모습을 사용자 지정할 수 있습니다.	열지도의 모습을 사용자 지정하는 기능이 없습니다.
열지도 데이터가 높은 확대/축소 수준에서 사라지는지 여부를 제어할 수 있습니다.	확대되면 모든 열지도 데이터가 사라집니다.
데이터는 HTML로 저장하거나, 서버에 저장하거나 즉석에서 계산할 수 있습니다. 데이터는 런타임에 변경될 수 있습니다.	모든 데이터는 퓨전 테이블에 저장되어야 합니다. 데이터는 런타임에 쉽게 변경할 수 없습니다.

시각화 라이브러리 로드

열지도 계층은 google.maps.visualization 라이브러리의 일부로, 기본적으로 로드되지 않습니다. Visualization 클래스는 메인Google Maps JavaScript API 코드와 별개의 자체 포함된 라이브러리입니다. 이 라이브러리에 포함된 기능을 사용하려면 먼저 Maps JavaScript API 부트스트랩 URL의 libraries 매개변수를 사용하여 해당 라이브러리를 로드해야 합니다.

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
</script>

열지도 계층 추가

열지도 계층을 추가하려면 먼저 새 HeatmapLayer 객체를 생성하고, 배열이나 MVCArray[] 객체의 형태로 몇 가지 지리적 데이터를 제공해야 합니다. 데이터는 LatLng 객체 또는 WeightedLocation 객체가 될 수 있습니다. HeatmapLayer 객체를 인스턴스화한 후에 setMap() 메서드를 호출하여 지도에 추가합니다.

다음 예시는 샌프란시스코 지도에 14개 데이터 지점을 추가합니다.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

가중치가 적용된 데이터 지점 추가

열지도는 LatLng 또는 WeightedLocation 객체로 렌더링하거나 두 가지를 조합하여 렌더링할 수 있습니다. 두 객체는 지도에서 단일 데이터 지점을 나타내지만, WeightedLocation 객체를 사용하면 해당 데이터 지점의 가중치를 추가로 지정할 수 있습니다. 데이터 지점에 가중치를 적용하면 WeightedLocation이 단순한 LatLng 객체보다 더 큰 강도가 적용되어 렌더링됩니다. 가중치는 선형 배율로, 각각의 LatLng 객체는 암시적 가중치 1을 가집니다. {location: new google.maps.LatLng(37.782, -122.441), weight: 3}의 단일 WeightedLocation을 추가하는 것은 google.maps.LatLng(37.782, -122.441)를 3번 추가하는 것과 동일한 효과를 가집니다. 단일 배열에서 weightedLocation 및 LatLng 객체를 혼용할 수 있습니다.

다음과 같은 경우에 LatLng 대신 WeightedLocation을 사용하는 것이 유용할 수 있습니다.

• 단일 위치에서 대량의 데이터 추가. 가중치가 1,000인 단일 WeightedLocation을 렌더링하는 것이 LatLng 객체 1,000개를 렌더링하는 것보다 빠릅니다.
• 임의의 값을 기반으로 데이터에 강조 적용. 예를 들어, 지진 데이터를 입력할 때 LatLng 객체를 사용할 수 있지만, 리히터 규모로 각 지진의 강도를 측정할 때는 WeightedLocation을 사용하는 것이 좋습니다.

/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

열지도 계층 사용자 지정

다음 열지도 옵션으로 열지도 렌더링 방식을 사용자 지정할 수 있습니다. 자세한 내용은 HeatmapLayerOptions 문서를 참조하세요.

• dissipating: 확대 시 열지도가 사라지는지 여부를 지정합니다. dissipating이 false이면 주어진 지리적 위치에서 색상의 강도가 보존되도록 영향을 받는 반경이 확대/축소 수준과 함께 증가합니다. 기본값은 fasle입니다.
• gradient: 열지도의 색상 그라데이션으로, CSS 색상 문자열 배열로 지정됩니다. 확장된 이름이 지정된 색상과 HSL(A) 값을 제외하고 RGBA를 포함하는 모든 CSS3 색상이 지원됩니다.
• maxIntensity: 열지도의 최대 강도. 기본적으로, 열지도 색상은 지도에서 특정 픽셀에 가장 많이 집중된 지점에 따라 동적으로 배율이 조절됩니다. 이 속성을 사용하면 고정된 최대값을 지정할 수 있습니다. 데이터 집합에 비정상적으로 강도가 높은 몇몇 이상값이 포함된 경우 최대 강도를 설정하면 유용할 수 있습니다.
• radius: 각 데이터 지점의 영향력 반경을 픽셀 단위로 나타냅니다.
• opacity: 열지도의 불투명도로, 0~1 사이의 숫자로 표현됩니다.

아래 예시는 이용 가능한 사용자 지정 옵션 중 일부를 보여줍니다.

현재 지역에서는 샘플 애플리케이션이 제공되지 않을 수 있습니다.

열지도 계층 예시 보기