Openlayers heatMap (오픈레이어스 히트맵, Openlayers 히트맵)

 

 

히트맵, 열지도 그리는 방법은 Heatmaplayer클래스를 생성하여 적용하면 쉽게 만들 수 있습니다.

해당 클래스는 kml이라는 파일의 형식이 필요합니다.

kml확장자를 지닌  파일 형식은 아래처럼 되어 있습니다.

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <Document>
        <name>이름</name>
        <Folder>
            <name>AREA</name>
            <Placemark id="고유아이디1">
                <name>고유 날짜형식, 숫자 등</name>
                <magnitude>크기값</magnitude>
                <Point>
                    <coordinates>위도,경도</coordinates>
                </Point>
            </Placemark>
        </Folder>
    </Document>
</kml>            

 

kml파일에서 "<name></name>" 으로 되어있는 부분의 값은 반드시 날짜형식 또는 숫자 등으로 순번을 줄 수 있는 데이터로 채워져야 합니다.

겹치는 문자나 기호는 적용되지 않으므로 주의 하여야 합니다.

 

적당한 내용으로 kml 파일을 만들었다면 이제 히트맵이 동작하는 기능을 만들어 보겠습니다.

레이어는 저번시간에 사용한 레이어 그대로 사용하겠습니다.

추가되는 코드는 아래와 같습니다.

import KML from 'ol/format/KML.js';
import {Heatmap as HeatmapLayer, Tile as TileLayer} from 'ol/layer.js';
import VectorSource from 'ol/source/Vector.js';

var vector = new HeatmapLayer({ //히트맵을 만들 레이어
  source: new VectorSource({  //벡터 소스
    url: 'data/heating.kml',  //만들어 놓은 kml파일
    format: new KML({  //형식 지정
      extractStyles: false
    })
  }),  
  blur: 15,  //블러값이 낮을수록 번짐이 커진다. 번짐이 겹치는 곳은 붉은색으로 표기된다.
  radius: 20  //원 넓이
});

 

위 내용이 어렵지가 않습니다.

맵을 만드는 클래스에 해당 히트맵레이어를 적용하면 히트맵이 표출되게 됩니다.

아래는 최종 스크립트 입니다.

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import KML from 'ol/format/KML.js';
import {Heatmap as HeatmapLayer, Tile as TileLayer} from 'ol/layer.js';
import VectorSource from 'ol/source/Vector.js';
import OSM from 'ol/source/OSM.js';
import OlTileLayer from 'ol/layer/Tile.js';
import point from 'ol/geom/Point';

var pnt = new point([126,37]).transform('EPSG:4326', 'EPSG:3857');
var changePoints = pnt.getCoordinates();

var vector = new HeatmapLayer({ //히트맵을 만들 레이어
  source: new VectorSource({  //벡터 소스
    url: 'data/heating.kml',  //만들어 놓은 kml파일
    format: new KML({  //형식 지정
      extractStyles: false
    })
  }),  
  blur: 15,  //블러값이 낮을수록 번짐이 커진다. 번짐이 겹치는 곳은 붉은색으로 표기된다.
  radius: 20  //원 넓이
});

var layer = new OlTileLayer({ 
  source: new OSM()  
});

var map = new Map({
  layers: [layer, vector],
  target: 'map',
  view: new View({
    center: changePoints,
    zoom: 8
  })
});

 

아래는 샘플로 만들어본 kml 파일의 모습 입니다.

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <Document>
        <name>2019 히트맵</name>
        <Folder>
            <name>AREA</name>
            <Placemark id="아이디1">
                <name>1</name>
                <magnitude>5.9</magnitude>
                <Point>
                    <coordinates>126.11,37.12</coordinates>
                </Point>
            </Placemark>
            <Placemark id="아이디2">
                <name>2</name>
                <magnitude>25.9</magnitude>
                <Point>
                    <coordinates>126.23,37.42</coordinates>
                </Point>
            </Placemark>      
            <Placemark id="아이디3">
                <name>3</name>
                <magnitude>5.9</magnitude>
                <Point>
                    <coordinates>126.45,37.62</coordinates>
                </Point>
            </Placemark>    
            <Placemark id="아이디4">
                <name>4</name>
                <magnitude>5.9</magnitude>
                <Point>
                    <coordinates>126.485,37.332</coordinates>
                </Point>
            </Placemark>                                  
            <Placemark id="아이디5">
                <name>5</name>
                <magnitude>5.9</magnitude>
                <Point>
                    <coordinates>126.14285,37.1332</coordinates>
                </Point>
            </Placemark>            
        </Folder>
    </Document>
</kml>            

 

상단의 kml 파일은 프로젝트의 data 폴더에 heating.kml이라고 이름을 붙여서 저장 하였습니다.

두근두근 설레는 마음을 갖고 새로고침! 짠!

오류를...

 

뭐 잘못한게 없는데 오류가 난 것 같습니다.

해당 오류의 원인은...만들어놓은 kml파일의 위치문제 입니다.

 

파셀(parcel) 번들러가 읽어서 보여주는 곳이 사실은 dist폴더이기 때문 입니다.

다시말해 dist 폴더에 data폴더를 만들고 kml파일을 거기다 넣어주어야 합니다.

아래 사진을 참조하여 주세요.

분명 data폴더를 만들고 heating.kml파일을 넣어놨습니다만..

 

죠기.. dist 디렉토리에 data만들고 여기다 넣어야 합니다!!

 

저렇게 만들어놓고 나서 새로고침을 하여 보았습니다.

히트맵 입니다!

 

짜잔~ 이쁘게도 잘 나오는 것을 볼 수 있습니다.

히트맵 데이터는 위경도의 데이터가 겹치는 곳에서 색깔이 진하게 표현 되므로 데이터를 만들 때 참고하면 되겠습니다.

 

* 해당 내용은 npm과 parcel 환경으로 구성되어 있습니다.

* 아래 주소를 통해 환경구성을 하면 이해하기 쉽습니다.

https://lts0606.tistory.com/194?category=726697

Openlayers 사용법 (Openlayers 개발 환경 구성,오픈레이어스 개발환경, Nodejs 활용)

 

아래 소스코드를 첨부합니다!

다운로드