• routo Service
  • routo Developers
  • routo Demo

WEB JS

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

공간객체 스타일 변경하기

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

// 지도를 생성합니다.
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"
});