• routo Service
  • routo Developers
  • routo Demo

WEB JS

웹 개발, 어플리케이션에서 활용될 수 있도록 Javascript로 제공되는 지도 플랫폼 입니다.

위치관제 지도 생성

소개

이 튜토리얼에서는 위치정보 데이터를 이용하여 위치관제 지도를 띄워보는 과정에 대해 설명합니다.

준비

1. 기본 지도 생성

기본 지도를 생성합니다.

// js
$(function () {
  // 1. 기본 지도 생성
  const options = {
    // 지도 초기 위치
    center: { lat : 37.5100, lng: 127.0504 },
    // 지도 로딩 시 최초 표시 레벨
    zoom: 16,
    // 지도 최소 표시 레벨
    minZoom: 7,
    // 지도 최대 표시 레벨
    maxZoom: 19,
    // 지도 회전 가능 여부
    enableRotation: true,
    // 키보드 단축키로 지도 이동 가능 여부
    keyboardShortcuts: false
  };
  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,
    // 지도 회전 가능 여부
    enableRotation: true,
    // 키보드 단축키로 지도 이동 가능 여부
    keyboardShortcuts: false
  };
  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,
    // 지도 회전 가능 여부
    enableRotation: true,
    // 키보드 단축키로 지도 이동 가능 여부
    keyboardShortcuts: false
  };
  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,
    // 지도 회전 가능 여부
    enableRotation: true,
    // 키보드 단축키로 지도 이동 가능 여부
    keyboardShortcuts: false
  };
  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>