데이터 영역

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
플랫폼 선택: Android iOS 자바스크립트

Google 지도 데이터 계층은 임의의 지리 공간 데이터를 위한 컨테이너를 제공합니다. 데이터 영역을 사용하여 맞춤 데이터를 저장하거나 Google 지도에 GeoJSON 데이터를 표시할 수 있습니다.

개요

이 DevBytes 동영상을 보면 데이터 계층에 대해 좀 더 자세히 알 수 있습니다.

Maps JavaScript API를 사용하면 마커, 다중선, 다각형 등 다양한 오버레이가 포함된 지도를 마크업할 수 있습니다. 이러한 각 주석은 스타일 지정 정보를 위치 데이터와 결합합니다. google.maps.Data 클래스는 임의의 지리 공간 데이터의 컨테이너입니다. 이러한 오버레이를 추가하는 대신 데이터 영역을 사용하여 지도에 지리적 데이터를 추가할 수 있습니다. 데이터에 도형, 선 또는 다각형과 같은 도형이 포함되어 있으면 API에서 기본적으로 마커, 다중선, 다각형으로 렌더링합니다. 일반 오버레이처럼 이러한 지형지물의 스타일을 지정하거나 데이터 세트에 포함된 다른 속성을 기반으로 스타일 지정 규칙을 적용할 수 있습니다.

google.maps.Data 클래스를 사용하면 다음을 수행할 수 있습니다.

  • 지도에 다각형 그리기.
  • 지도에 GeoJSON 데이터를 추가합니다.
    GeoJSON은 인터넷의 지리정보 데이터 표준입니다. Data 클래스는 데이터 표현의 GeoJSON 구조를 따라 GeoJSON 데이터를 쉽게 표시할 수 있습니다. loadGeoJson() 메서드를 사용하여 GeoJSON 데이터를 쉽게 가져오고 점, 선 문자열, 다각형을 표시할 수 있습니다.
  • google.maps.Data를 사용하여 임의의 데이터를 모델링합니다.
    대부분의 실제 항목에는 다른 속성이 연결되어 있습니다. 예를 들어 매장에는 영업시간이 정해져 있고 도로는 통행 속도가 높으며 각 여성 가이드 극단에는 쿠키 판매 구역이 있습니다. google.maps.Data를 사용하면 이러한 속성을 모델링하고 그에 따라 데이터의 스타일을 지정할 수 있습니다.
  • 데이터가 표시되는 방식을 선택하고 즉시 상황을 변경합니다.
    데이터 레이어를 사용하면 데이터의 시각화 및 상호작용에 대한 결정을 내릴 수 있습니다. 예를 들어 편의점 지도를 볼 때 대중교통 티켓을 판매하는 매장만 표시할 수 있습니다.

폴리곤 그리기

Data.Polygon 클래스는 다각형 감기를 자동으로 처리합니다. 위도/경도 좌표로 정의된 하나 이상의 선형 링 배열을 전달할 수 있습니다. 첫 번째 선형 링은 다각형의 바깥쪽 경계를 정의합니다. 선형 링을 두 개 이상 전달하면 두 번째 및 그 이후의 선형 링이 다각형의 내부 경로(구멍)를 정의하는 데 사용됩니다.

다음 예시에서는 두 개의 구멍이 안에 있는 직사각형 폴리곤을 만듭니다.

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

자바스크립트

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 },
    { lat: -35.364, lng: 153.207 },
    { lat: -35.364, lng: 158.207 },
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;

GeoJSON 로드

GeoJSON은 인터넷에서 지리 공간 데이터 공유를 위한 공통 표준입니다. 가볍고 사람이 쉽게 읽을 수 있으므로 공유 및 공동작업에 이상적입니다. 데이터 영역을 사용하면 단 한 줄의 코드로 Google 지도에 GeoJSON 데이터를 추가할 수 있습니다.

map.data.loadGeoJson('google.json');

모든 지도에는 map.data 객체가 있으며, 이 객체는 GeoJSON을 비롯하여 임의의 지리정보 데이터의 데이터 레이어 역할을 합니다. data 객체의 loadGeoJSON() 메서드를 호출하여 GeoJSON 파일을 로드하고 표시할 수 있습니다. 아래 예는 지도를 추가하고 외부 GeoJSON 데이터를 로드하는 방법을 보여줍니다.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

자바스크립트

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

샘플 GeoJSON

이 페이지의 대부분의 예시는 공통 GeoJSON 파일을 사용합니다. 이 파일은 오스트레일리아 위에 6개의 문자를 ‘Google’의 다각형으로 정의합니다. 데이터 영역을 테스트할 때 이 파일을 자유롭게 복사하거나 수정하세요.

참고: 다른 도메인에서 json 파일을 로드하려면 해당 도메인에서 교차 출처 리소스 공유를 사용 설정해야 합니다.

아래의 전체 텍스트는 텍스트 google.json 옆에 있는 작은 화살표를 펼쳐서 볼 수 있습니다.

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

GeoJSON 데이터 스타일 지정

Data.setStyle() 메서드를 사용하여 데이터가 표시되는 방식을 지정합니다. setStyle() 메서드는 StyleOptions 객체 리터럴 또는 각 기능의 스타일을 계산하는 함수를 사용합니다.

간단한 스타일 규칙

지형지물의 스타일을 지정하는 가장 간단한 방법은 StyleOptions 객체 리터럴을 setStyle()에 전달하는 것입니다. 이렇게 하면 컬렉션의 각 지형지물에 단일 스타일이 설정됩니다. 각 기능 유형은 사용 가능한 옵션의 하위 집합만 렌더링할 수 있습니다. 즉, 다양한 객체 유형의 스타일을 단일 객체 리터럴에 결합할 수 있습니다. 예를 들어 아래 스니펫은 점 도형에만 영향을 미치는 맞춤 icon와 다각형에만 영향을 주는 fillColor를 모두 설정합니다.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

유효한 스타일/지형지물 조합에 관한 자세한 내용은 스타일 옵션을 참고하세요.

다음은 StyleOptions 객체 리터럴을 사용하여 여러 지형지물의 획 및 채우기 색상을 설정하는 예입니다. 각 다각형의 스타일은 같습니다.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

선언적 스타일 규칙

마커나 다중선과 같이 많은 오버레이의 스타일을 업데이트하려면 지도에서 각 오버레이를 반복하고 스타일을 개별적으로 설정해야 합니다. 데이터 영역을 사용하면 규칙을 선언적으로 설정할 수 있고, 이러한 규칙은 전체 데이터 세트에 적용됩니다. 데이터 또는 규칙이 업데이트되면 스타일 지정이 모든 지형지물에 자동으로 적용됩니다. 지형지물 속성을 사용하여 스타일을 사용자 지정할 수 있습니다.

예를 들어 아래 코드는 ASCII 문자 집합에서 위치를 검사하여 google.json의 각 문자 색상을 설정합니다. 여기서는 데이터와 함께 문자 위치를 인코딩했습니다.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

스타일 제거

적용된 스타일을 삭제하려면 빈 객체 리터럴을 setStyles() 메서드에 전달합니다.

// Remove custom styles.
map.data.setStyle({});

이렇게 하면 지정한 모든 맞춤 스타일이 삭제되며, 지형지물은 기본 스타일을 사용하여 렌더링됩니다. 대신 기능을 더 이상 렌더링하지 않으려면 StyleOptionsvisible 속성을 false로 설정합니다.

// Hide the Data layer.
map.data.setStyle({visible: false});

기본 스타일 재정의

스타일링 규칙은 통상 데이터 계층의 모든 특징에 적용됩니다. 그러나 특정 지형지물에 특정 스타일 지정 규칙을 적용해야 하는 경우도 있습니다. 예를 들어, 클릭 시 지형지물을 강조 표시하는 방식이 있습니다.

특별한 스타일 지정 규칙을 적용하려면 overrideStyle() 메서드를 사용합니다. overrideStyle() 메서드를 사용하여 변경한 모든 속성은 setStyle()에 이미 지정된 전역 스타일에 추가로 적용됩니다. 예를 들어 아래 코드는 클릭 시 다각형의 채우기 색상을 변경하지만 다른 스타일은 설정하지 않습니다.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

revertStyle() 메서드를 호출하여 모든 스타일 재정의를 삭제합니다.

스타일 옵션

각 지형지물의 스타일링에 사용할 수 있는 옵션은 지형지물 유형에 따라 달라집니다. 예를 들어 fillColor은 다각형 도형에서만 렌더링되지만 icon는 점 도형에만 표시됩니다. 자세한 내용은 StyleOptions 참조 문서를 확인하세요.

모든 도형에서 사용 가능

  • clickable: true인 경우 이 기능이 마우스 및 터치 이벤트를 수신합니다.
  • visible: true인 경우 기능이 표시됩니다.
  • zIndex: 모든 지형지물이 지도에 zIndex에 따라 표시되며, 값이 더 높은 값을 갖는 기능 앞에 표시됩니다. 마커는 항상 선 문자열과 폴리곤 앞에 표시됩니다.

점 도형에서 사용 가능

  • cursor: 마우스를 가져가면 표시되는 마우스 커서입니다.
  • icon: 점 도형에 표시할 아이콘입니다.
  • shape: 조회를 감지하기 위해 사용되는 이미지 지도를 정의합니다.
  • title: 이월 텍스트.

선 도형에서 사용 가능

  • strokeColor: 획 색상입니다. 이름이 지정된 확장 색상을 제외한 모든 CSS3 색상이 지원됩니다.
  • strokeOpacity: 0.0에서 1.0 사이의 획 불투명도입니다.
  • strokeWeight: 픽셀 단위의 획 너비입니다.

다각형 도형에서 사용 가능

  • fillColor: 채우기 색상입니다. 이름이 지정된 확장 색상을 제외한 모든 CSS3 색상이 지원됩니다.
  • fillOpacity: 0.01.0. 사이의 채우기 불투명도
  • strokeColor: 획 색상입니다. 이름이 지정된 확장 색상을 제외한 모든 CSS3 색상이 지원됩니다.
  • strokeOpacity: 0.0에서 1.0 사이의 획 불투명도입니다.
  • strokeWeight: 픽셀 단위의 획 너비입니다.

이벤트 핸들러 추가

기능은 mouseup 또는 mousedown와 같은 이벤트에 응답합니다. 이벤트 리스너를 추가하여 사용자가 지도의 데이터와 상호작용할 수 있도록 할 수 있습니다. 아래 예에서는 마우스 커서 아래에 지형지물에 대한 정보를 표시하는 마우스 오버 이벤트를 추가합니다.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

데이터 계층 이벤트

다음 이벤트는 도형 유형에 관계없이 모든 지형지물에 공통적으로 적용됩니다.

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

이러한 이벤트에 대한 자세한 내용은 google.maps.data 클래스의 참조 문서에서 확인할 수 있습니다.

동적으로 모양 변경

각 지형지물의 스타일을 계산하는 함수를 google.maps.data.setStyle() 메서드에 전달하여 데이터 영역의 스타일을 설정할 수 있습니다. 이 함수는 특성의 속성이 업데이트될 때마다 호출됩니다.

아래 예시에서는 기능의 isColorful 속성을 업데이트하는 click 이벤트에 대한 이벤트 리스너를 추가합니다. 지형지물 스타일이 설정되는 즉시 변경사항을 반영하여 지형지물 스타일 지정이 업데이트됩니다.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});