본 포스팅은 KFQ 한국품질재단 인공지능 개발자 교육과정 2차 프로젝트의 구현 기술 관련 포스팅입니다.
2차 프로젝트 발표 ppt: https://19tak.github.io/posts/01-prj2/
프로젝트 진행 기간
- 2021년 6월 15일 화요일 ~ 7월 7일 수요일
Leaflet
리플릿(Leaflet)은 웹 매핑 애플리케이션을 빌드하기 위해 사용되는 오픈 소스 자바스크립트 라이브러리이다.
2011년 처음 출시되었으며, HTML5와 CSS3를 지원하고 대부분의 모바일 및 데스크톱 플랫폼을 지원한다.
Leaflet은 GIS 배경지식이 없는 개발자들이 공용 서버에 호스팅되는 타이틀 웹 맵을 선택적 타일 오버레이와 함께 매우 쉽게 표출할 수 있게 한다.
GeoJSON 파일로부터 피처 데이터(feature data)를 로드하고 스타일을 입히고 상호작용 레이어를 만들 수 있다. (예: 클릭할 때 팝업 포함 마커 등)
이용법
Leaflet의 일반적 용도에는 div 등의 HTML 요소에 리플릿 map 요소를 바인딩하는 일이 수반된다.
그 뒤 map 요소에 레이어와 마커가 추가된다.
example
JavaScript Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// default zoom
var zoom = 17;
// center of the map
var center = [37.558240, 127.000258];
// Create the map
var map = L.map('map', { attributionControl: false }).setView(center, zoom);
// Set up the OSM layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map);
// add a marker in the given location
L.marker(center)
.bindPopup("내가 졸업한 동국대학교")
.on("mouseover",function(evt){this.openPopup();})
.on("mouseout",function(evt){this.closePopup();}).addTo(map);
Leaflet의 고유한 기능은 구모양이 아닌 메르카토르 도법 (Mercator Projection)으로 지도를 표출하는 것이다.
Leaflet 라이브러리 그 자체는 변수 L을 통해 접근이 가능하다.
나는 map layer에 image 파일과 함께 x,y 좌표 (위도와 경도)를 이용하는 기술이라 받아들였다.
Leaflet Rrose
Leaflet Rrose는 현재 map을 동서를 제외한 6방위 (북서, 북, 북동, 남서, 남, 남동) 에 대한
Popup 이벤트를 자동으로 처리해주는 목적으로 등장한 Leaflet 확장 라이브러리이다.
자세한 내용은 Leaflet Rrose 공식 페이지를 읽어보면 이해가 더 잘 갈 것이다.
나는 좌석배치도를 map layer에 추가하고, bindTooltip으로 이름표를, mouseover로 학생 상세 정보를 보였다.
좌석 번호마다 좌표 값을 리스트에 저장하여 불러오기 때문에,
반 구조도가 바뀔 때마다, 좌표와 map layer를 다시 설정해주어야한다는 단점이 있었다.
Ajax (비동기식 js와 xml) 를 사용해 당일, 선택한 과정의 학생 정보를 로드하고 map 위에 나타내도록 작성하였다.
sample of prj2
JavaScript Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var map = L.map('map', {crs: L.CRS.Simple, zoomControl: false, maxZoom: 0, dragging: true});
var imgurl = 'https://user-images.githubusercontent.com/84369912/130463456-9247b3bc-8daf-488e-b8c7-c7e9a17a7d22.png' // 이미지 경로
var bounds = [[0,0], [680,1500]]; // 이미지의 해상도를 bounds로 설정한다. [y,x]
L.imageOverlay( imgurl, bounds).addTo(map); // 배경 이미지를 설정한다.
map.fitBounds(bounds); // 표현 영역을 설정한다
const column = [143,373,603,833,1063,1293]; // 분단 x 좌표
const row = [160,285,410,535,650]; // 몇번째 자리인지 y 좌표
var set = []; // 좌석 번호가 담길 좌표 리스트
for(var i=0; i<column.length; i++) {
for(var j=0; j<row.length; j++) {
set[i*row.length+j]=[i*row.length+j+1,column[i],row[j]]; // set[e] = [좌석번호, x좌표, y좌표]
// console.log(set[i*row.length+j]);
}
}
const color = ['green','red','orange','gray'];
function seat_on(seat_num, select_class, nameValue, majorValue, daily_info,state,emailValue) {
var name='"'+nameValue+'"';
var class_name='"'+select_class+'"';
var major='"'+majorValue+'"';
var temperature=daily_info[1];
var email=emailValue;
var url = "'https://user-images.githubusercontent.com/84369912/127220954-701d3e97-6d9d-447a-b99f-1a31e4b7b03d.png'";
var img_url = "<img src="+url+">";
var color_name = color[state];
// jsfiddle에서 Rrose가 먹통임... 왜징..
/* var popup_content = new L.Rrose({ autoPan: false, offset: new L.Point(0,-10), closeButton: false })
.setContent("<center>"+name+"</center><br />"+img_url+"<br />\
<br /><center>반 : "+class_name+" 반</center><br />\
<center>전공 : "+major+"</center><br />\
<center>체온 : "+temperature+" 도</center>"); */
L.circle([set[seat_num-1][2], set[seat_num-1][1]], {color: color_name, radius: 23, fillOpacity: 1}).addTo(map)
/* .bindTooltip(name, {permanent: true, direction: 'center', opacity: 1}).openTooltip() */
.bindPopup("<center>"+name+"</center><br />"+img_url+"<br />\
<br /><center>반 : "+class_name+" 반</center><br />\
<center>전공 : "+major+"</center><br />\
<center>체온 : "+temperature+" 도</center>")
.on("mouseover", function(evt) { this.openPopup(); })
.on("mouseout", function(evt) { this.closePopup(); });
}
seat_on(17,"ai","한정탁","기계로봇에너지공학과",[0,36.5],0,"wjdxkrdl123@naver.com")
참고
Leaflet official: https://leafletjs.com/
위키피디아: 리플렛
- Leaflet Rrose https://erictheise.com/rrose/
Yasunori Iwatsuki 님의 포스팅 엑셀로 관리하던 자리 배치도, Leaflet을 통해 웹 시스템으로 탈바꿈하다
brviolet 님의 포스팅 지도용 라이브러리로 좌석배치도 만들기
- 공간정보시스템 / 딥러닝 기반 기술 연구소 의 포스팅 Leaflet 강좌 ㅡ 1. 배경지도로 타일맵 활용하기