폴리라인

Polyline 클래스는 연결된 선분의 선형 오버레이를 지도에 정의합니다. Polyline 객체는 LatLng 위치의 배열로 구성되며 해당 위치를 순서대로 연결하는 일련의 선분을 만듭니다.

폴리라인 옵션

Polyline 생성자는 선의 LatLng 좌표를 지정하는 Polyline options 집합과 스타일 집합을 가져와서 폴리라인의 시각적인 동작을 조정합니다.

Polyline은 일련의 직선 선분으로 지도에 그려집니다. 선을 생성하거나 생성 후 속성을 변경할 때 사용되는 Polyline options 객체에서 선의 획에 대한 맞춤 색상, 두께 및 불투명도를 지정할 수 있습니다. 폴리라인에서 지원하는 획 스타일은 다음과 같습니다.

strokeColor - "#FFFFFF" 형식의 16진수 HTML 색상을 지정합니다. Polyline 클래스는 이름이 지정된 색상을 지원하지 않습니다.
strokeOpacity - 선 색상의 불투명도에 대해 0.0 및 1.0(기본값) 사이의 분수 값을 지정합니다.
strokeWeight - 선 획의 두께를 픽셀 단위로 정의합니다.

다음 코드 스니펫은 Oakland, CA와 Brisbane, Australia 사이에 William Kingsford Smith의 첫 번째 태평양 횡단 항공 경로를 연결하는 2픽셀 너비의 빨간색 폴리라인을 만듭니다.


function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var myOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

예 보기(polyline-simple.html)

폴리라인 배열

폴리라인은 일련의 좌표를 LatLng 객체의 배열로 지정합니다. 이 좌표를 가져오려면 MVCArray 유형의 배열을 반환하는 Polyline의 getPath()를 호출합니다. 이렇게 하면 다음 작업을 사용하여 배열을 조정하고 검사할 수 있습니다.

getAt() - 0에서 시작하는 지정된 색인 값에서 LatLng를 반환합니다.
insertAt() - 0에서 시작하는 지정된 색인 값에서 전달된 LatLng를 삽입합니다. 해당 색인 값의 기존 좌표는 앞으로 이동합니다.
removeAt() - 0에서 시작하는 지정된 색인 값에서 LatLng를 제거합니다.

참고: mvcArray[i] 구문을 사용하여 배열의 i번째 요소를 가져올 수 없습니다. 이 경우 mvcArray.getAt(i)를 사용해야 합니다.

다음 코드는 사용자가 클릭하면 폴리라인을 생성하는 대화식 지도를 만듭니다. 폴리라인은 path 속성에 두 개의 LatLng 좌표가 포함되어야만 표시됩니다.


var poly;
var map;

function initialize() {
  var chicago = new google.maps.LatLng(41.879535, -87.624333);
  var myOptions = {
    zoom: 7,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

  var polyOptions = {
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  }
  poly = new google.maps.Polyline(polyOptions);
  poly.setMap(map);

  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', addLatLng);
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * @param {MouseEvent} mouseEvent
 */
function addLatLng(event) {

  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}

예 보기(polyline-complex.html)

폴리곤

Polygon 객체는 순서가 지정된 일련의 좌표로 이루어졌다는 점에서 Polyline 객체와 유사합니다. 그러나 폴리곤은 끝이 열려 있는 대신 닫힌 루프 내에서 지역을 정의하도록 디자인되었습니다. 폴리곤의 경우 폴리라인과 마찬가지로 윤곽선에 영향을 주는 획을 정의할 수 있으며, 폴리라인과 달리 내부에 채우기 지역을 정의할 수 있습니다.

또한 Polygon은 불연속성(하나의 폴리곤으로 정의된 여러 폴리곤), '도넛'(폴리곤 내부에 '섬'으로 표시되는 폴리곤 영역) 및 하나 이상의 폴리곤 교차점을 비롯하여 복잡한 모양을 표시할 수 있습니다. 따라서 한 개의 폴리곤이 여러 경로를 지정할 수 있습니다.

폴리곤 옵션

폴리라인과 같이 폴리곤의 모서리('획')에 대해 맞춤 색상, 두께 및 불투명도를 정의할 수 있으며 둘러싸인 지역 내 영역('채우기')에 대해 맞춤 색상 및 불투명도를 정의할 수 있습니다. 색상은 16진수 HTML 스타일로 지정해야 합니다.

폴리곤 영역은 여러 개의 별도 경로를 포함할 수 있기 때문에 Polygon 객체의 paths 속성은 '배열의 배열'을 정의합니다. 여기에서 각각 MVCArray 유형인 각 배열은 일련의 순서로 된 별도의 LatLng 좌표를 정의합니다.

하지만 간단한 폴리곤은 단 하나의 경로로 구성되므로 LatLng 좌표의 배열 한 개를 사용하여 편리하게 Polygon을 생성할 수 있습니다. Google Maps API는 이 간단한 배열이 생성되면 Polygon의 paths 속성에 저장할 때 '배열의 배열'로 변환합니다. 또한 API는 하나의 경로로 구성된 간단한 폴리곤을 위해 간단한getPath() 메소드를 제공합니다.

참고: 이 방법을 통해 폴리곤을 생성해도 경로를 MVCArray로 조작하여 폴리곤에서 값을 가져와야 합니다.

다음 코드 스니펫은 버뮤다 삼각지를 나타내는 폴리곤을 만듭니다.


function initialize() {
  var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
  var myOptions = {
    zoom: 5,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bermudaTriangle;

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];

  // Construct the polygon
  // Note that we don't specify an array or arrays, but instead just
  // a simple array of LatLngs in the paths property
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });

  bermudaTriangle.setMap(map);
}

예 보기(polygon-simple.html)

폴리곤 자동 완성

위 예제에서 Polygon은 4개의 좌표로 이루어졌지만 첫 번째와 마지막 좌표는 루프를 정의하는 동일한 위치입니다. 하지만 실제로 폴리곤은 닫힌 영역을 정의하기 때문에 이 마지막 좌표는 정의할 필요가 없습니다. Maps API는 지정된 경로에서 마지막 좌표를 다시 첫 번째 좌표와 연결하는 획을 그려서 폴리곤을 자동으로 '닫습니다'.

다음 예제는 첫 번째 예제와 동일하지만 마지막 좌표가 생략되었습니다.

예 보기(polygon-autoclose.html)

폴리곤 배열

폴리곤은 일련의 좌표를 배열의 배열로 지정합니다. 여기에서 각 배열은 MVCArray 유형입니다. 각 'leaf' 배열은 단일 경로를 지정하는 LatLng 좌표의 배열입니다. 이 좌표를 가져오기 위해 Polygon의 getPaths() 메소드를 호출합니다. 배열은 MVCArray이므로 다음 작업을 사용하여 배열을 처리하고 검사해야 합니다.

getAt() - 0에서 시작하는 지정된 색인 값에서 LatLng를 반환합니다.
insertAt() - 0에서 시작하는 지정된 색인 값에서 전달된 LatLng를 삽입합니다. 해당 색인 값의 기존 좌표는 앞으로 이동합니다.
removeAt() - 0에서 시작하는 지정된 색인 값에서 LatLng를 제거합니다.

참고: mvcArray[i] 구문을 사용하여 배열의 i번째 요소를 가져올 수 없습니다. 이 경우 mvcArray.getAt(i)를 사용해야 합니다.

다음 코드는 폴리곤의 좌표에 대한 정보를 표시하여 폴리곤에서의 click 이벤트를 처리합니다.


var map;
var infoWindow;

function initialize() {
  var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
  var myOptions = {
    zoom: 5,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bermudaTriangle;

  map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
  ];

  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });

  bermudaTriangle.setMap(map);

  // Add a listener for the click event
  google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

  infowindow = new google.maps.InfoWindow();
}

function showArrays(event) {

  // Since this Polygon only has one path, we can call getPath()
  // to return the MVCArray of LatLngs
  var vertices = this.getPath();

  var contentString = "<b>Bermuda Triangle Polygon</b><br />";
  contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";

  // Iterate over the vertices.
  for (var i =0; i < vertices.length; i++) {
    var xy = vertices.getAt(i);
    contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng();
  }

  // Replace our Info Window's content and position
  infowindow.setContent(contentString);
  infowindow.setPosition(event.latLng);

  infowindow.open(map);
}

예 보기(polygon-arrays.html)

'Backup' 카테고리의 다른 글

구글맵 - 레이어 (0)	2012.04.18
구글맵 - 원 & 직사각형 그리기 (0)	2012.04.18
구글맵 - 오버레이(마커) 애니메이션 효과 주기 (0)	2012.04.18
구글맵 - 오버레이(마커) 찍기 (0)	2012.04.18
구글맵 - 스타일링 (0)	2012.04.18

구글맵 - 폴리라인 & 폴리곤 그리기