• routo Service
  • routo Developers
  • routo Demo

WEB GL JS

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

폴리곤 생성/삭제

routogl 지도에 폴리곤을 생성/삭제하는 예제입니다. 

const map = new routogl.Map({
  container: 'map', // container ID
  style: routogl.RoutoStyle.LIGHT,
  center: [127.0586339, 37.507009], // 초기 위치 [lng, lat]
  zoom: 17, // 초기 줌 레벨
});

map.on('load', () => {
  // 폴리곤 소스 생성
  map.addSource('maine', {
    'type': 'geojson',
    'data': {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': [
          [
            [127.0584339, 37.506709],
            [127.0585739, 37.506109],
            [127.0589739, 37.506109],
            [127.0589739, 37.506809],
            [127.0587239, 37.507809],
            [127.0587239, 37.507809],
            [127.0585639, 37.507509],
            [127.0584339, 37.506709],
          ]
        ]
      }
    }
  });

  // 폴리곤 내부 스타일이 정의된 레이어 생성
  map.addLayer({
    'id': 'maine',
    'type': 'fill',
    'source': 'maine', // reference the data source
    'layout': {},
    'paint': {
      'fill-color': '#0080ff', // blue color fill
      'fill-opacity': 0.5
    }
  });

  // 폴리곤 둘레 선 스타일이 정의된 레이어 생성
  map.addLayer({
    'id': 'outline',
    'type': 'line',
    'source': 'maine',
    'layout': {},
    'paint': {
      'line-color': '#000',
      'line-width': 3
    }
  });
});

// 폴리곤 삭제
const removePolygon = document.getElementById('removePolygon');
removePolygon.addEventListener('click', () => {
  if (map.getLayer('maine')) map.removeLayer('maine');
  if (map.getLayer('outline')) map.removeLayer('outline');
  map.removeSource('maine');
});