routo Developers

스타일 편집

지도에 공간객체의 스타일을 설정하는 예제입니다.
특정 공간객체의 스타일만 변경할 수 있습니다.

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

// 지도를 생성합니다.
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]);
// 면형 공간 객체를 추가합니다.
var polygonFeature = map.data.add({
    geometry: polygon,
});

// 지도 Data 에 포함된 모든 공간객체의 스타일을 설정합니다.
map.data.setStyle({
    fillColor: "#ff0000",   // 채우기 색상
    fillOpacity: 0.3,       // 채우기 투명도
    strokeColor: "#0000ff", // 테두리 색상
    strokeOpacity: 1,       // 테두리 투명도
    strokeWeight: 2,        // 테두리 굵기
    label: "스타일",
    visible: true,
});

// 점형 공간객체의 라벨을 변경합니다.
map.data.overrideStyle(feature, {
    label: "라벨변경"
});

// 면형 공간객체의 채우기 색상을 노란색으로 변경합니다.
map.data.overrideStyle(polygonFeature, {
    fillColor: "#ffff00"
});

<!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>
        지도에 공간객체의 스타일을 설정하는 예제입니다. 특정 공간객체의 스타일만 변경할 수 있습니다.
    </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");

        // 점형 공간 객체를 생성 후 지도에 추가 합니다.
        // 점형 공간정보를 생성합니다.
        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]);
        // 면형 공간 객체를 추가합니다.
        var polygonFeature = map.data.add({
            geometry: polygon,
        });

        // 지도 Data 에 포함된 모든 공간객체의 스타일을 설정합니다.
        map.data.setStyle({
            fillColor: "#ff0000",   // 채우기 색상
            fillOpacity: 0.3,       // 채우기 투명도
            strokeColor: "#0000ff", // 테두리 색상
            strokeOpacity: 1,       // 테두리 투명도
            strokeWeight: 2,        // 테두리 굵기
            label: "스타일",
            visible: true,
        });

        // 점형 공간객체의 라벨을 변경합니다.
        map.data.overrideStyle(feature, {
            label: "라벨변경"
        });

        // 면형 공간객체의 채우기 색상을 노란색으로 변경합니다.
        map.data.overrideStyle(polygonFeature, {
            fillColor: "#ffff00"
        });
    </script>
</body>
</html>

WEB JS