BigQuery 및 Datasets API를 사용한 데이터 시각화

이 문서에서는 공개 지자체 데이터 분석, 통신 서비스 제공 지역 지도 만들기, 모바일 차량 이동 흔적 시각화 등 Google Cloud Platform BigQuery 및 Google Maps Platform Datasets API에서 위치 데이터로 지도 데이터 시각화를 만들기 위한 참조 아키텍처와 예시를 제공합니다.

지도 데이터 시각화는 사용자의 참여를 유도하고 위치 데이터에서 공간 정보를 찾을 수 있는 강력한 도구입니다. 위치 데이터는 점, 선 또는 다각형 지형지물을 포함하는 데이터입니다. 예를 들어 날씨 지도는 소비자가 여행을 이해 및 계획하고 폭풍에 대비하는 데 도움을 줍니다. 비즈니스 인텔리전스 지도는 사용자가 데이터 분석에서 유용한 정보를 찾을 수 있도록 돕고, 통신 지도는 사용자가 제공업체를 이해하는 데 도움이 됩니다. 품질 보증 서비스를 제공합니다

그러나 앱 개발자가 성능과 뛰어난 사용자 환경을 제공하는 대규모 지도 데이터를 시각화하기는 어렵습니다. 대용량 데이터는 메모리 클라이언트 측에 로드해야 하므로 첫 번째 지도 로드 시간이 느려집니다. 시각적 요소는 메모리 및 GPU 제약이 있는 저사양 휴대전화를 포함한 모든 기기에서 제대로 작동해야 합니다. 마지막으로 개발자는 이동성, 신뢰성, 성능 저하가 없으며 대용량 데이터를 처리하는 대규모 데이터 렌더링 라이브러리를 선택해야 합니다.

참조 아키텍처

대규모 데이터를 시각화하는 앱을 개발하려면 두 가지 주요 구성요소가 필요합니다.

  1. 고객 백엔드 - 모든 백엔드 앱 데이터 및 컴퓨팅, 스토리지, 스토리지 등의 서비스를 예로 들 수 있습니다
  2. 고객 클라이언트 - 지도 시각화 구성요소가 포함된 앱 사용자 인터페이스입니다.

다음은 이러한 두 구성요소가 앱 사용자인 Google Cloud, Google Maps Platform과 상호작용하여 대규모 데이터 시각화 앱을 만드는 방식을 보여주는 시스템 다이어그램입니다.

아키텍처 다이어그램

<ph type="x-smartling-placeholder">

설계 고려사항

Google Cloud 및 Google Maps Platform을 사용하여 고성능 데이터 시각화를 만들려면 몇 가지 설계 고려사항이 있습니다.

  1. 소스 데이터 크기 및 업데이트 빈도.
    1. geojson 형식의 소스 데이터가 5MB 미만이거나 자주 업데이트되는 경우(예: 실시간 날씨 레이더 예보를 보려면 앱에서 데이터를 geojson 객체 클라이언트 측으로 제공하고 deck.gl 레이어로 렌더링하는 것이 좋습니다.
    2. 데이터 크기가 5MB를 초과하고 시간당 1회 미만으로 업데이트되는 경우 이 문서의 Datasets API 아키텍처를 고려하세요.
      1. 데이터 세트는 최대 350MB 크기의 파일을 지원합니다.
      2. 데이터가 350MB보다 큰 경우 데이터 세트로 전달하기 전에 소스 파일의 도형 데이터를 프루닝하거나 간소화하는 것이 좋습니다 (아래의 데이터 프루닝 참조).
  2. 스키마 및 형식 <ph type="x-smartling-placeholder">
      </ph>
    1. 데이터에 각 기능에 대한 전역적으로 고유한 ID 속성이 있는지 확인하세요. 고유 ID를 사용하면 특정 지형지물을 선택하고 스타일을 지정하거나 시각화할 지형지물에 데이터를 조인할 수 있습니다. 예를 들어 '클릭' 사용자 이벤트에서 선택한 지형지물의 스타일을 지정할 수 있습니다.
    2. 유효한 열 이름, 데이터 유형, GeoJSON 객체 유형을 사용하여 Datasets API 사양에 따라 CSV 또는 GeoJSON로 데이터 형식을 지정하세요.
    3. BigQuery에서 데이터 세트를 쉽게 만들려면 SQL CSV 내보내기에서 wkt이라는 열을 만듭니다. 데이터 세트는 wkt이라는 열에서 Well-Known Text (WKT) 형식의 CSV에서 도형 가져오기를 지원합니다.
    4. 데이터가 유효한 도형 및 데이터 유형인지 확인하세요. 예를 들어 GeoJSON은 WGS84 좌표계, 도형 와인딩 순서 등에 있어야 합니다.
    5. geojson-validate와 같은 도구를 사용하여 소스 파일의 모든 도형이 유효한지 확인하거나 ogr2ogr과 같은 도구를 사용하여 소스 파일을 형식 또는 좌표계 간에 변환합니다.
  3. 데이터 프루닝 <ph type="x-smartling-placeholder">
      </ph>
    1. 지형지물의 속성 수를 최소화합니다. 런타임 시 고유 식별자 키를 통해 추가 속성을 지형지물에 조인할 수 있습니다 (예).
    2. 가능한 경우 속성 객체에 정수 데이터 유형을 사용하여 타일 저장 공간을 최소화하고 클라이언트 앱에서 HTTPS를 통해 타일 로드 성능을 유지합니다.
    3. 매우 복잡한 지형지물 도형을 단순화 및/또는 집계 복잡한 다각형 도형에 ST_Simplify과 같은 BigQuery 함수를 사용하여 소스 파일 크기를 줄이고 지도 성능을 개선해 보세요.
  4. 타일식 <ph type="x-smartling-placeholder">
      </ph>
    1. Google Maps Datasets API는 웹 또는 모바일 Maps SDK에서 사용할 소스 데이터 파일에서 지도 타일을 만듭니다.
    2. 지도 타일은 확대/축소 기반 색인 생성 시스템으로, 시각적 앱에 데이터를 더 효율적으로 로드하는 방법을 제공합니다.
    3. 지도 타일은 낮은 확대/축소 수준에서 밀집하거나 복잡한 지형지물을 떨어뜨릴 수 있습니다. 사용자가 주 또는 국가로 축소하면 (예: z5-z12) 도시 또는 인근 지역으로 확대했을 때와 다르게 보일 수 있습니다 (예: z13-z18).

예 - 런던의 철도

이 예에서는 참조 아키텍처를 적용하여 OSM (Open Street Map) 데이터로부터 런던의 모든 철도를 시각화하는 GCP와 Google 지도로 웹 애플리케이션을 만듭니다.

기본 요건

  1. BigQuery 샌드박스 및 Cloud Console 액세스
  2. GCP 프로젝트와 결제 계정이 설정되어 있는지 확인합니다.

1단계 - BigQuery에서 데이터 쿼리하기

BigQuery 공개 데이터 세트로 이동합니다. 데이터 세트 'bigquery-public-data' geo_openstreetmap.planet_features 테이블에는 가능한 모든 지형지물을 포함하여 지구 전체의 오픈 스트리트 지도 (OSM) 데이터가 포함되어 있습니다. amenity, road, landuse를 포함하여 OSM 위키에서 쿼리할 수 있는 모든 기능을 살펴보세요.

SQL을 사용하여 테이블을 쿼리하려면 Cloud Shell 또는 BigQuery Cloud 콘솔(https://console.cloud.google.com)을 사용합니다. 아래의 코드 스니펫에서는 bq query 명령어를 사용하여 경계 상자와 ST_Intersects() 함수를 사용하여 런던으로만 필터링된 모든 철도를 쿼리합니다.

Cloud Shell에서 이 쿼리를 수행하려면 다음 코드 스니펫을 실행하여 환경의 프로젝트 ID, 데이터 세트, 테이블 이름을 업데이트합니다.

bq query --use_legacy_sql=false \
--destination_table PROJECTID:DATASET.TABLENAME \
--replace \
'SELECT
osm_id, 
feature_type,
(SELECT value
         FROM   unnest(all_tags)
         WHERE  KEY = "name") AS name,
(SELECT value
         FROM   unnest(all_tags)
         WHERE  KEY = "railway") AS railway,
geometry as wkt
FROM   bigquery-public-data.geo_openstreetmap.planet_features
WHERE ("railway") IN (SELECT key FROM unnest(all_tags)) 
    AND ST_Intersects(
    geometry,
ST_MakePolygon(ST_MakeLine(
      [ST_GeogPoint(-0.549370, 51.725346),
      ST_GeogPoint(-0.549370, 51.2529407),
      ST_GeogPoint(0.3110581, 51.25294),
      ST_GeogPoint(0.3110581, 51.725346),
      ST_GeogPoint(-0.549370, 51.725346)]
    ))
   )'

쿼리는 다음을 반환합니다.

  1. 각 지형지물 osm_id의 고유 식별자
  2. feature_type 예: 점, 선 등
  3. 특성의 name입니다. 예: Paddington Station
  4. railway 유형. 예: 주요, 관광, 군대 등
  5. 지형지물의 wkt - WKT 형식의 점, 선 또는 다각형 도형 WKT는 BigQuery 지역 열이 쿼리에서 반환하는 표준 데이터 형식입니다.

참고 - 데이터 세트를 만들기 전에 쿼리 결과를 시각적으로 검사하려면 Looker Studio를 사용하여 BigQuery에서 대시보드에서 데이터를 빠르게 시각화할 수 있습니다.

테이블을 Google Cloud Storage 버킷의 CSV 파일로 내보내려면 Cloud Shell에서 bq extract 명령어를 사용합니다.

bq extract \
--destination_format "CSV" \
--field_delimiter "," \
--print_header=true \
PROJECTID:DATASET.TABLENAME \
gs://BUCKET/FILENAME.csv

참고: Cloud Scheduler를 사용하면 각 단계를 자동화하여 데이터를 정기적으로 업데이트할 수 있습니다.

2단계 - CSV 파일로 데이터 세트 만들기

다음으로 GCS (Google Cloud Storage)의 쿼리 출력에서 Google Maps Platform 데이터 세트를 만듭니다. Datasets API를 사용하여 데이터 세트를 생성한 다음 GCS에 호스팅된 파일에서 데이터 세트에 데이터를 업로드할 수 있습니다.

시작하려면 GCP 프로젝트에서 Maps Datasets API를 사용 설정하고 API 문서를 검토하세요. 앱 백엔드의 로직에서 Datasets API를 호출하기 위한 Python 및 Node.js 클라이언트 라이브러리가 있습니다. 또한 Cloud 콘솔에서 수동으로 데이터 세트를 만들 수 있는 데이터 세트 GUI도 있습니다.

데이터 세트 업로드가 완료되면 데이터 세트 GUI에서 데이터 세트를 미리 볼 수 있습니다.

데이터 세트 미리보기

4단계 - 데이터 세트를 지도 ID와 연결

데이터 세트가 생성되면 연결된 지도 스타일로 지도 ID를 생성할 수 있습니다. 지도 스타일 편집기에서 지도 ID 및 스타일을 데이터 세트와 연결할 수 있습니다. 클라우드 기반 지도 스타일 지정을 적용하여 지도의 디자인과 분위기를 맞춤설정할 수도 있습니다.

5단계 - 클라이언트 앱 지도 시각화 만들기

마지막으로 Maps JS API를 사용하여 클라이언트 측 데이터 시각화 앱에 데이터 세트를 추가할 수 있습니다. 이전 단계의 데이터 세트와 연결된 mapID를 사용하여 지도 객체를 초기화합니다. 그런 다음 데이터 세트 레이어의 스타일과 상호작용을 설정합니다. 자세한 내용은 데이터 세트를 사용한 데이터 기반 스타일 지정 가이드를 참고하세요.

Maps JS API를 사용하여 스타일을 맞춤설정하고 스타일을 동적으로 변경하기 위한 이벤트 핸들러를 추가하는 등의 작업을 할 수 있습니다. 문서의 예를 참고하세요. 아래에서는 'feature_type' 속성을 기반으로 이 예에서 점 및 선 지형지물 스타일을 만드는 setStyle 함수를 정의합니다.

function setStyle(params) {
  const map.getDatasetFeatureLayer("your-dataset-id");
  const datasetFeature = params.feature;
  const type = datasetFeature.datasetAttributes["feature_type"];
if (type == "lines") {
           return {
             fillColor: "blue",
             strokeColor: "blue",
             fillOpacity: 0.5,
             strokeWeight: 1,
           }
         } else if (type == "points") {
           return {
             fillColor: "black",
             strokeColor: "black",
             strokeOpacity: 0.5,
             pointRadius: 2,
             fillOpacity: 0.5,
             strokeWeight: 1,
           }
     }
}

참고 - 항상 지도 앱에 데이터 세트의 속성을 추가해야 합니다. OSM 기여 분석을 추가하려면 OSM 가이드라인을 준수하는 문서의 기여 분석 코드 예시를 따르세요.

위의 코드를 단일 페이지 웹 앱에서 초기화하면 다음과 같은 지도 데이터 시각 자료가 생성됩니다.

런던 철도 지도

여기에서 지형지물을 필터링하는 로직을 추가하고, 사용자 상호작용을 기반으로 스타일을 추가하며, 애플리케이션의 나머지 부분과 상호작용하여 setStyle() 함수에서 지도 시각화를 확장할 수 있습니다.

결론

이 도움말에서는 Google Cloud 및 Google Maps Platform을 사용하는 대규모 데이터 시각화 애플리케이션의 참조 아키텍처와 구현 예를 설명했습니다. 이 참조 아키텍처를 사용하면 Google Maps Datasets API를 통해 모든 기기에서 작동하는 GCP BigQuery의 모든 데이터로 위치 데이터 시각화 앱을 만들 수 있습니다.

다음 작업

추가 자료:

참여자

수석 저자: