KML 및 GeoRSS 계층

1. 개요
2. KML 계층 옵션
3. KML 지형지물 상세정보

KmlLayer는 KML과 GeoRSS 요소를 Maps API V3 타일 오버레이로 렌더링합니다.

개요

Google Maps API는 지리 정보를 표시하기 위한 KML 및 GeoRSS 데이터 형식을 지원합니다. 이러한 데이터 형식은 KmlLayer 객체를 이용하여 지도에 표시됩니다. 이 객체 생성자는 공개적으로 액세스할 수 있는 KML이나 GeoRSS 파일의 URL을 취합니다.

참고: 지원되는 요소와 크기, 복잡성 제한에 대한 자세한 내용은 KML 문서의 KML 지원 페이지를 읽어보세요.

Maps API는 제공된 지리적 XML 데이터를 V3 타일 오버레이로 지도에 표시되는 KML 표시로 변환합니다. 이 KML은 익숙한 V3 오버레이 요소와 형태와 일부 동작이 유사합니다. KML <Placemark>와 GeoRSS point 요소는 마커로 렌더링됩니다. 예를 들어, <LineString> 요소는 폴리라인으로 렌더링되고 <Polygon> 요소는 폴리곤으로 렌더링됩니다. 마찬가지로 <GroundOverlay> 요소는 지도에서 사각형 이미지로 렌더링됩니다. 그러나 이러한 객체는 Google Maps API Markers, Polylines, Polygons 또는 GroundOverlays가 아니며, 지도에 단일 객체로 렌더링됩니다.

KmlLayer 객체는 map 속성이 설정되면 지도에 나타납니다. setMap()을 호출하고 null을 전달하여 지도에서 객체를 제거할 수 있습니다. KmlLayer 객체는 지도의 주어진 경계에서 적절한 지형지물을 자동으로 검색하여 이러한 하위 요소의 렌더링을 관리합니다. 경계가 변경되면, 현재 뷰포트의 지형지물이 자동으로 렌더링됩니다.

KmlLayer 내부의 구성 요소는 주문에 따라 렌더링되므로, 계층에서 수천 개의 마커, 폴리라인, 폴리곤의 렌더링을 관리할 수 있습니다. 이러한 구성 객체는 각각 개별 객체에서 데이터를 반환하는 클릭 이벤트를 제공하지만, 직접 액세스할 수 없다는 점에 유의하세요.

KML 계층 옵션

KmlLayer() 생성자는 선택적으로 다수의 KmlLayerOptions를 전달합니다.

• map은 KmlLayer를 렌더링할 Map을 지정합니다. setMap() 메서드 내에서 이 값을 null로 설정하여 KmlLayer를 숨길 수 있습니다.
• preserveViewport는 계층을 표시할 때 지도가 KmlLayer 콘텐츠의 경계에 맞게 조정되지 않도록 지정합니다. 기본적으로, KmlLayer를 표시할 때, 계층의 콘텐츠를 모두 볼 수 있도록 지도의 확대/축소 수준과 위치가 조정됩니다.
• suppressInfoWindows는 KmlLayer 내부의 클릭 가능한 지형지물이 InfoWindow 객체를 표시해서는 안된다는 것을 나타냅니다.

또한, KmlLayer이 렌더링되면 KmlLayerMetadata 객체 리터럴 안에 계층 이름, 설명, 코드 조각, 저자를 포함하는 변경 불가능한 metadata 속성이 포함됩니다. getMetadata() 메서드를 사용하여 이 정보를 검사할 수 있습니다. KmlLayer 객체를 렌더링할 때 외부 서버와 비동기 통신이 필요하므로, metadata_changed 이벤트를 수신하기를 원할 수도 있습니다. 이 이벤트는 속성이 채워졌음을 나타냅니다.

다음 예시는 주어진 GeoRSS 피드에서 KmlLayer를 생성합니다.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 49.496675, lng: -102.65625}
  });

  var georssLayer = new google.maps.KmlLayer({
    url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
  });
  georssLayer.setMap(map);
}

GeoRSS 예시 보기

다음 예시는 주어진 KML 피드에서 KmlLayer를 생성합니다.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 41.876, lng: -87.624}
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    map: map
  });
}

KML 예시 보기

KML 지형지물 상세정보

KML에는 다수의 지형지물이 포함될 수 있으므로 KmlLayer 객체에서 직접 지형지물 데이터에 액세스하지 못할 수도 있습니다. 대신, 지형지물은 표시될 때 클릭 가능한 Maps API 오버레이와 유사하게 렌더링됩니다. 기본적으로 개별 지형지물을 클릭하면 주어진 지형지물에 대한 KML <title>과 <description> 정보가 포함된 InfoWindow가 나타납니다. 또한, KML 지형지물을 클릭하면 KmlMouseEvent가 발생하고, 이 이벤트가 다음 정보를 전달합니다.

• position은 이 KML 지형지물의 InfoWindow를 고정하는 위도/경도 좌표를 나타냅니다. 일반적으로 이 위치는 폴리곤, 폴리라인, GroundOverlay의 경우 클릭된 위치이지만, 마커의 경우 실제 원점입니다.
• pixelOffset은 InfoWindow “꼬리”를 고정하는 위의 position부터의 오프셋을 나타냅니다. 폴리곤 객체의 경우, 일반적으로 이 오프셋은 0,0이지만 마커의 경우 마커 높이가 포함됩니다.
• featureData에는 KmlFeatureData의 JSON 구조가 포함됩니다.

다음은 샘플 KmlFeatureData 객체입니다.

{
  author: {
    email: "[email protected]",
    name: "Mr Nobody",
    uri: "http://example.com"
  },
  description: "description",
  id: "id",
  infoWindowHtml: "html",
  name: "name",
  snippet: "snippet"
}

다음 예시는 지형지물을 클릭하면 측면 <div> 내부에 KML 지형지물 <Description> 텍스트를 표시합니다.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 37.06, lng: -95.68}
  });

  var kmlLayer = new google.maps.KmlLayer({
    url: 'http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml',
    suppressInfoWindows: true,
    map: map
  });

  kmlLayer.addListener('click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('content-window');
    sidediv.innerHTML = text;
  }
}

KML 예시 보기