히트맵 레이어는 히트맵의 클라이언트 측 렌더링을 제공합니다.
개요
히트맵은 지리적 지점의 데이터 강도를 나타내는 데 사용되는 시각화 기능입니다. 히트맵 레이어를 사용 설정하면 지도 상단에 색상이 지정된 오버레이가 표시됩니다. 기본적으로 강도가 높은 지역은 빨간색으로, 강도가 낮은 지역은 초록색으로 표시됩니다.
시각화 라이브러리 로드
히트맵 레이어는 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&loading=async&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입니다. {location: new google.maps.LatLng(37.782, -122.441), weight: 3}의 단일 WeightedLocation을 추가하면 google.maps.LatLng(37.782, -122.441)을 세 번 추가하는 것과 같습니다.
단일 배열에서 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이면 지정된 지리적 위치에서 색상 강도를 유지하기 위해 확대/축소 수준에 따라 영향력 반경이 증가합니다. 기본값은 true입니다.gradient: 히트맵의 색상 그라디언트로 CSS 색상 문자열의 배열로 지정됩니다. 확장된 이름으로 지정된 색상 및 HSL(A) 값을 제외하고 RGBA를 포함한 모든 CSS3 색상이 지원됩니다.maxIntensity: 히트맵의 최대 강도입니다. 기본적으로 히트맵 색상은 지도의 특정 픽셀에서 가장 집중된 지점에 따라 동적으로 배율이 조정됩니다. 이 속성을 사용하면 고정된 최댓값을 지정할 수 있습니다. 최대 강도를 설정하면 데이터 세트에 예외적으로 강도가 높은 이상점이 포함되어 있을 경우 유용합니다.radius: 각 데이터 포인트의 영향력 반경(픽셀)입니다.opacity: 히트맵의 불투명도로 0에서 1 사이의 숫자로 표현됩니다.
아래 예는 이용 가능한 맞춤설정 옵션을 보여줍니다.