Ten dokument opisuje, dlaczego i jak zaimplementować dynamiczne style oparte na danych w przypadku granic Google za pomocą Maps JavaScript API. Jest to przydatne w różnych przypadkach użycia w różnych branżach i segmentach.
Animowana liczba taksówek w Nowym Jorku według granic kodu pocztowego (symulacja, przyspieszenie):
Style oparte na 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 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żna wizualizować dane za pomocą stylów opartych 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ą geograficzne rozmieszczenie danych, dynamiczne dostosowywanie stylu wielokąta i interakcję z danymi za pomocą zdarzeń kliknięcia. Te funkcje można wykorzystać do tworzenia informacyjnych i angażujących map 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 stylach opartych 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 wyznaczaniu najlepszych tras alternatywnych.
- Wybory: w noc wyborczą dane z sondaży w czasie rzeczywistym mogą służyć do wizualizacji wyników na bieżąco.
- Bezpieczeństwo pracowników: aktualizacje w czasie rzeczywistym mogą służyć do śledzenia zdarzeń w czasie rzeczywistym, identyfikowania obszarów o wysokim ryzyku i informowania służb ratowniczych w terenie o sytuacji.
- Pogoda: aktualizacje w czasie rzeczywistym mogą służyć do śledzenia przemieszczania się burz, identyfikowania bieżących zagrożeń oraz wysyłania ostrzeżeń i alertów.
- Środowisko: aktualizacje w czasie rzeczywistym mogą służyć do śledzenia przemieszczania się popioł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. Dzięki temu mogą oni niemal natychmiast uzyskiwać statystyki, które pozwalają im podejmować bardziej świadome decyzje.
Architektura rozwiązania
Teraz omówimy, jak utworzyć mapę za pomocą stylów opartych na danych, aby wizualizować dane dynamiczne. Jak wspomnieliśmy wcześniej, przypadek użycia to liczba taksówek w Nowym Jorku wizualizowana według kodu pocztowego. Może to pomóc użytkownikom w zrozumieniu, jak łatwo będzie im złapać taksówkę.
Oto diagram architektury aplikacji:
Rozwiązanie dotyczące dynamicznych stylów opartych na danych
Teraz omówimy kroki potrzebne do wdrożenia dynamicznego stylu opartego na danych kartogramu dla Twojego zbioru danych.
To rozwiązanie umożliwia wizualizację hipotetycznego zbioru danych o gęstości taksówek w czasie rzeczywistym w Nowym Jorku według kodu pocztowego. Chociaż nie są to dane rzeczywiste, mają one zastosowanie w rzeczywistości i pozwalają zrozumieć możliwości wizualizacji danych dynamicznych na mapie za pomocą stylów opartych na danych.
Krok 1. Wybierz dane do wizualizacji i połącz je z identyfikatorem miejsca granicznego
Pierwszym krokiem jest określenie danych, które chcesz wyświetlić, i upewnienie się, że można je dopasować do granic Google. Dopasowanie możesz przeprowadzić 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ą unikalne nazwy, ale inne poziomy administracyjne nie. W przypadkach, w których wyniki mogą być niejednoznaczne, musisz wybrać 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ć Geocoding API z filtrowaniem komponentów, aby przekształcić te wartości na identyfikatory miejsc w warstwie 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. Najlepsza implementacja zależy 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 do niej będziesz wysyłać za pomocą funkcji Cloud Functions w Firebase.
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 w przeglądarce i ustawienie timera, który będzie odświeżać dane za pomocą funkcji setInterval. Możesz ustawić odpowiedni interwał, np. odświeżanie mapy co 15 sekund. Za każdym razem, gdy upłynie interwał, proces roboczy w przeglądarce będzie wysyłać zapytanie o zaktualizowane 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. Stylizuj mapę za pomocą stylów opartych na danych
Teraz, gdy masz wartości danych dynamicznych potrzebne do utworzenia i zastosowania stylu wizualnego do granic kodów pocztowych w instancji Maps JavaScript jako obiektu JSON, możesz nadać mu styl kartogramu.
W tym przykładzie będziesz stylizować mapę na podstawie liczby taksówek w każdym kodzie pocztowym, co pozwoli użytkownikom zorientować się w gęstości i dostępności taksówek w ich okolicy. Styl będzie się różnić w zależności od wartości liczby taksówek. Obszary z najmniejszą liczbą taksówek będą miały zastosowany styl fioletowy, a gradient kolorów będzie przechodzić przez czerwony, pomarańczowy i kończyć się na żółtym kolorze taksówek 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 właściwości fillColor i strokeColor. Ustawienie wartości fillOpacity na 0,5 umożliwia użytkownikom zobaczenie mapy bazowej, a ustawienie wartości 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 w różnych implementacjach w różnych branżach i segmentach. Łączenie się z danymi w czasie rzeczywistym umożliwia przekazywanie informacji o tym, co się dzieje, gdzie się dzieje i kiedy się dzieje. Ta funkcja może pomóc w wykorzystaniu wartości danych w czasie rzeczywistym i ułatwić użytkownikom ich zrozumienie w czasie rzeczywistym.
Następne kroki
- Obejrzyj webinar Jak używać stylów opartych na danych do stylizowania granic map Google.
- Ulepsz wizualizację za pomocą zdarzeń kliknięcia w stylach opartych na danych.
- Rozważ dodanie do mapy znaczników zaawansowanych.
Współtwórcy
Główny autor:
Jim Leflar | Inżynier rozwiązań Google Maps Platform