routo Developers

공간객체 생성하기

지도에 공간객체를 생성하는 예제입니다. 공간객체는 공간정보와 속성위치를 가지고 있는 객체를 말합니다.
예를 들어 삼성역의 공간정보는 '경도:127.0631', '위도:37.5078' 이며 속성정보는 '명칭:삼성역', '호선:2' 입니다.

// 지도를 생성합니다.
var map = new routo.maps.Map("map");

// 점형 공간 객체를 생성 후 지도에 추가 합니다.
// 점형 공간정보를 생성합니다.
var point = new routo.maps.Data.Point({ lat: 37.507009, lng: 127.0586339 });
// 공간 객체를 생성합니다.
var feature = new routo.maps.Data.Feature({
      geometry: point,
      id: 1,
});
// 공간 객체를 추가합니다.
map.data.add(feature);

// 선형 공간 객체를 추가합니다. Feature를 생성하지 않고 추가합니다.
var coords = [
      { lat: 37.505009, lng: 127.0386339 }, // north west
      { lat: 37.487009, lng: 127.0386339 }, // south west
      { lat: 37.487009, lng: 127.0486339 }, // south east
      { lat: 37.507009, lng: 127.0486339 }, // north east
];
var lineString = new routo.maps.Data.LineString(coords);
map.data.add({
      geometry: lineString,
});

// 면형 공간 객체를 추가합니다.
// 면형 공간 좌표 입니다.
var outerCoords = [
      { lat: 37.507009, lng: 127.0586339 }, // north west
      { lat: 37.487009, lng: 127.0586339 }, // south west
      { lat: 37.487009, lng: 127.0886339 }, // south east
      { lat: 37.507009, lng: 127.0886339 }, // north east
];
// 면 내부에 뚫려있는 영역을 정의하는 공간 좌표 입니다.
var innerCoords = [
      { lat: 37.497009, lng: 127.0686339 }, // north west
      { lat: 37.492009, lng: 127.0686339 }, // south west
      { lat: 37.492009, lng: 127.0786339 }, // south east
      { lat: 37.497009, lng: 127.0786339 }, // north east
];
// 면형 공간 정보를 생성합니다.
var polygon = new routo.maps.Data.Polygon([outerCoords, innerCoords]);
// 면형 공간 객체를 추가합니다.
map.data.add({
      geometry: polygon,
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>공간객체 생성하기</title>
    
<style>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 400px;
  position: relative;
}</style>
  </head>
  <body>
    <h2>공간객체 생성하기</h2>
    <hr />
    <p>
      지도에 공간객체를 생성하는 예제입니다. 공간객체는 공간정보와 속성위치를 가지고 있는 객체를 말합니다. <br />
      예를 들어 삼성역의 공간정보는 '경도:127.0631', '위도:37.5078' 이며 속성정보는 '명칭:삼성역', '호선:2' 입니다.
    </p>
    <div id="map" class="map"></div>
  </body>
  <script src="https://api.routo.com/v2/maps/map?key=12290cd4-7094-43e8-a936-8819196d0332"></script>
  <script src="https://api.routo.com/v2/maps/js/data.js"></script>
  <script>
// 지도를 생성합니다.
var map = new routo.maps.Map("map");

// 점형 공간 객체를 생성 후 지도에 추가 합니다.
// 점형 공간정보를 생성합니다.
var point = new routo.maps.Data.Point({ lat: 37.507009, lng: 127.0586339 });
// 공간 객체를 생성합니다.
var feature = new routo.maps.Data.Feature({
      geometry: point,
      id: 1,
});
// 공간 객체를 추가합니다.
map.data.add(feature);

// 선형 공간 객체를 추가합니다. Feature를 생성하지 않고 추가합니다.
var coords = [
      { lat: 37.505009, lng: 127.0386339 }, // north west
      { lat: 37.487009, lng: 127.0386339 }, // south west
      { lat: 37.487009, lng: 127.0486339 }, // south east
      { lat: 37.507009, lng: 127.0486339 }, // north east
];
var lineString = new routo.maps.Data.LineString(coords);
map.data.add({
      geometry: lineString,
});

// 면형 공간 객체를 추가합니다.
// 면형 공간 좌표 입니다.
var outerCoords = [
      { lat: 37.507009, lng: 127.0586339 }, // north west
      { lat: 37.487009, lng: 127.0586339 }, // south west
      { lat: 37.487009, lng: 127.0886339 }, // south east
      { lat: 37.507009, lng: 127.0886339 }, // north east
];
// 면 내부에 뚫려있는 영역을 정의하는 공간 좌표 입니다.
var innerCoords = [
      { lat: 37.497009, lng: 127.0686339 }, // north west
      { lat: 37.492009, lng: 127.0686339 }, // south west
      { lat: 37.492009, lng: 127.0786339 }, // south east
      { lat: 37.497009, lng: 127.0786339 }, // north east
];
// 면형 공간 정보를 생성합니다.
var polygon = new routo.maps.Data.Polygon([outerCoords, innerCoords]);
// 면형 공간 객체를 추가합니다.
map.data.add({
      geometry: polygon,
});</script>
</html>

WEB JS

공간객체 생성하기