Ten dokument zawiera architekturę referencyjną i przykład tworzenia wizualizacji danych mapy z danymi o lokalizacji w Google Cloud BigQuery i Google Maps Platform Datasets API, np. analizowania otwartych danych miejskich, tworzenia mapy zasięgu telekomunikacyjnego lub wizualizowania śladów ruchu floty pojazdów mobilnych.
Wizualizacje danych mapy to skuteczne narzędzie do angażowania użytkowników i odkrywania przestrzennych informacji o danych o lokalizacji. Dane o lokalizacji to dane, które mają cechy punktowe, liniowe lub wielokątne. Na przykład mapy pogody pomagają konsumentom planować podróże i przygotowywać się na burze, mapy analizy biznesowej pomagają użytkownikom odkrywać informacje na podstawie analizy danych, a mapy telekomunikacyjne pomagają użytkownikom zrozumieć zasięg i jakość usług dostawców na danym obszarze.
Tworzenie przez programistów aplikacji dużych wizualizacji danych mapy, które są wydajne i zapewniają użytkownikom świetne wrażenia, jest jednak trudne. Duże ilości danych muszą być wczytywane do pamięci po stronie klienta, co powoduje długi czas pierwszego wczytywania mapy. Wizualizacja musi być wydajna na wszystkich urządzeniach, w tym na telefonach komórkowych z niższej półki, które mają ograniczenia dotyczące pamięci i procesora graficznego. Na koniec programiści muszą wybrać bibliotekę renderowania dużych ilości danych, która jest przenośna, niezawodna i wydajna w przypadku dużych ilości danych.
Architektura referencyjna
Tworzenie aplikacji z wizualizacjami dużych ilości danych wymaga 2 głównych komponentów.
- Backend klienta – wszystkie dane i usługi backendu aplikacji, takie jak przetwarzanie i przechowywanie.
- Klient klienta – interfejs użytkownika aplikacji z komponentem wizualizacji mapy.
Poniżej znajduje się schemat systemu, który pokazuje, jak te 2 komponenty współdziałają z użytkownikiem aplikacji, Google Cloud i Google Maps Platform, aby utworzyć aplikację do wizualizacji dużych ilości danych.

Uwagi dotyczące projektu
Aby utworzyć wydajną wizualizację danych za pomocą Google Cloud i Google Maps Platform, musisz wziąć pod uwagę kilka kwestii związanych z projektem.
- Rozmiar danych źródłowych i częstotliwość aktualizacji.
- Jeśli dane źródłowe w formacie GeoJSON mają rozmiar < 5 MB lub są bardzo często aktualizowane, np. prognoza pogody na żywo, rozważ udostępnianie danych jako obiektu GeoJSON po stronie klienta w aplikacji i renderowanie ich za pomocą warstwy deck.gl.
- Jeśli dane mają rozmiar większy niż 5 MB i są aktualizowane nie częściej niż raz na godzinę, rozważ użycie architektury interfejsu Datasets API opisanej w tym dokumencie.
- Zbiory danych obsługują pliki o rozmiarze do 350 MB.
- Jeśli dane mają rozmiar większy niż 350 MB, przed przekazaniem ich do zbiorów danych rozważ przycięcie lub uproszczenie danych geometrycznych w pliku źródłowym (patrz Przycinanie danych poniżej).
- Schemat i format
- Upewnij się, że dane mają właściwość ID, która jest unikalna w skali globalnej dla każdej funkcji. Unikalny identyfikator umożliwia wybranie i stylizowanie konkretnej funkcji lub łączenie danych z funkcją w celu wizualizacji, np. stylizowanie wybranej funkcji po kliknięciu przez użytkownika.
- Sformatuj dane jako CSV lub GeoJSON zgodnie ze specyfikacją interfejsu Datasets API, używając prawidłowych nazw kolumn, typów danych i typów obiektów GeoJSON.
- Aby łatwo tworzyć zbiory danych z BigQuery, utwórz kolumnę o nazwie
wktw eksporcie SQL do CSV. Zbiory danych obsługują importowanie geometrii z pliku CSV w formacie Well-Known Text (WKT) z kolumny o nazwiewkt. - Sprawdź, czy dane mają prawidłową geometrię i typy danych. Na przykład GeoJSON musi być w układzie współrzędnych WGS84, mieć prawidłową kolejność wierzchołków itp.
- Użyj narzędzia takiego jak geojson-validate, aby sprawdzić, czy wszystkie geometrie w pliku źródłowym są prawidłowe, lub ogr2ogr, aby przekształcić plik źródłowy między formatami lub układami współrzędnych.
- Przycinanie danych
- Zminimalizuj liczbę właściwości funkcji. Dodatkowe właściwości możesz połączyć z funkcją w czasie działania za pomocą unikalnego klucza identyfikatora (przykład).
- Jeśli to możliwe, używaj typów danych całkowitych dla obiektów właściwości, aby zminimalizować miejsce na dane w kafelkach i zapewnić wydajne wczytywanie kafelków przez HTTPS w aplikacji klienckiej.
- Uprość lub zagreguj bardzo złożone geometrie funkcji. Rozważ użycie funkcji BigQuery, takich jak ST_Simplify, w przypadku złożonych geometrii wielokątów, aby zmniejszyć rozmiar pliku źródłowego i poprawić wydajność mapy.
- Dzielenie na kafelki
- Interfejs Google Maps Datasets API tworzy kafelki mapy z pliku danych źródłowych do użycia z pakietem Maps SDK na Androida lub pakietem Maps JavaScript API.
- Kafelki mapy to system indeksowania oparty na powiększeniu, który zapewnia bardziej wydajne sposoby wczytywania danych do aplikacji wizualnej.
- Kafelki mapy mogą pomijać gęste lub złożone funkcje przy niższych poziomach powiększenia. Gdy użytkownik oddali widok do stanu lub kraju (np. z5–z12), może on wyglądać inaczej niż w przypadku powiększenia do miasta lub dzielnicy (np. z13–z18).
Przykład – koleje w Londynie
W tym przykładzie zastosujemy architekturę referencyjną, aby utworzyć aplikację internetową z Google Cloud i Mapami Google, która wizualizuje wszystkie koleje w Londynie na podstawie danych Open Street Map (OSM).
Wymagania wstępne
- Dostęp do piaskownicy BigQuery i Cloud Console
- Upewnij się, że masz skonfigurowany projekt w chmurze Google Cloud i konto rozliczeniowe.
Krok 1. Wykonywanie zapytań o dane w BigQuery
Otwórz publiczne zbiory danych BigQuery. Zbiór danych
„bigquery-public-data” i tabela geo_openstreetmap.planet_features zawierają
dane Open Street Map
(OSM) z całego świata, w tym wszystkie możliwe funkcje. Odkryj wszystkie dostępne
funkcje, o które możesz wysyłać zapytania w OSM
Wiki, w tym amenity,
road i landuse.
Aby wysłać zapytanie do tabeli za pomocą SQL, użyj Cloud Shell lub konsoli BigQuery Cloud. Poniższy fragment kodu używa polecenia bq query , aby wysłać zapytanie o wszystkie koleje, które są filtrowane tylko do Londynu za pomocą pola ograniczenia i funkcji ST_Intersects().
Aby wykonać to zapytanie z Cloud Shell, uruchom ten fragment kodu, aktualizując identyfikator projektu, zbiór danych i nazwę tabeli w swoim środowisku.
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)]
))
)'
Zapytanie zwraca:
- unikalny identyfikator każdej funkcji
osm_id; feature_type, np.punkty, linie itp.;namefunkcji, np.Paddington Station;- typ
railway, np.główny, turystyczny, wojskowy itp.; wktfunkcji – geometria punktu, linii lub wielokąta w formacie WKT. WKT to standardowy format danych, w którym kolumny geograficzne BigQuery zwracają zapytanie.
Uwaga: aby wizualnie sprawdzić wyniki zapytania przed utworzeniem zbioru danych, możesz szybko zwizualizować dane na panelu w BigQuery za pomocą Looker Studio.
Aby wyeksportować tabelę do pliku CSV w zasobniku Cloud Storage, użyj polecenia bq extract w Cloud Shell:
bq extract \
--destination_format "CSV" \
--field_delimiter "," \
--print_header=true \
PROJECTID:DATASET.TABLENAME \
gs://BUCKET/FILENAME.csv
Uwaga: każdy krok możesz zautomatyzować za pomocą Cloud Scheduler, aby regularnie aktualizować dane.
Krok 2. Utwórz zbiór danych z pliku CSV
Następnie utwórz zbiór danych Google Maps Platform na podstawie danych wyjściowych zapytania w Google Cloud Storage (GCS). Za pomocą interfejsu Datasets API możesz utworzyć zbiór danych i następnie przesłać do niego dane z pliku hostowanego w GCS.
Aby rozpocząć, włącz interfejs Maps Datasets API w projekcie Google Cloud i zapoznaj się z dokumentacją interfejsu API. Dostępne są biblioteki klienta w Pythonie i Node.js do wywoływania interfejsu Datasets API z logiki w backendzie aplikacji. Dodatkowo dostępny jest graficzny interfejs użytkownika zbiorów danych, który umożliwia ręczne tworzenie zbiorów danych w Cloud Console.
Po zakończeniu przesyłania zbioru danych możesz wyświetlić jego podgląd w graficznym interfejsie użytkownika zbiorów danych.

Krok 4. Powiąż zbiór danych z identyfikatorem mapy
Po utworzeniu zbioru danych możesz utworzyć identyfikator mapy z powiązanym stylem mapy. W edytorze stylu mapy możesz powiązać identyfikator mapy i styl ze zbiorem danych. W tym miejscu możesz też zastosować stylizowanie map w Google Cloud , aby dostosować wygląd mapy.
Krok 5. Utwórz wizualizację mapy w aplikacji klienckiej
Na koniec możesz dodać zbiór danych do aplikacji do wizualizacji danych po stronie klienta za pomocą pakietu Maps JavaScript API. Zainicjuj obiekt mapy za pomocą identyfikatora mapy powiązanego ze zbiorem danych z poprzedniego kroku. Następnie ustaw styl i interaktywność warstwy zbioru danych. Więcej informacji znajdziesz w pełnym przewodniku po stylizowaniu na podstawie danych za pomocą zbiorów danych.
Za pomocą pakietu Maps JavaScript API możesz dostosować styl, dodać moduły obsługi zdarzeń, aby dynamicznie zmieniać styl, i wiele więcej. Przykłady znajdziesz w dokumentacji. Poniżej zdefiniujemy funkcję setStyle, aby utworzyć styl funkcji punktu i linii na podstawie atrybutu „feature_type”.
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,
}
}
}
Po zainicjowaniu tego kodu w internetowej aplikacji jednostronicowej uzyskasz następującą wizualizację danych mapy:

W tym miejscu możesz rozszerzyć wizualizację mapy w funkcji setStyle(), dodając logikę filtrowania funkcji, dodawania stylów na podstawie interakcji użytkownika i interakcji z resztą aplikacji.
Podsumowanie
W tym dokumencie omówiliśmy architekturę referencyjną i przykładową implementację aplikacji do wizualizacji dużych ilości danych za pomocą Google Cloud i Google Maps Platform. Korzystając z tej architektury referencyjnej, możesz tworzyć aplikacje do wizualizacji danych o lokalizacji na podstawie dowolnych danych w Google Cloud BigQuery, które są wydajne na każdym urządzeniu dzięki interfejsowi Google Maps Datasets API.
Następne kroki
Więcej informacji:
- Dokumentacja interfejsu API Google Maps Platform Datasets
- Wyświetlanie danych w czasie rzeczywistym dzięki stylom opartym na danych
- Wprowadzenie do analizy geoprzestrzennej w BigQuery
- Używanie GeoJSON w BigQuery do analizy geoprzestrzennej
Współtwórcy
Główni autorzy:
- Ryan Baumann, kierownik ds. inżynierii rozwiązań Google Maps Platform