Ten dokument zawiera architekturę referencyjną i przykład tworzenia wizualizacji danych mapy z danymi o lokalizacji w Google Cloud BigQuery i interfejsie Datasets API Google Maps Platform, takich jak analiza otwartych danych miejskich, tworzenie mapy zasięgu telekomunikacyjnego czy wizualizacja śladów ruchu floty pojazdów mobilnych.
Wizualizacje danych na mapie to zaawansowane narzędzie, które pozwala angażować użytkowników i odkrywać informacje przestrzenne w danych o lokalizacji. Dane o lokalizacji to dane, które zawierają obiekty punktowe, liniowe lub wielokątne. Na przykład mapy pogodowe pomagają konsumentom zrozumieć i zaplanować podróże oraz przygotować się na burze, mapy analityki biznesowej pomagają użytkownikom odkrywać statystyki na podstawie analizy danych, a mapy telekomunikacyjne pomagają użytkownikom zrozumieć zasięg i jakość usług dostawców na danym obszarze.
Deweloperom aplikacji trudno jest jednak tworzyć duże wizualizacje danych map, które są wydajne i zapewniają użytkownikom świetne wrażenia. Duże ilości danych muszą być wczytywane do pamięci po stronie klienta, co powoduje powolne wczytywanie pierwszej mapy. Wizualizacja musi działać wydajnie na wszystkich urządzeniach, w tym na telefonach komórkowych niższej klasy, które mają ograniczenia pamięci i GPU. Na koniec deweloperzy muszą wybrać bibliotekę do renderowania dużych zbiorów danych, która jest przenośna, niezawodna i wydajna.
Architektura referencyjna
Tworzenie aplikacji z wizualizacjami dużych zbiorów 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 znajdziesz diagram systemu pokazujący, jak te 2 komponenty współdziałają z użytkownikiem aplikacji, Google Cloud i Google Maps Platform, aby utworzyć aplikację do wizualizacji dużych zbiorów danych.

Uwagi dotyczące projektowania
Aby utworzyć wydajną wizualizację danych za pomocą Google Cloud i Google Maps Platform, należy wziąć pod uwagę kilka kwestii projektowych.
- Rozmiar danych źródłowych i częstotliwość aktualizacji.
- Jeśli dane źródłowe w formacie GeoJSON mają rozmiar mniejszy niż 5 MB lub są bardzo często aktualizowane, np. prognoza pogody z radaru na żywo, rozważ udostępnianie danych jako obiektu GeoJSON po stronie klienta w aplikacji i renderowanie ich za pomocą warstwy deck.gl.
- Jeśli Twoje dane mają rozmiar większy niż 5 MB i są aktualizowane nie częściej niż raz na godzinę, rozważ architekturę interfejsu Datasets API opisaną w tym dokumencie.
- Zbiory danych obsługują pliki o rozmiarze do 350 MB.
- Jeśli dane są większe niż 350 MB, rozważ przycięcie lub uproszczenie danych geometrycznych w pliku źródłowym przed przekazaniem ich do zbiorów danych (patrz Przycinanie danych poniżej).
- Schemat i format
- Upewnij się, że dane zawierają unikalną właściwość identyfikatora dla każdego elementu. Unikalny identyfikator umożliwia wybranie i nadanie stylu konkretnemu elementowi lub dołączenie danych do elementu w celu wizualizacji, np. nadanie stylu wybranemu elementowi po zdarzeniu użytkownika „kliknięcie”.
- Sformatuj dane jako CSV lub GeoJSON zgodnie ze specyfikacją interfejsu Datasets API, podając prawidłowe nazwy kolumn, typy danych i typy obiektów GeoJSON.
- Aby ułatwić tworzenie zbiorów danych z BigQuery, utwórz kolumnę o nazwie
wktw eksportowanym pliku CSV SQL. 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. Na przykład GeoJSON musi być w układzie współrzędnych WGS84, mieć kolejność nawijania geometrii itp.
- Użyj narzędzia takiego jak geojson-validate, aby upewnić się, że 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 obiektów. Możesz dołączyć dodatkowe właściwości do cechy w czasie działania na unikalnym kluczu identyfikatora (przykład).
- W miarę możliwości używaj typów danych liczb całkowitych w przypadku obiektów właściwości, aby zminimalizować miejsce na dane kafelków i zapewnić ich wydajne wczytywanie przez HTTPS w aplikacji klienckiej.
- Uprość lub zagreguj bardzo złożone geometrie obiektów. 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.
- Kafelkowanie
- Interfejs Google Maps Datasets API tworzy kafelki mapy z pliku danych źródłowych do użycia z pakietem Maps SDK na potrzeby internetu lub urządzeń mobilnych.
- Kafelki mapy to system indeksowania oparty na powiększeniu, który zapewnia bardziej efektywne sposoby wczytywania danych do aplikacji wizualnej.
- Fragmenty mapy mogą pomijać gęste lub złożone elementy przy niższych poziomach powiększenia. Gdy użytkownik pomniejszy widok do stanu lub kraju (np. z5–z12), może on wyglądać inaczej niż po powiększeniu do miasta lub dzielnicy (np. z13–z18).
Przykład – linie kolejowe w Londynie
W tym przykładzie zastosujemy architekturę referencyjną, aby utworzyć aplikację internetową z Google Cloud i Mapami Google, która wizualizuje wszystkie linie kolejowe w Londynie na podstawie danych z Open Street Map (OSM).
Wymagania wstępne
- dostęp do BigQuery Sandbox i konsoli Cloud
- Upewnij się, że masz skonfigurowany projekt Google Cloud i konto rozliczeniowe.
Krok 1. Wykonaj zapytanie o dane w BigQuery
Przejdź do publicznych zbiorów 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. Wszystkie dostępne funkcje, które można wyszukiwać, znajdziesz w OSM Wiki, m.in. amenity, road i landuse.
Użyj Cloud Shell lub konsoli Cloud BigQuery, aby wykonać zapytanie na tabeli za pomocą SQL. Poniższy fragment kodu używa polecenia bq query, aby wysłać zapytanie o wszystkie linie kolejowe przefiltrowane tylko do Londynu za pomocą ramki ograniczającej 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 dla swojego środowiska.
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. wktelementu – punkt, linia lub wielokąt w formacie WKT. WKT to standardowy format danych, który kolumny BigQuery Geography zwracają w zapytaniu.
Uwaga: aby wizualnie sprawdzić wyniki zapytania przed utworzeniem zbioru danych, możesz szybko zwizualizować dane w panelu z BigQuery za pomocą Looker Studio.
Aby wyeksportować tabelę do pliku CSV w zasobniku Google 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, a 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 Python i Node.js, które umożliwiają wywoływanie interfejsu Datasets API z poziomu logiki w backendzie aplikacji. Dostępny jest też GUI zbiorów danych, który umożliwia ręczne tworzenie zbiorów danych w konsoli Cloud.
Po zakończeniu przesyłania zbioru danych możesz wyświetlić jego podgląd w interfejsie graficznym 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 stylów mapy możesz powiązać ze zbiorem danych identyfikator mapy i styl. W tym miejscu możesz też zastosować definiowanie stylów map w Google Cloud, aby dostosować wygląd i styl 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, korzystając z Maps JS API. Zainicjuj obiekt mapy, używając identyfikatora mapID 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 stylizacji zbiorów danych na podstawie danych.
Za pomocą interfejsu Maps JS API możesz dostosować styl, dodać moduły obsługi zdarzeń, aby dynamicznie zmieniać styl, i wykonać inne czynności. Przykłady znajdziesz w dokumentacji. Poniżej zdefiniujemy funkcję setStyle, aby utworzyć styl obiektów punktowych i liniowych na potrzeby tego przykładu 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 w internetowej aplikacji jednostronicowej powyższy kod generuje następującą wizualizację danych mapy:

W tym miejscu możesz rozszerzyć wizualizację mapy w funkcji setStyle(), dodając logikę do filtrowania obiektów, dodając styl na podstawie interakcji użytkownika i wchodząc w interakcję z resztą aplikacji.
Podsumowanie
W tym dokumencie omówiliśmy architekturę referencyjną i przykładową implementację aplikacji do wizualizacji dużych zbiorów danych przy użyciu 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 działają wydajnie na dowolnym urządzeniu, za pomocą interfejsu Google Maps Datasets API.
Następne działania
Więcej informacji:
- Dokumentacja interfejsu Google Maps Platform Datasets API
- Wyświetlanie danych w czasie rzeczywistym za pomocą stylów opartych na danych
- Wprowadzenie do analizy geoprzestrzennej w BigQuery
- Używanie GeoJSON w BigQuery do analizy geoprzestrzennej
Współtwórcy
Główni autorzy:
- Ryan Baumann, Google Maps Platform Solutions Engineering Manager