Memvisualisasikan data dengan BigQuery dan Datasets API

Dokumen ini memberikan arsitektur referensi dan contoh untuk membuat visualisasi data peta dengan data lokasi di BigQuery Google Cloud Platform dan Google Maps Platform Datasets API, seperti menganalisis data kota terbuka, membuat peta cakupan telekomunikasi, atau memvisualisasikan jejak pergerakan armada kendaraan seluler.

Visualisasi data peta adalah alat yang ampuh untuk melibatkan pengguna dan mengungkap wawasan spasial dalam data lokasi. Data lokasi adalah data yang memiliki fitur titik, garis, atau poligon. Misalnya, peta cuaca membantu konsumen memahami dan merencanakan perjalanan serta mempersiapkan diri menghadapi badai; peta business intelligence membantu pengguna mengungkap insight dari analisis data mereka, dan peta telekomunikasi membantu pengguna memahami cakupan dan kualitas penyedia layanan di area layanan tertentu.

Namun, sulit bagi developer aplikasi untuk membuat visualisasi data peta besar yang berperforma baik dan memberikan pengalaman pengguna yang luar biasa. Data besar harus dimuat ke sisi klien memori, sehingga menyebabkan waktu pemuatan peta pertama yang lambat. Visual harus berperforma tinggi di semua perangkat, termasuk ponsel kelas bawah yang memiliki batasan memori dan GPU. Terakhir, developer harus memilih library rendering data besar yang portabel, andal, dan berperforma tinggi dengan data besar.

Arsitektur Referensi

Mengembangkan aplikasi dengan visualisasi data besar memerlukan dua komponen utama.

  1. backend pelanggan - semua data & layanan aplikasi backend seperti pemrosesan dan penyimpanan.
  2. Klien pelanggan - Antarmuka pengguna aplikasi Anda dengan komponen visualisasi peta.

Di bawah ini adalah diagram sistem tentang cara kedua komponen ini berinteraksi dengan pengguna aplikasi, Google Cloud, dan Google Maps Platform untuk membuat aplikasi visualisasi data besar.

diagram arsitektur

⭐ Catatan: Maps Datasets API adalah produk pra-GA. Lihat detailnya di Persyaratan Layanan.

Pertimbangan desain

Ada sejumlah pertimbangan desain yang harus diikuti untuk membuat visualisasi data berperforma tinggi menggunakan Google Cloud dan Google Maps Platform.

  1. Ukuran data sumber dan frekuensi update.
    1. Jika data sumber dalam format geojson adalah <5 mb atau sangat sering diperbarui, misalnya perkiraan radar cuaca langsung, pertimbangkan untuk menyajikan data sebagai sisi klien objek geojson di aplikasi Anda dan merender dengan lapisan deck.gl.
    2. Jika data Anda berukuran lebih dari 5 MB dan diperbarui tidak lebih cepat dari satu kali per jam, pertimbangkan arsitektur Datasets API dalam dokumen ini.
      1. Set data mendukung file berukuran hingga 350 mb.
      2. Jika data Anda lebih besar dari 350 MB, pertimbangkan untuk memangkas atau menyederhanakan data geometri dalam file sumber sebelum meneruskan ke Datasets (lihat Data Pruning di bawah).
  2. Skema & format
    1. Pastikan data Anda memiliki properti ID unik global untuk setiap fitur. ID unik memungkinkan Anda memilih dan menata gaya fitur tertentu atau menggabungkan data ke fitur untuk divisualisasikan, misalnya menata gaya fitur yang dipilih pada peristiwa pengguna "klik".
    2. Format data Anda sebagai CSV atau GeoJSON sesuai dengan spesifikasi Set Data API dengan nama kolom, jenis data, dan jenis objek GeoJSON yang valid.
    3. Untuk memudahkan pembuatan Set data dari BigQuery, buat kolom bernama wkt dalam ekspor CSV SQL Anda. Set data mendukung impor geometri dari CSV dalam format Well-Known Text (WKT) dari kolom bernama wkt.
    4. Periksa apakah data Anda merupakan geometri dan jenis data yang valid. Misalnya, GeoJSON harus dalam sistem koordinat WGS84, urutan pelilitan geometri, dll.
    5. Gunakan alat seperti geojson-validate untuk memastikan semua geometri dalam file sumber valid atau ogr2ogr untuk mentransformasi file sumber di antara format atau sistem koordinat.
  3. Pemangkasan data
    1. Minimalkan jumlah properti fitur. Anda dapat menggabungkan properti tambahan ke fitur saat runtime di kunci ID unik (contoh).
    2. Gunakan jenis data bilangan bulat untuk objek properti jika memungkinkan guna meminimalkan ruang penyimpanan kartu, sehingga performa kartu akan tetap optimal untuk dimuat melalui HTTPS di aplikasi klien.
    3. Menyederhanakan dan/atau menggabungkan geometri fitur yang sangat kompleks; pertimbangkan untuk menggunakan fungsi BigQuery seperti ST_Simplify pada geometri poligon kompleks untuk mengurangi ukuran file sumber dan meningkatkan performa peta.
  4. Melami
    1. Google Maps Datasets API membuat ubin peta dari file data sumber Anda untuk digunakan di Maps JS API.
    2. Ubin peta adalah sistem pengindeksan berbasis zoom yang menyediakan cara yang lebih efisien untuk memuat data ke dalam aplikasi visual.
    3. Petak peta mungkin menempatkan fitur padat atau kompleks pada tingkat zoom yang lebih rendah. Saat pengguna memperkecil tampilan suatu negara bagian atau negara (mis. z5-z12) mungkin terlihat berbeda dari saat memperbesar tampilan kota atau kawasan (mis. z13-z18).

Contoh - Kereta Api di London

Dalam contoh ini, kita akan menerapkan arsitektur referensi untuk membuat aplikasi web dengan GCP dan Google Maps yang memvisualisasikan semua jalur kereta api di London dari data Open Street Map (OSM).

Prasyarat

  1. Akses ke BigQuery Sandbox dan Cloud Console
  2. Pastikan Anda memiliki project GCP dan penyiapan akun penagihan.

Langkah 1 - Buat kueri data di BigQuery

Buka Set Data Publik BigQuery. Set data 'bigquery-public-data' dan tabel geo_openstreetmap.planet_features berisi data Open Street Map (OSM) yang mencakup semua fitur yang memungkinkan di seluruh dunia. Temukan semua fitur yang tersedia untuk kueri di Wiki OSM termasuk amenity, road, dan landuse.

Gunakan Cloud Shell atau Konsol Cloud BigQuery(https://console.cloud.google.com) untuk membuat kueri tabel menggunakan SQL. Cuplikan kode di bawah ini menggunakan perintah bq query untuk membuat kueri semua jalur kereta api yang difilter hanya ke London dengan menggunakan kotak pembatas dan fungsi ST_Intersects().

Untuk menjalankan kueri ini dari Cloud Shell, jalankan snip kode berikut, perbarui project ID, set data, dan nama tabel untuk lingkungan Anda.

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)]
    ))
   )'

Kueri menampilkan:

  1. ID unik untuk setiap fitur osm_id
  2. feature_type, mis. titik, garis, dll
  3. name fitur, misalnya Paddington Station
  4. Jenis railway, misalnya utama, pariwisata, militer, dll.
  5. wkt fitur - geometri titik, garis, atau poligon dalam format WKT. WKT adalah format data standar yang ditampilkan kolom Geografi BigQuery dalam kueri.

Catatan - Untuk memvalidasi hasil kueri secara visual sebelum membuat Set Data, Anda dapat dengan cepat memvisualisasikan data di dasbor dari BigQuery menggunakan Looker Studio.

Untuk mengekspor tabel ke file CSV di bucket Google Cloud Storage, gunakan perintah bq extract di Cloud Shell:

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

Catatan: Anda dapat mengotomatiskan setiap langkah menggunakan Cloud Scheduler untuk memperbarui data secara rutin.

Langkah 2 - Buat Set Data dari file CSV Anda

Selanjutnya, buat set data Google Maps Platform dari output kueri di Google Cloud Storage (GCS). Dengan menggunakan Datasets API, Anda dapat membuat set data lalu mengupload data ke Set data dari file yang dihosting di GCS.

Untuk memulai, aktifkan Maps Datasets API di project GCP Anda dan tinjau dokumen API. Ada library klien Python dan Node.js untuk memanggil Datasets API dari logika di backend aplikasi Anda. Selain itu, ada Datasets GUI untuk membuat Set data secara manual di Cloud Console.

Setelah unggahan {i>Dataset<i} Anda selesai, Anda dapat melihat pratinjau {i>dataset<i} Anda di GUI {i>Dataset<i}.

Pratinjau set data

Langkah 4 - Kaitkan Set Data dengan ID Peta

Setelah Set data dibuat, Anda dapat membuat ID Peta dengan Gaya Peta terkait. Di editor Map Style, Anda dapat mengaitkan mapId dan gaya dengan Set data. Di sini Anda juga dapat menerapkan Gaya Visual Peta Berbasis Cloud untuk menyesuaikan tampilan dan nuansa peta Anda.

Langkah 5 - Buat visualisasi peta aplikasi klien

Terakhir, Anda dapat menambahkan set data ke aplikasi visualisasi data sisi klien menggunakan Maps JS API. Inisialisasi objek peta Anda menggunakan mapID yang dikaitkan dengan set data Anda dari langkah sebelumnya. Kemudian, tetapkan gaya dan interaktivitas lapisan Set data Anda. Lihat panduan lengkap gaya visual berbasis data dengan Set Data untuk mengetahui detail selengkapnya.

Anda dapat menyesuaikan gaya, menambahkan pengendali peristiwa untuk mengubah gaya secara dinamis, dan lainnya menggunakan Maps JS API. Lihat contoh di docs. Di bawah ini, kita akan menentukan fungsi setStyle untuk membuat gaya fitur titik dan garis untuk contoh ini berdasarkan atribut “feature_type”.

Catatan - Pastikan untuk menggunakan saluran v=beta untuk implementasi Maps JS API Anda.

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,
           }
     }
}

Catatan - pastikan untuk selalu menambahkan atribusi untuk Set data ke aplikasi peta Anda. Untuk menambahkan atribusi OSM, ikuti contoh kode atribusi dalam dokumen yang mematuhi panduan OSM.

Kode di atas saat diinisialisasi dalam aplikasi web satu halaman menghasilkan visual data peta berikut:

peta kereta london

Dari sini, Anda dapat memperluas visualisasi peta dalam fungsi setStyle() dengan menambahkan logika untuk memfilter fitur, menambahkan gaya visual berdasarkan interaksi pengguna, dan berinteraksi dengan aplikasi Anda lainnya.

Kesimpulan

Dalam artikel ini, kita membahas arsitektur referensi dan contoh implementasi aplikasi visualisasi data besar menggunakan Google Cloud dan Google Maps Platform. Dengan menggunakan arsitektur referensi ini, Anda dapat membuat aplikasi visualisasi data lokasi dari data apa pun di GCP BigQuery yang berperforma tinggi di perangkat apa pun menggunakan Google Maps Datasets API.

Tindakan Berikutnya

Bacaan lebih lanjut:

Kontributor

Penulis utama:

  • Ryan Baumann, Engineering Manager Solusi Google Maps Platform