열지도 계층

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
플랫폼 선택: Android iOS 자바스크립트
  1. 개요
  2. 시각화 라이브러리 로드
  3. 가중치가 적용된 데이터 포인트 추가
  4. 히트맵 레이어 맞춤설정

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

개요

히트맵은 지리적인 지점에서 데이터의 강도를 나타내는 데 사용되는 시각화입니다. 히트맵 레이어가 사용 설정되면 지도 위에 색상 오버레이가 표시됩니다. 기본적으로 강도가 더 높은 영역은 빨간색으로 표시되고 강도가 낮은 영역은 녹색으로 표시됩니다.

시각화 라이브러리 로드

히트맵 레이어는 google.maps.visualization 라이브러리의 일부이며, 기본적으로 로드되지 않습니다. 시각화 클래스는 기본 Maps JavaScript API 코드와 별개인 독립적인 라이브러리입니다. 이 라이브러리에 포함된 기능을 사용하려면 먼저 Maps JavaScript API 부트스트랩 URL의 libraries 매개변수를 사용하여 로드해야 합니다.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
</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입니다. 단일 WeightedLocation {location: new google.maps.LatLng(37.782, -122.441), weight: 3}를 추가하면 google.maps.LatLng(37.782, -122.441)를 3번 추가하는 것과 동일한 효과가 나타납니다. 단일 배열에서 weightedLocationLatLng 객체를 혼합할 수 있습니다.

다음과 같은 경우 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: 확대/축소 시의 히트맵 표시 여부를 지정합니다. false로 설정하면 확대/축소 수준에 따라 영향 반경이 증가하여 특정 지리적 위치에서 색 강도가 유지되도록 합니다. 기본값은 true입니다.
  • gradient: CSS 색상 문자열 배열로 지정된 히트맵의 색상 그라디언트입니다. RGBA를 비롯한 모든 CSS3 색상확장된 색상과 HSL(A) 값을 제외한 모든 지원됩니다.
  • maxIntensity: 히트맵의 최대 강도입니다. 기본적으로 히트맵 색상은 지도의 특정 픽셀에서 가장 많이 발생하는 지점에 따라 동적으로 조정됩니다. 이 속성을 사용하면 고정된 최댓값을 지정할 수 있습니다. 최대 강도를 설정하면 데이터에 비정상적으로 강도가 높은 몇 개의 이상점이 있을 때 도움이 될 수 있습니다.
  • radius: 각 데이터 포인트의 영향 반경(픽셀)입니다.
  • opacity: 히트맵의 불투명도로, 0과 1 사이의 숫자로 표시됩니다.

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

예 보기