Z tego dokumentu dowiesz się, dlaczego i jak wdrożyć dynamiczne określanie stylów opartych na danych w Google Boundaries za pomocą interfejsu Maps JavaScript API, które przydaje się w różnych branżach i segmentach.
Animowane liczby taksówek w Nowym Jorku według kodów pocztowych (symulowane, poklatkowe):
Styl oparty na danych to funkcja Google Maps Platform, która pozwala używać wielokątów granic administracyjnych Google, stosować style do tych wielokątów w celu wyświetlania ich na mapach, a także łączyć własne dane w celu tworzenia szczegółowych, niestandardowych 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 dzięki integracji dynamicznych plików danych.
Styl oparty na danych pozwala tworzyć mapy pokazujące rozkład geograficzny danych, dynamicznie dostosowywać styl wielokąta oraz wchodzić w interakcje z danymi za pomocą zdarzeń kliknięcia. Za pomocą tych funkcji można tworzyć przydatne i atrakcyjne mapy dla różnych przypadków użycia i branż.
Oto kilka przykładów przypadków użycia map, które wyświetlają dynamiczne aktualizacje danych w stylu opartym na danych:
- Wspólne przejazdy: można korzystać z aktualizacji w czasie rzeczywistym, aby zidentyfikować obszary o dużym zapotrzebowaniu. W takim przypadku niektórzy dostawcy mogą oferować opłaty nadwyżkowe.
- Transport: można korzystać z aktualizacji w czasie rzeczywistym do wykrywania obszarów z dużym ruchem, co pomoże w określeniu najlepszych alternatywnych tras.
- Wybory: w nocy wyborcze dane z ankiet w czasie rzeczywistym można wykorzystać do wizualizacji wyników.
- Bezpieczeństwo pracowników: aktualizacje w czasie rzeczywistym mogą służyć do śledzenia przebiegu wydarzeń w czasie rzeczywistym, identyfikowania obszarów wysokiego ryzyka i informowania ratowników o sytuacji w terenie.
- Pogoda: aktualizacje w czasie rzeczywistym mogą służyć do śledzenia ruchu burz, identyfikowania bieżących zagrożeń oraz wyświetlania 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 oraz monitorowania wpływu działalności człowieka.
We wszystkich takich sytuacjach klienci mogą zyskać dodatkową wartość, łącząc pliki danych w czasie rzeczywistym z granicami Google w celu szybkiej i łatwej wizualizacji danych na mapie. Zapewnia to supermoce dostępne niemal natychmiastowe statystyki, które pozwalają podejmować trafniejsze decyzje.
Architektoniczne podejście do rozwiązania
Przyjrzyjmy się teraz tworzeniu mapy przy użyciu stylu opartego na danych do wizualizacji danych dynamicznych. Jak już wspomnieliśmy, przykładem użycia jest liczba taksówek w Nowym Jorku zwizualizowana na podstawie kodu pocztowego. Dzięki temu użytkownicy mogą zrozumieć, jak łatwo jest zamówić taksówkę.
Oto schemat architektury aplikacji:
Rozwiązanie do dynamicznego stylu opartego na danych
Przyjrzyjmy się teraz czynnościom, które trzeba wykonać, aby wdrożyć w zbiorze danych dynamiczną mapę choropletową określania stylu na podstawie danych.
To rozwiązanie umożliwia wizualizację hipotetycznego zbioru danych przedstawiających zagęszczenie taksówek w czasie rzeczywistym w Nowym Jorku według kodu pocztowego. Choć nie są to dane z rzeczywistego świata, są w nich przydatne aplikacje ze świata rzeczywistego, które dają obraz możliwości i możliwości wizualizacji danych dynamicznych na mapie za pomocą stylu opartego na danych.
Krok 1. Wybierz dane do wizualizacji i połącz je z identyfikatorem miejsca na 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ć tę zgodność 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 został wybrany prawidłowy identyfikator miejsca dla zapytania, na wypadek gdyby wyniki były 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 zawierają wartości szerokości i długości geograficznej, możesz też użyć interfejsu Geocoding API z filtrowaniem komponentów, aby dopasować te wartości szerokości i długości geograficznej do wartości identyfikatorów miejsca dla warstwy cech, której styl chcesz określić. W tym przykładzie zdefiniujesz styl warstwy cech POSTAL_CODE.
Krok 2. Połącz się z danymi w czasie rzeczywistym
Istnieje wiele sposobów łączenia ze źródłami danych, a najlepsza implementacja będzie zależeć od Twoich 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”, a zapytanie odbywa się 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'];
});
}
Warto zadbać o to, by dane były zawsze aktualne. Jednym ze sposobów może być wywołanie powyższego zapytania za pomocą modułu internetowego i ustawienie licznika czasu, który będzie odświeżać dane za pomocą funkcji setInterval. Możesz ustawić odstęp czasu na odpowiednią wartość, np. odświeżanie mapy co 15 sekund. Za każdym razem po upływie czasu interwału instancja robocza żąda zaktualizowanych wartości taxiCount dla każdego kodu pocztowego.
Możemy już wysyłać zapytania i odświeżać dane. Sprawdźmy teraz, czy wygląd wielokątów mapy odzwierciedla te zmiany.
Krok 3. Określ styl mapy, korzystając ze stylu opartego na danych
Skoro masz już dynamiczne wartości danych potrzebne do utworzenia i zastosowania stylu wizualnego do granic kodu pocztowego w wystąpieniu JavaScript Map Google w formie obiektu JSON, możesz nadać mu styl jako mapę choropleth.
W tym przykładzie dostosujesz styl mapy na podstawie liczby taksówek w poszczególnych kodach pocztowych. Dzięki temu użytkownicy będą wiedzieli, jak zagęszczone są taksówki w danej okolicy. Styl będzie się różnić w zależności od wartości liczby taksówek. Obszary, w których jest mniej taksówek, będą miały styl fioletowy, a gradient kolorów będzie przechodził przez czerwony i pomarańczowy, a kończy się na żółtym obszarze taksówek w Nowym Jorku w przypadku obszarów o największej zagęszczeniu. W przypadku tego schematu kolorów zastosujesz te wartości kolorów do fillColor i fingerColor. Ustawienie FillOpacity na 0,5 umożliwia użytkownikom wyświetlanie mapy bazowej, a ustawienie ScratchOpacity na 1,0 umożliwia rozróżnianie granic 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
Styl oparty na danych w przypadku granic Google daje możliwość używania własnych danych do określania stylu mapy w przypadku różnych implementacji w różnych branżach i segmentach. Połączenie z danymi w czasie rzeczywistym pozwala informować o tym, co się dzieje, gdzie się to dzieje i na bieżąco. Dzięki tej funkcji można wykorzystać dane gromadzonych w czasie rzeczywistym i pomóc użytkownikom lepiej je interpretować w czasie rzeczywistym.
Następne działania
- Obejrzyj webinar Jak używać stylu opartego na danych do określania stylu granic Map Google.
- Ulepsz swoją 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