Styl oparty na danych w czasie rzeczywistym

Z tego dokumentu dowiesz się, dlaczego i jak wdrożyć dynamiczny styl oparty na danych granic Google za pomocą interfejsu Maps JavaScript API, co jest przydatne w różnych przypadkach użycia w różnych branżach i segmentach.

Liczba taksówek w Nowym Jorku według kodu pocztowego
Animowana liczba taksówek w Nowym Jorku według granic kodów pocztowych (symulacja, film poklatkowy):

Definiowanie stylów na podstawie danych to funkcja Google Maps Platform, która umożliwia korzystanie z wielokątów granic administracyjnych Google, stosowanie do nich stylów w celu wyświetlania ich na mapach oraz łączenie własnych danych w celu tworzenia bogatych, dostosowanych map, które można wykorzystać do analizy wizualnej i lepszego zrozumienia danych. W tym dokumencie omówimy kilka przypadków użycia, które wyjaśniają, dlaczego i jak możesz wizualizować dane za pomocą stylu opartego na danych na mapie w czasie zbliżonym do rzeczywistego, integrując dynamiczne pliki danych.

Style oparte na danych umożliwiają tworzenie map, które pokazują geograficzny rozkład danych, dynamiczne dostosowywanie stylu wielokątów i interakcję z danymi za pomocą zdarzeń kliknięcia. Te funkcje mogą służyć do tworzenia map zawierających przydatne informacje i angażujących użytkowników w różnych przypadkach użycia i branżach.

Oto kilka przykładów przypadków użycia, które mogą mieć zastosowanie do mapy wyświetlającej dynamiczne aktualizacje danych w stylu opartym na danych:

• Wspólne przejazdy: aktualizacje w czasie rzeczywistym mogą służyć do identyfikowania obszarów o dużym popycie, w których niektórzy dostawcy mogą stosować wyższe ceny.
• Transport: aktualizacje w czasie rzeczywistym mogą służyć do identyfikowania obszarów o dużym natężeniu ruchu, co pomoże w określaniu najlepszych tras alternatywnych.
• Wybory: w wieczór wyborczy można wykorzystać dane z sondaży w czasie rzeczywistym, aby wizualizować wyniki na bieżąco.
• Bezpieczeństwo pracowników: aktualizacje w czasie rzeczywistym mogą służyć do śledzenia zdarzeń w czasie rzeczywistym, identyfikowania obszarów wysokiego ryzyka i zapewniania ratownikom w terenie informacji o sytuacji.
• Pogoda: aktualizacje w czasie rzeczywistym mogą służyć do śledzenia ruchu burz, identyfikowania bieżących zagrożeń oraz przekazywania ostrzeżeń i alertów.
• Środowisko: aktualizacje w czasie rzeczywistym mogą służyć do śledzenia przemieszczania się pyłu wulkanicznego i innych zanieczyszczeń, identyfikowania obszarów degradacji środowiska i monitorowania wpływu działalności człowieka.

We wszystkich tych sytuacjach klienci mogą uzyskać dodatkową wartość, łącząc swoje pliki danych w czasie rzeczywistym z granicami Google, aby szybko i łatwo wizualizować dane na mapie. Dzięki temu mogą niemal natychmiast uzyskiwać statystyki, które pozwalają im podejmować bardziej świadome decyzje.

Wypróbuj teraz: otwórz konsolę Google Cloud i włącz Maps JavaScript API.

Podejście architektoniczne do rozwiązania

Teraz przejdźmy przez proces tworzenia mapy z użyciem stylu opartego na danych, aby wizualizować dane dynamiczne. Jak pokazano wcześniej, przypadek użycia to liczba taksówek w Nowym Jorku zwizualizowana według kodu pocztowego. Dzięki temu użytkownicy będą mogli łatwiej ocenić, jak szybko uda im się złapać taksówkę.

Architektura
Oto schemat architektury aplikacji:

Rozwiązanie do dynamicznego określania stylu opartego na danych

Teraz omówimy kroki, które należy wykonać, aby wdrożyć dynamiczny kartogram ze stylami opartymi na danych dla Twojego zbioru danych.

To rozwiązanie umożliwia wizualizację hipotetycznego zbioru danych dotyczących gęstości taksówek w Nowym Jorku w czasie rzeczywistym według kodu pocztowego. Chociaż nie są to dane z życia codziennego, mają one zastosowanie w rzeczywistości i pokazują, jak dynamiczne dane mogą być wizualizowane na mapie za pomocą stylu opartego na danych.

Krok 1. Wybierz dane do wizualizacji i połącz je z identyfikatorem miejsca granicy

Pierwszym krokiem jest określenie danych, które chcesz wyświetlać, i upewnienie się, że można je dopasować do granic Google. Możesz przeprowadzić to dopasowanie po stronie klienta, wywołując metodę wywołania zwrotnego findPlaceFromQuery dla każdego kodu pocztowego. Pamiętaj, że kody pocztowe w USA mają różne nazwy, ale inne poziomy administracyjne nie. W przypadku gdy wyniki mogą być niejednoznaczne, upewnij się, że wybierasz prawidłowy identyfikator miejsca dla zapytania.

const request = {
    query: postalCode,
    fields: ['place_id'],
};
 
function findPlaceId() {
   placesService.findPlaceFromQuery(request, function (results, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
         console.log(results[0]);
      }
   });
}

Jeśli Twoje dane zawierają wartości szerokości i długości geograficznej, możesz też użyć interfejsu Geocoding API z filtrowaniem komponentów, aby przekształcić te wartości w identyfikatory miejsc dla warstwy mapy, którą chcesz stylizować. W tym przykładzie będziesz stylizować warstwę mapy POSTAL_CODE.

Krok 2. Połącz się z danymi w czasie rzeczywistym

Istnieje wiele sposobów łączenia się ze źródłami danych, a najlepsza implementacja zależy od konkretnych potrzeb i infrastruktury technicznej. W tym przypadku załóżmy, że dane znajdują się w tabeli BigQuery z 2 kolumnami: „zip_code” i „taxi_count”, a zapytanie zostanie wysłane za pomocą funkcji Firebase Cloud Functions.

async function queryNycTaxis() {
   // Queries the NYC Taxis dataset.

   // Create a client
   const bigqueryClient = new BigQuery();
  
   // The SQL query to run
   const sqlQuery = 'SELECT zip_code, taxi_count
      FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
      
   const options = {
      query: sqlQuery,
      // Location must match that of the dataset(s)
      // referenced in the query.
      location: 'US',
   };
  
   // Run the query
   const [rows] = await bigqueryClient.query(options);
  
   rows.forEach(row => {
      const postalCode = row['zip_code'];
      const taxiCount = row['taxi_count'];
   });
}

Następnie musisz zadbać o to, aby dane były aktualne. Jednym ze sposobów jest wywołanie powyższego zapytania za pomocą procesu roboczego i ustawienie licznika czasu, który będzie odświeżać dane za pomocą funkcji setInterval. Możesz ustawić odpowiednią wartość interwału, np. odświeżanie mapy co 15 sekund. Po upływie każdego interwału skrypt web worker będzie żądać zaktualizowanych wartości taxiCount dla każdego kodu pocztowego.

Teraz, gdy możemy wysyłać zapytania i odświeżać dane, upewnijmy się, że wygląd wielokątów na mapie odzwierciedla te zmiany.

Krok 3. Nadaj mapie styl oparty na danych

Masz już dynamiczne wartości danych potrzebne do utworzenia i zastosowania stylu wizualnego do granic kodów pocztowych w instancji Maps JavaScript jako obiektu JSON. Teraz możesz nadać mu styl kartogramu.

W tym przykładzie nadasz mapie styl na podstawie liczby taksówek w każdym kodzie pocztowym, aby użytkownicy mogli zobaczyć, ile taksówek jest dostępnych w ich okolicy. Styl będzie się różnić w zależności od liczby taksówek. Obszary z najmniejszą liczbą taksówek będą miały fioletowy styl, a gradient kolorów będzie przechodził przez czerwony i pomarańczowy, aż do żółtego (kolor nowojorskich taksówek) w obszarach o największej gęstości. W przypadku tego schematu kolorów zastosujesz te wartości kolorów do fillColor i strokeColor. Ustawienie fillOpacity na 0,5 pozwala użytkownikom zobaczyć mapę pod spodem, a ustawienie strokeOpacity na 1,0 pozwala im odróżnić granice wielokątów o tym samym kolorze:

const featureLayer = map.getFeatureLayer(
   google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
   const placeFeature = featureStyleFunctionOptions.feature;
   // taxiCount per (postal_code) PlaceID 
   const taxiCount = zips[placeFeature.placeId];
   let fillColor;
   let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
   fillColor = "#571845";  
   strokeColor = "#571845"; 
} else if (taxiCount < 13) {
   fillColor = "#900c3e";
   strokeColor = "#900c3e";
} else if (taxiCount < 21) {
   fillColor = "#c60039"; 
   strokeColor = "#c60039"; 
} else if (taxiCount < 34) {
   fillColor = "#fe5733";
   strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) { 
   fillColor = "#fec30f";
   strokeColor = "#fec30f";
}  
return {
   fillColor,
   strokeColor,
   fillOpacity: 0.5,
   strokeOpacity: 1.0,
};
 

Podsumowanie

Style oparte na danych w przypadku granic Google umożliwiają używanie danych do stylizowania mapy na potrzeby różnych zastosowań w różnych branżach i segmentach. Połączenie z danymi w czasie rzeczywistym umożliwia przekazywanie informacji o tym, co się dzieje, gdzie się dzieje i w jakim momencie. Ta funkcja może pomóc Ci wykorzystać wartość danych w czasie rzeczywistym i ułatwić użytkownikom ich zrozumienie w czasie rzeczywistym w prawdziwym świecie.

Następne działania

• Obejrzyj webinar How to use Data-driven styling to style Google map boundaries (Jak używać stylu opartego na danych do stylizowania granic map Google).
• Możesz ulepszyć wizualizację, korzystając ze zdarzeń kliknięcia w stylu opartym na danych.
• Rozważ dodanie do mapy zaawansowanych znaczników.

Współtwórcy

Główny autor:

Jim Leflar | inżynier rozwiązań Google Maps Platform