위치관제 지도 생성
소개
이 튜토리얼에서는 위치정보 데이터를 이용하여 위치관제 지도를 띄워보는 과정에 대해 설명합니다.
준비
1. 기본 지도 생성
기본 지도를 생성합니다.
// js
$(function () {
// 1. 기본 지도 생성
const options = {
// 지도 초기 위치
center: { lat : 37.5100, lng: 127.0504 },
// 지도 로딩 시 최초 표시 레벨
zoom: 16,
// 지도 최소 표시 레벨
minZoom: 7,
// 지도 최대 표시 레벨
maxZoom: 19,
// 지도 회전 제한 여부
blockRotation: true,
// 지도에서 keyboard의 Event를 받을 Target 결정
keyboardEventTarget: document,
// Marker를 표시할 레이어의 z-index
markerZIndex: 504,
// Zoom in/out 시 resolution에 따라 고정할 것인지 여부
constrainResolution: true,
// 지도가 표시할 영역을 지정 (국내영역 / 해당 영역 밖으로 이동 불가)
restriction: { west: 124.60, south: 33.114, east: 131.875, north: 42.59 },
// routo logo 위치 지정 : leftTop, leftBottom, rightTop, rightBottom
logoPosition: 'leftBottom',
// routo logo의 상단 또는 하단의 margin 값
logoPositionMargin: 0
};
const map = new routo.maps.Map('map', options);
});
<!-- html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="map" style="width:100%;height:500px;"></div>
</body>
</html>
2. 위치 조회
위치 데이터를 불러와서 지도에 마커로 표시합니다.
// js
$(function () {
// 1. 기본 지도 생성
const options = {
// 지도 초기 위치
center: { lat : 37.5100, lng: 127.0504 },
// 지도 로딩 시 최초 표시 레벨
zoom: 16,
// 지도 최소 표시 레벨
minZoom: 7,
// 지도 최대 표시 레벨
maxZoom: 19,
// 지도 회전 제한 여부
blockRotation: true,
// 지도에서 keyboard의 Event를 받을 Target 결정
keyboardEventTarget: document,
// Marker를 표시할 레이어의 z-index
markerZIndex: 504,
// Zoom in/out 시 resolution에 따라 고정할 것인지 여부
constrainResolution: true,
// 지도가 표시할 영역을 지정 (국내영역 / 해당 영역 밖으로 이동 불가)
restriction: { west: 124.60, south: 33.114, east: 131.875, north: 42.59 },
// routo logo 위치 지정 : leftTop, leftBottom, rightTop, rightBottom
logoPosition: 'leftBottom',
// routo logo의 상단 또는 하단의 margin 값
logoPositionMargin: 0
};
const map = new routo.maps.Map('map', options);
// 2. 위치 조회
if(window.XMLHttpRequest){
xhttp = new XMLHttpRequest();
}else{
xhttp = new ActiveXObject("Microsoft.XMLDOM");
}
xhttp.open("GET", "./sample.kml", false);
xhttp.send();
const response = xhttp.responseXML;
const responseString = new XMLSerializer().serializeToString(response);
xmlDoc = $.parseXML(responseString),
$xml = $(xmlDoc),
$intRate = $xml.find("Placemark");
let marker;
let beforeMarker;
let markerList = [];
let beforeMarkerList = [];
let popup,popup2;
let beforePopup,beforePopup2;
const myFunction = (cnt, checkLevel) => {
$intRate.each(function(index, element) {
const name = element.getElementsByTagName("name")[0].childNodes[0].nodeValue;
const number = element.getElementsByTagName("number")[0].childNodes[0].nodeValue;
const affiliation = element.getElementsByTagName("affiliation")[0].childNodes[0].nodeValue;
const distance = element.getElementsByTagName("distance")[cnt].childNodes[0].nodeValue;
const speed = element.getElementsByTagName("speed")[cnt].childNodes[0].nodeValue;
let content = `<div class="wrap" style="margin-top:5px;">`;
content += ` <div class="info">`;
content += ` <div class="body">`;
content += ` <div class="desc">`;
content += ` <div><span>운행거리</span>${distance}km</div>`;
content += ` <div><span>현재속도</span>${speed}km/h</div>`;
content += ` </div>`;
content += ` </div>`;
content += ` </div>`;
content += `</div>`;
//현재위치 바로 이전 위치를 그리기 위한 부분
if(cnt > 0 && cnt >= 1 && cnt < 53 && checkLevel != 4){
const beforePoint = element.getElementsByTagName("coordinates")[cnt-1].childNodes[0].nodeValue.split(',');
const beforePointArr = beforePoint[0].split(' ');
const lng = beforePointArr[0];
const lat = beforePointArr[1];
const markerOption = {
position: {
lat: lat,
lng: lng
},
icon: {
url: 'https://tile.routo.com/webgis_tile01/Static/images/marker/none_before.png',
},
map: map
};
const beforeMarker = new routo.maps.Marker(markerOption);
beforeMarkerList.push(beforeMarker);
}
const point = element.getElementsByTagName("coordinates")[cnt].childNodes[0].nodeValue.split(',');
const pointArr = point[0].split(' ');
const lng = pointArr[0];
const lat = pointArr[1];
const markerOption = {
position: {
lat: lat,
lng: lng
},
icon: {
url: 'https://tile.routo.com/webgis_tile01/Static/images/marker/none.png',
},
map: map
};
marker = new routo.maps.Marker(markerOption);
markerList.push(marker);
});
}
myFunction(0);
});
<!-- html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="map" style="width:100%;height:500px;"></div>
</body>
</html>
3. 위치관제 시작
불러온 위치 데이터를 1초마다 하나씩 지도 위에 마커로 표시합니다.
// js
$(function () {
// 1. 기본 지도 생성
const options = {
// 지도 초기 위치
center: { lat : 37.5100, lng: 127.0504 },
// 지도 로딩 시 최초 표시 레벨
zoom: 16,
// 지도 최소 표시 레벨
minZoom: 7,
// 지도 최대 표시 레벨
maxZoom: 19,
// 지도 회전 제한 여부
blockRotation: true,
// 지도에서 keyboard의 Event를 받을 Target 결정
keyboardEventTarget: document,
// Marker를 표시할 레이어의 z-index
markerZIndex: 504,
// Zoom in/out 시 resolution에 따라 고정할 것인지 여부
constrainResolution: true,
// 지도가 표시할 영역을 지정 (국내영역 / 해당 영역 밖으로 이동 불가)
restriction: { west: 124.60, south: 33.114, east: 131.875, north: 42.59 },
// routo logo 위치 지정 : leftTop, leftBottom, rightTop, rightBottom
logoPosition: 'leftBottom',
// routo logo의 상단 또는 하단의 margin 값
logoPositionMargin: 0
};
const map = new routo.maps.Map('map', options);
// 2. 위치 조회
if(window.XMLHttpRequest){
xhttp = new XMLHttpRequest();
}else{
xhttp = new ActiveXObject("Microsoft.XMLDOM");
}
xhttp.open("GET", "./sample.kml", false);
xhttp.send();
const response = xhttp.responseXML;
const responseString = new XMLSerializer().serializeToString(response);
xmlDoc = $.parseXML(responseString),
$xml = $(xmlDoc),
$intRate = $xml.find("Placemark");
let marker;
let beforeMarker;
let markerList = [];
let beforeMarkerList = [];
let popup,popup2;
let beforePopup,beforePopup2;
const myFunction = (cnt, checkLevel) => {
$intRate.each(function(index, element) {
const name = element.getElementsByTagName("name")[0].childNodes[0].nodeValue;
const number = element.getElementsByTagName("number")[0].childNodes[0].nodeValue;
const affiliation = element.getElementsByTagName("affiliation")[0].childNodes[0].nodeValue;
const distance = element.getElementsByTagName("distance")[cnt].childNodes[0].nodeValue;
const speed = element.getElementsByTagName("speed")[cnt].childNodes[0].nodeValue;
let content = `<div class="wrap" style="margin-top:5px;">`;
content += ` <div class="info">`;
content += ` <div class="body">`;
content += ` <div class="desc">`;
content += ` <div><span>운행거리</span>${distance}km</div>`;
content += ` <div><span>현재속도</span>${speed}km/h</div>`;
content += ` </div>`;
content += ` </div>`;
content += ` </div>`;
content += `</div>`;
//현재위치 바로 이전 위치를 그리기 위한 부분
if(cnt > 0 && cnt >= 1 && cnt < 53 && checkLevel != 4){
const beforePoint = element.getElementsByTagName("coordinates")[cnt-1].childNodes[0].nodeValue.split(',');
const beforePointArr = beforePoint[0].split(' ');
const lng = beforePointArr[0];
const lat = beforePointArr[1];
const markerOption = {
position: {
lat: lat,
lng: lng
},
icon: {
url: 'https://tile.routo.com/webgis_tile01/Static/images/marker/none_before.png',
},
map: map3
};
const beforeMarker = new routo.maps.Marker(markerOption);
beforeMarkerList.push(beforeMarker);
}
const point = element.getElementsByTagName("coordinates")[cnt].childNodes[0].nodeValue.split(',');
const pointArr = point[0].split(' ');
const lng = pointArr[0];
const lat = pointArr[1];
const markerOption = {
position: {
lat: lat,
lng: lng
},
icon: {
url: 'https://tile.routo.com/webgis_tile01/Static/images/marker/none.png',
},
map: map3
};
marker = new routo.maps.Marker(markerOption);
markerList.push(marker);
});
}
// 3. 위치관제 시작
let cnt = 1;
const myVar = setInterval(() => {
RESET_MARKER();
const count = $xml.find("Placemark")[0].getElementsByTagName("coordinates").length;
console.log(count);
if(cnt == count){
cnt = 0;
RESET_MARKER(); //기존 마크지우기
RESET_MARKER2(); //이전 마크 지우기
}
myFunction(cnt);
cnt++;
}, 1000);
const RESET_MARKER = () => {
for (let i = 0; i < markerList.length; i++) {
if(undefined != markerList[i]){
markerList[i].setMap(null);
if(i == markerList.length-1){
markerList = [];
}
}
}
}
const RESET_MARKER2 = () => {
for (let i = 0; i < beforeMarkerList.length; i++) {
if(undefined != beforeMarkerList[i]){
beforeMarkerList[i].setMap(null);
if(i == beforeMarkerList.length-1){
beforeMarkerList = [];
}
}
}
}
});
<!-- html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="map" style="width:100%;height:500px;"></div>
</body>
</html>
4. 위치관제 종료
위치관제 결과 항목을 표시합니다.
// js
$(function () {
// 1. 기본 지도 생성
const options = {
// 지도 초기 위치
center: { lat : 37.5100, lng: 127.0504 },
// 지도 로딩 시 최초 표시 레벨
zoom: 16,
// 지도 최소 표시 레벨
minZoom: 7,
// 지도 최대 표시 레벨
maxZoom: 19,
// 지도 회전 제한 여부
blockRotation: true,
// 지도에서 keyboard의 Event를 받을 Target 결정
keyboardEventTarget: document,
// Marker를 표시할 레이어의 z-index
markerZIndex: 504,
// Zoom in/out 시 resolution에 따라 고정할 것인지 여부
constrainResolution: true,
// 지도가 표시할 영역을 지정 (국내영역 / 해당 영역 밖으로 이동 불가)
restriction: { west: 124.60, south: 33.114, east: 131.875, north: 42.59 },
// routo logo 위치 지정 : leftTop, leftBottom, rightTop, rightBottom
logoPosition: 'leftBottom',
// routo logo의 상단 또는 하단의 margin 값
logoPositionMargin: 0
};
const map = new routo.maps.Map('map', options);
// 2. 위치 조회
if(window.XMLHttpRequest){
xhttp = new XMLHttpRequest();
}else{
xhttp = new ActiveXObject("Microsoft.XMLDOM");
}
xhttp.open("GET", "./sample.kml", false);
xhttp.send();
const response = xhttp.responseXML;
const responseString = new XMLSerializer().serializeToString(response);
xmlDoc = $.parseXML(responseString),
$xml = $(xmlDoc),
$intRate = $xml.find("Placemark");
let marker;
let beforeMarker;
let markerList = [];
let beforeMarkerList = [];
let popup,popup2;
let beforePopup,beforePopup2;
const myFunction = (cnt, checkLevel) => {
$intRate.each(function(index, element) {
const name = element.getElementsByTagName("name")[0].childNodes[0].nodeValue;
const number = element.getElementsByTagName("number")[0].childNodes[0].nodeValue;
const affiliation = element.getElementsByTagName("affiliation")[0].childNodes[0].nodeValue;
const distance = element.getElementsByTagName("distance")[cnt].childNodes[0].nodeValue;
const speed = element.getElementsByTagName("speed")[cnt].childNodes[0].nodeValue;
let content = `<div class="wrap" style="margin-top:5px;">`;
content += ` <div class="info">`;
content += ` <div class="body">`;
content += ` <div class="desc">`;
content += ` <div><span>운행거리</span>${distance}km</div>`;
content += ` <div><span>현재속도</span>${speed}km/h</div>`;
content += ` </div>`;
content += ` </div>`;
content += ` </div>`;
content += `</div>`;
//현재위치 바로 이전 위치를 그리기 위한 부분
if(cnt > 0 && cnt >= 1 && cnt < 53 && checkLevel != 4){
const beforePoint = element.getElementsByTagName("coordinates")[cnt-1].childNodes[0].nodeValue.split(',');
const beforePointArr = beforePoint[0].split(' ');
const lng = beforePointArr[0];
const lat = beforePointArr[1];
const markerOption = {
position: {
lat: lat,
lng: lng
},
icon: {
url: 'https://tile.routo.com/webgis_tile01/Static/images/marker/none_before.png',
},
map: map3
};
const beforeMarker = new routo.maps.Marker(markerOption);
beforeMarkerList.push(beforeMarker);
}
const point = element.getElementsByTagName("coordinates")[cnt].childNodes[0].nodeValue.split(',');
const pointArr = point[0].split(' ');
const lng = pointArr[0];
const lat = pointArr[1];
const markerOption = {
position: {
lat: lat,
lng: lng
},
icon: {
url: 'https://tile.routo.com/webgis_tile01/Static/images/marker/none.png',
},
map: map3
};
marker = new routo.maps.Marker(markerOption);
markerList.push(marker);
});
}
// 3. 위치관제 시작
let cnt = 1;
const myVar = setInterval(() => {
RESET_MARKER();
const count = $xml.find("Placemark")[0].getElementsByTagName("coordinates").length;
console.log(count);
if(cnt == count){
cnt = 0;
RESET_MARKER(); //기존 마크지우기
RESET_MARKER2(); //이전 마크 지우기
}
myFunction(cnt);
cnt++;
}, 1000);
const RESET_MARKER = () => {
for (let i = 0; i < markerList.length; i++) {
if(undefined != markerList[i]){
markerList[i].setMap(null);
if(i == markerList.length-1){
markerList = [];
}
}
}
}
const RESET_MARKER2 = () => {
for (let i = 0; i < beforeMarkerList.length; i++) {
if(undefined != beforeMarkerList[i]){
beforeMarkerList[i].setMap(null);
if(i == beforeMarkerList.length-1){
beforeMarkerList = [];
}
}
}
}
// 4. 관제 종료
clearTimeout(myVar);
markerList = [];
RESET_MARKER2();
const lastIndex = $intRate.find("coordinates").length-1;
myFunction(lastIndex);
const result ='총 거리 : 1.8km 총 소요시간 : 22분 ';
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = result;
});
<!-- html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="map" style="width:100%;height:500px;"></div>
</body>
</html>