Wyświetlanie danych w czasie rzeczywistym dzięki stylowi opartemu na danych

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

Zakłady taksówek w Nowym Jorku według kodu pocztowego
Animowana liczba taksówek w Nowym Jorku według granicy kodu pocztowego (symulowana, upłynęła):
.
, Liczba taksówek w Nowym Jorku według kodu pocztowego (film poklatkowy) Legenda mapy

Styl oparty na danych to funkcja Google Maps Platform, która pozwala używać administracyjnych wielokątów granic administracyjnych Google, stosować ich styl do tych wielokątów na potrzeby wyświetlania na mapach, a także łączyć własne dane w celu tworzenia obszernych, dostosowanych map, które można wykorzystać do analizy wizualnej i lepszego zrozumienia danych. W tym dokumencie omówimy niektóre przypadki 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 przez integrację dynamicznych plików danych.

Styl oparty na danych umożliwia tworzenie map pokazujących rozkład geograficzny danych, dynamiczne dostosowywanie stylu wielokąta i interakcję z danymi za pomocą zdarzeń kliknięcia. Tych funkcji można używać do tworzenia pomocnych i angażujących map dla różnych zastosowań i branż.

Oto kilka przykładów przypadków użycia mapy, która wyświetla dynamiczne aktualizacje danych w stylu opartym na danych:

  • Udostępnianie przejazdów: aktualizacje w czasie rzeczywistym mogą służyć do identyfikowania obszarów o dużym zapotrzebowaniu. W takim przypadku niektórzy dostawcy mogą mieć wyższe ceny.
  • Transport: aktualizowane w czasie rzeczywistym informacje o ruchu drogowym mogą pomóc w wyborze najlepszych tras alternatywnych.
  • Wybory: w nocy wyborów można wykorzystać dane z ankiet w czasie rzeczywistym do wizualizacji wyników.
  • Bezpieczeństwo pracowników: aktualizacje w czasie rzeczywistym można wykorzystać do śledzenia zdarzeń w czasie rzeczywistym, identyfikowania obszarów wysokiego ryzyka i przekazywania ratownikom w terenie informacji o sytuacji.
  • Pogoda: na podstawie informacji w czasie rzeczywistym można śledzić ruch burz, identyfikować bieżące zagrożenia oraz wyświetlać ostrzeżenia i alerty.
  • Środowisko: aktualizacje w czasie rzeczywistym można wykorzystywać do śledzenia ruchu pyłu wulkanicznego i innych zanieczyszczeń, identyfikowania obszarów degradacji środowiska oraz 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. Zapewnia to ogromne możliwości niemal natychmiastowych statystyk, które pomagają podejmować lepsze decyzje.

Architektoniczne podejście do rozwiązania

Teraz przyjrzyjmy się tworzeniu mapy za pomocą stylu opartego na danych do wizualizacji danych dynamicznych. Jak pokazano wcześniej, przypadkiem użycia jest liczba taksówek w Nowym Jorku przedstawiona za pomocą kodu pocztowego. Dzięki temu użytkownicy będą wiedzieć, jak łatwo będzie zamówić taksówkę.

Architektura
Oto schemat architektury aplikacji przedstawiającej zastosowane podejście:
. architektura aplikacji .

Rozwiązanie do dynamicznego określania stylów oparte na danych

Przejdźmy teraz do kroków niezbędnych do zaimplementowania w zbiorze danych mapy choropletowej dynamicznego stylu opartego na danych.

To rozwiązanie umożliwia wizualizację hipotetycznego zbioru danych o zagęszczeniu taksówek w czasie rzeczywistym w Nowym Jorku według kodu pocztowego. Chociaż mogą to nie być dane ze świata rzeczywistego, mają one zastosowanie w rzeczywistości i pozwalają zorientować się w możliwościach i możliwościach wizualizacji danych dynamicznych na mapie za pomocą stylu opartego na danych.

Krok 1. Wybierz dane do zwizualizowania i złączenie z identyfikatorem miejsca granicy

Najpierw określ dane, które chcesz wyświetlać, i sprawdź, czy da się je dopasować do granic Google. Możesz to zrobić po stronie klienta, wywołując metodę wywołania zwrotnego findPlaceFromQuery dla każdego kodu pocztowego. Pamiętaj, że kody pocztowe w Stanach Zjednoczonych mają różne nazwy, w przeciwieństwie do innych poziomów administracyjnych. Upewnij się, że wybierasz odpowiedni identyfikator miejsca dla zapytania, jeśli wyniki mogą być niejednoznaczne. 


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 dane mają wartości szerokości i długości geograficznej, możesz też użyć interfejsu Geocoding API z filtrowaniem komponentów, aby przekształcać te wartości szerokości i długości geograficznej w wartości identyfikatora miejsca dla warstwy cech, której styl chcesz określić. W tym przykładzie określimy styl warstwy cech POSTAL_CODE.

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

Istnieją różne sposoby łączenia się ze źródłami danych, a najlepsze wdrożenie zależy od konkretnych potrzeb i infrastruktury technicznej. W tym przypadku załóżmy, że Twoje dane znajdują się w tabeli BigQuery z 2 kolumnami: „zip_code” i „taxi_count”, i wyślesz do nich zapytanie za pomocą funkcji Firebase w 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 upewnij się, że dane są aktualne. Aby to zrobić, możesz na przykład wywołać podane wyżej zapytanie za pomocą narzędzia internetowego i ustawić licznik czasu odświeżania danych, używając funkcji setInterval. Możesz ustawić odpowiednią wartość interwału, np. odświeżać mapę co 15 sekund. Za każdym razem, gdy minie interwał czasu, instancja robocza zażąda zaktualizowanych wartości taxiCount na kod pocztowy.

Możemy już wysyłać zapytania i odświeżać dane, więc sprawdźmy, czy wielokąty mapy odzwierciedlają te zmiany.

Krok 3. Określ styl mapy za pomocą stylu opartego na danych

Teraz gdy masz już wartości danych dynamicznych potrzebne do utworzenia i zastosowania stylu wizualnego do granic kodu pocztowego w instancji JavaScript Map Google w postaci obiektu JSON, nadszedł czas, aby nadać mu styl map choropleth.

W tym przykładzie styl mapy dostosujesz na podstawie liczby taksówek w poszczególnych kodach pocztowych, by użytkownicy wiedzieli, jaka jest gęstość i dostępność taksówek w ich okolicy. Styl będzie się różnić w zależności od liczby taksówek. Obszary z najmniejszą taksówką zostaną oznaczone kolorem fioletowym, a gradient koloru będzie przechodził przez czerwony i pomarańczowy, a kończy na żółtym taksówce w Nowym Jorku w przypadku obszarów o największej gęstości. W przypadku tego schematu kolorów zastosujesz te wartości kolorów do atrybutów FillColor i kreślColor. Ustawienie FillOpacity na 0,5 pozwala użytkownikom zobaczyć podstawowa mapę, a ustawienie edypOpacity na 1.0 pozwala rozróżnić granice wielokątów tego samego koloru. 


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

Styl oparty na danych dla granic Google pozwala wykorzystywać Twoje dane do tworzenia stylu mapy dostosowanej do różnych zastosowań w różnych branżach i segmentach. Połączenie z danymi w czasie rzeczywistym pozwala komunikować się, co się dzieje, gdzie i na bieżąco. Ta funkcja może wydobyć z danych wartość gromadzonych w czasie rzeczywistym i pomóc użytkownikom lepiej je zrozumieć w czasie rzeczywistym, w świecie rzeczywistym.

Następne działania

Współtwórcy

Główny autor:

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