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.
Animowana liczba taksówek w Nowym Jorku według granicy kodu pocztowego (symulowana, upłynęła):
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 opisujemy niektóre przypadki użycia, które wyjaśniają, dlaczego i jak można 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. Te funkcje można wykorzystać do tworzenia pożytecznych i przyciągających uwagę map w różnych zastosowaniach i branżach.
Oto kilka przykładów zastosowań, które można zastosować do mapy wyświetlającej dynamiczne aktualizacje danych w ramach stylizacji opartej na danych:
- Usługi przewozu osób: aktualizacje w czasie rzeczywistym mogą służyć do identyfikowania obszarów o wysokim popycie, w których przypadku niektórzy dostawcy mogą stosować ceny szczytowe.
- Transport: dzięki informacjom aktualizowanym w czasie rzeczywistym można wykrywać obszary korków, co ułatwia wybór najlepszej trasy alternatywnej.
- Wybory: w nocy wyborów dane z wyborów w czasie rzeczywistym można wykorzystać do wizualizacji wyników w miarę ich pojawiania się.
- Bezpieczeństwo pracowników: aktualizacje w czasie rzeczywistym można wykorzystać do śledzenia wydarzeń w czasie rzeczywistym, identyfikowania obszarów o wysokim ryzyku oraz informowania osób reagujących na zdarzenia o sytuacji na miejscu.
- Pogoda: aktualizacje w czasie rzeczywistym umożliwiają śledzenie przemieszczania się burz, identyfikowanie aktualnych zagrożeń oraz wysyłanie ostrzeżeń i alertów.
- Ś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.
W każdej z tych sytuacji 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 będą mogli korzystać z niemal natychmiastowych statystyk, które pomogą im podejmować lepsze decyzje.
Architektoniczne podejście do rozwiązania
Teraz pokażę Ci, jak utworzyć mapę, używając stylizacji opartej 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 mogą dowiedzieć się, jak łatwo jest wezwać taksówkę.
Oto diagram architektury aplikacji przedstawiający podejście:
Dynamiczne rozwiązanie oparte na danych
Poniżej znajdziesz instrukcje wdrażania dynamicznego stylizowania danych na podstawie danych w mapie chorochromatycznej na potrzeby zbioru danych.
To rozwiązanie umożliwia wizualizację hipotetycznego zbioru danych przedstawiającego gęstość taksówek w okolicy Nowego Jorku według kodu pocztowego w czasie rzeczywistym. Chociaż nie są to dane z prawdziwego świata, mają one zastosowanie w rzeczywistych sytuacjach i pozwalają poznać możliwości wizualizacji danych dynamicznych na mapie za pomocą stylizacji opartej na danych.
Krok 1. Wybierz dane do wizualizacji i złącz je z identyfikatorem granicy miejsca na mapie
Najpierw określ dane, które chcesz wyświetlać, i sprawdź, czy da się je dopasować do granic Google. Dopasowanie możesz wykonać po stronie klienta, wywołując metodę 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. W przypadku niejednoznacznych wyników należy wybrać prawidłowy identyfikator miejsca.
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. Załóżmy, że w tym przypadku dane znajdują się w tabeli BigQuery z 2 kolumnami: „zip_code” i „taxi_count”, a zapytanie do niej będzie wysyłane 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 zadbaj o to, aby dane były zawsze aktualne. Jednym ze sposobów jest wywołanie powyższego zapytania za pomocą elementu web worker i ustawienie zegara, 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. Za każdym razem, gdy upłynie czas interwałowy, web worker będzie prosić o zaktualizowanie wartości taxiCount według kodu pocztowego.
Teraz, gdy możemy wysyłać zapytania do danych i je odświeżać, sprawdźmy, czy wygląd poligonów na mapie uwzględnia te zmiany.
Krok 3. Nadaj mapie styl oparty na danych
Teraz, gdy masz już wartości danych dynamicznych potrzebne do tworzenia i zastosowywania stylu wizualnego do granic kodów pocztowych w wystąpieniu Maps JavaScript jako obiektu JSON, możesz nadać mu styl w postaci mapy choroplethicznej.
W tym przykładzie sformatujesz mapę na podstawie liczby taksówek w każdym kodzie pocztowym, aby poinformować użytkowników o gęstości występowania 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ą 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 tym przypadku te wartości kolorów zastosujesz do atrybutów fillColor i strokeColor. Ustawienie FillOpacity na 0,5 pozwala użytkownikom zobaczyć podstawowa mapę, a ustawienie pulseOpacity 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 umożliwia komunikowanie czego, gdzie i kiedy coś się dzieje. Ta funkcja może zwiększyć wartość danych w czasie rzeczywistym i pomóc użytkownikom w lepszym ich rozumieniu w czasie rzeczywistym w rzeczywistym świecie.
Dalsze działania
- Obejrzyj webinar Jak używać stylizacji opartej na danych do stylizacji granic w mapach Google.
- Aby udoskonalić wizualizację, użyj zdarzeń kliknięcia do stylizacji opartej na danych.
- Rozważ dodanie do mapy znaczników zaawansowanych.
Współtwórcy
Główny autor:
Jim Leflar | Inżynier rozwiązań Google Maps Platform