routo Developers

데이터를 입력하여 공간 객체 생성하기

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

* 지도 데이터 레이어를 사용하려면 routo.maps.data 모듈을 추가해야 합니다. (Javascript + HTML 탭 참조)

// 지도를 생성합니다.
var map = new routo.maps.Map("map", {
    center: { lat: 37.5118334618183, lng: 127.06492163572027 }, // 지도 초기 위치
    zoom: 16, // 지도 로딩 시 최초 표시 레벨
});

map.addListener("click", (e) => {
        console.log(`{ lng: ${e.latLng.lng()}, lat: ${e.latLng.lat()} },`);
});

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

// 선형 공간 객체를 추가합니다. Feature를 생성하지 않고 추가합니다.
var coords = [
        { lng: 127.05633856687261, lat: 37.51354509816453 },
        { lng: 127.06028677854253, lat: 37.51422591215082 },
        { lng: 127.0631621066065, lat: 37.50891539835541 },
        { lng: 127.06689574155523, lat: 37.50998774408569 },
];
var lineString = new routo.maps.Data.LineString(coords);
map.data.add({
        geometry: lineString,
});

// 면형 공간 객체를 추가합니다.
// 면형 공간 좌표 입니다.
var outerCoords = [
        { lng: 127.0611665430994, lat: 37.51311958626927 },
        { lng: 127.06253983411503, lat: 37.51065156943656 },
        { lng: 127.06537224683477, lat: 37.51155368160413 },
        { lng: 127.06395604047489, lat: 37.51405570923649 },
        { lng: 127.0611665430994, lat: 37.51311958626927 },
];
// 면 내부에 뚫려있는 영역을 정의하는 공간 좌표 입니다.
var innerCoords = [
        { lng: 127.06266858014774, lat: 37.51260896879268 },
        { lng: 127.06269003781988, lat: 37.511860056841115 },
        { lng: 127.06389166745853, lat: 37.51187707765075 },
        { lng: 127.06387020978643, lat: 37.51260896879268 },
        { lng: 127.06266858014774, lat: 37.51260896879268 },
];
// 면형 공간 정보를 생성합니다.
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: 0px 15px 10px 15px;
        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>
    <script src="https://api.routo.com/v2/maps/map?key={APIKEY}"></script>
    <script src="https://api.routo.com/v2/maps/js/data.js"></script>
    <script>
        // 지도를 생성합니다.
        var map = new routo.maps.Map("map", {
            center: { lat: 37.5118334618183, lng: 127.06492163572027 }, // 지도 초기 위치
            zoom: 16, // 지도 로딩 시 최초 표시 레벨
        });
        
        map.addListener("click", (e) => {
            console.log(`{ lng: ${e.latLng.lng()}, lat: ${e.latLng.lat()} },`);
        });
        
        // 점형 공간 객체를 생성 후 지도에 추가 합니다.
        // 점형 공간정보를 생성합니다.
        var point = new routo.maps.Data.Point({ lat: 37.5109834798981, lng: 127.05965377721506 });
        // 공간 객체를 생성합니다.
        var feature = new routo.maps.Data.Feature({
            geometry: point,
            id: 1,
        });
        // 공간 객체를 추가합니다.
        map.data.add(feature);
        
        // 선형 공간 객체를 추가합니다. Feature를 생성하지 않고 추가합니다.
        var coords = [
            { lng: 127.05633856687261, lat: 37.51354509816453 },
            { lng: 127.06028677854253, lat: 37.51422591215082 },
            { lng: 127.0631621066065, lat: 37.50891539835541 },
            { lng: 127.06689574155523, lat: 37.50998774408569 },
        ];
        var lineString = new routo.maps.Data.LineString(coords);
        map.data.add({
            geometry: lineString,
        });
        
        // 면형 공간 객체를 추가합니다.
        // 면형 공간 좌표 입니다.
        var outerCoords = [
            { lng: 127.0611665430994, lat: 37.51311958626927 },
            { lng: 127.06253983411503, lat: 37.51065156943656 },
            { lng: 127.06537224683477, lat: 37.51155368160413 },
            { lng: 127.06395604047489, lat: 37.51405570923649 },
            { lng: 127.0611665430994, lat: 37.51311958626927 },
        ];
        // 면 내부에 뚫려있는 영역을 정의하는 공간 좌표 입니다.
        var innerCoords = [
            { lng: 127.06266858014774, lat: 37.51260896879268 },
            { lng: 127.06269003781988, lat: 37.511860056841115 },
            { lng: 127.06389166745853, lat: 37.51187707765075 },
            { lng: 127.06387020978643, lat: 37.51260896879268 },
            { lng: 127.06266858014774, lat: 37.51260896879268 },
        ];
        // 면형 공간 정보를 생성합니다.
        var polygon = new routo.maps.Data.Polygon([outerCoords, innerCoords]);
        // 면형 공간 객체를 추가합니다.
        map.data.add({
            geometry: polygon,
        });
    </script>
</body>
</html>

WEB JS