[Leaflet] 플러그인 heatmap.js 사용하기
heatmap.js를 사용하여 heatmap을 표현해 보겠습니다.
https://www.patrick-wied.at/static/heatmapjs/example-heatmap-leaflet.html 에서 예제를 확인할 수 있습니다.
Leaflet CSS, JS 추가
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.2/heatmap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-heatmap@1.0.0/leaflet-heatmap.min.js"></script>
</head>
<body>
</body>
</html>
leaflet 사용을 위해서 css, js를 포함하는 기본 코드를 작성합니다. leaflet-heatmap.html(또는 원하는 파일명)로 파일을 저장합니다.
leaflet에서 heatmap.js를 사용하여 표현하기 위해서는 heatmap.js 와 leaflet-heatmap.js를 추가합니다.
지도 영역 추가
<body>
<div id="mapid" style="height:100%;"></div>
<script>
// sciprt 작성
</script>
</body>
지도 생성 스크립트
<body>
<div id="mapid" style="height:100%;"></div>
<script>
var lat = 37.481;
var lng = 126.893;
var zoom = 20;
var mymap = L.map('mapid', {
center: [lat, lng],
zoom: zoom
});
L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mymap);
</script>
</body>
오픈스트리트맵('http://tile.openstreetmap.org/{z}/{x}/{y}.png')을 사용하여 지도를 생성합니다.
좌표 정보 생성
<script>
var lat = 37.481;
var lng = 126.893;
var zoom = 20;
var mymap = L.map('mapid', {
center: [lat, lng],
zoom: zoom,
});
L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mymap);
var pointList = [];
var pointCnt = 10;
var scale = 1000;
for (var i = 0; i < pointCnt; i++) {
pointList.push({
lat: lat + i / scale,
lng: lng + i / scale,
count: i
}, );
}
for (var i = 0; i < pointCnt; i++) {
var point = pointList[i];
L.marker({
lat: point.lat,
lng: point.lng
}).addTo(mymap);
}
</script>
heatmap 표현을 위해서는 데이터가 필요하기 때문에 좌표정보와 데이터를 포함하는 오브젝트를 생성하여 처리합니다.
{
lat: lat,
lng: lng,
count: i
}
heatmap 데이터 설정
<script>
// 이전 코드
var pointList = [];
var pointCnt = 10;
var scale = 1000;
for (var i = 0; i < pointCnt; i++) {
pointList.push({
lat: lat + i / scale,
lng: lng + i / scale,
count: i
}, );
}
for (var i = 0; i < pointCnt; i++) {
var point = pointList[i];
L.marker({
lat: point.lat,
lng: point.lng
}).addTo(mymap);
}
var cfg = {
//"radius": 2,
"radius": 200,
"maxOpacity": .5,
//"scaleRadius": true,
"scaleRadius": false,
"useLocalExtrema": true,
latField: 'lat',
lngField: 'lng',
valueField: 'count'
};
var heatmapLayer = new HeatmapOverlay(cfg).addTo(mymap);
var testData = {
max: 10,
data: pointList
}
heatmapLayer.setData(testData);
</script>
<script>
// 이전 코드
var heatmapLayer = new HeatmapOverlay(cfg).addTo(mymap);
var max = 10;
var animationTimer = window.setInterval(function(){
for(var i =0; i < pointCnt; i++){
var point = pointList[i];
point.count = ( point.count + 1 ) % max
}
var testData = {
max: max,
data: pointList
}
heatmapLayer.setData(testData);
}, 100)
</script>
setInterval을 사용하여 애니메이션 효과를 추가할 수 있습니다.
'Programming > JavaScript' 카테고리의 다른 글
| firestore & storage 사용하기 (0) | 2018.04.20 |
|---|---|
| [React.JS] 작업환경 설정하는 중 에러 (1) | 2018.01.26 |
| [Leaflet] 플러그인 PolylineDecorator 사용하기 (0) | 2018.01.14 |
| [Leaflet] 시작하기 Quick Start Guide (0) | 2018.01.13 |
| Vue 에서 filter 사용 (0) | 2017.06.13 |
댓글