Z tego dokumentu dowiesz się, dlaczego i jak zaimplementować dynamiczne stylowanie oparte na danych w Google Boundaries za pomocą interfejsu Maps JavaScript API. Jest on przydatny w różnych zastosowaniach w różnych branżach i segmentach.
Animowana liczba taksówek w Nowym Jorku według granicy kodu pocztowego (symulowana, z opóźnieniem czasowym):
Stylizacja oparta na danych to funkcja platformy Mapy Google, która umożliwia korzystanie z poligonów granic administracyjnych Google, stosowanie stylizacji do tych poligonów na potrzeby 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 omawiamy kilka przypadków użycia, które pokazują, dlaczego i jak możesz wizualizować swoje dane za pomocą stylizacji opartej na danych na mapie w prawie czasie rzeczywistym dzięki integracji dynamicznych plików danych.
Stylizacja oparta na danych umożliwia tworzenie map, które pokazują rozkład geograficzny danych, dynamiczne dostosowywanie stylu wielokąta oraz interakcję z danymi za pomocą zdarzeń kliknięcia. Te funkcje można wykorzystać do tworzenia przydatnych i atrakcyjnych map na potrzeby różnych zastosowań i branż.
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 zapotrzebowaniu, w których niektórzy dostawcy mogą stosować ceny szczytowe.
- Transport: aktualizacje w czasie rzeczywistym mogą służyć do identyfikowania obszarów z korkami, co ułatwia wybór najlepszej trasy alternatywnej.
- Wybory: w nocy wyborów dane z wywiadów telefonicznych w czasie rzeczywistym mogą służyć do wizualizacji wyników na bieżąco.
- 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 pozwalają śledzić przemieszczanie się burz, identyfikować aktualne zagrożenia oraz wyświetlać ostrzeżenia i alerty.
- Środowisko: aktualizacje w czasie rzeczywistym można wykorzystać do śledzenia przemieszczania się popioł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 supermocy niemal natychmiastowych statystyk, które pomogą im podejmować lepsze decyzje.
Architektura rozwiązania
Teraz pokażę Ci, jak tworzyć mapę, używając stylizacji opartej na danych do wizualizacji danych dynamicznych. Jak już wspomniano, przykładem zastosowania jest liczba taksówek w Nowym Jorku zwizualizowana według kodu pocztowego. Dzięki temu użytkownicy będą wiedzieć, jak łatwo jest wezwać taksówkę.
Oto diagram architektury aplikacji przedstawiający podejście:
Dynamiczne rozwiązanie oparte na danych
Teraz opiszemy kroki potrzebne do wdrożenia dynamicznego stylizowania danych mapy choropletu w przypadku Twojego zbioru danych.
To rozwiązanie umożliwia wizualizację hipotetycznego zbioru danych przedstawiającego gęstość taksówek w okolicy Nowego Jorku w czasie rzeczywistym według kodu pocztowego. Chociaż nie są to rzeczywiste dane, mają one praktyczne zastosowanie 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 w danych usługi Places
Najpierw musisz określić dane, które chcesz wyświetlać, i upewnić się, że można 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 USA mają odrębne nazwy, ale inne poziomy administracyjne nie. W przypadku niejednoznacznych wyników należy wybrać prawidłowy identyfikator miejsca docelowego.
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 wartości identyfikatorów miejsc dla warstwy obiektów, której stylizacja Cię interesuje. W tym przykładzie nadasz styl warstwie funkcji POSTAL_CODE.
Krok 2. Połącz się z danymi w czasie rzeczywistym
Istnieją różne sposoby na połączenie się ze źródłami danych, a najlepsza implementacja zależy od Twoich konkretnych potrzeb i infrastruktury technicznej. Załóżmy, że w tym przypadku Twoje dane znajdują się w tabeli BigQuery z 2 kolumnami: „zip_code” i „taxi_count”. Zapytania do niej będziesz wysyłać za pomocą funkcji Firebase Cloud.
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ą 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 choropleth.
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 i dostępności taksówek w ich okolicy. Styl będzie się zmieniać w zależności od wartości liczby taksówek. Obszary z najmniejszą liczbą taksówek będą miały stylizację w kolorze fioletowym, a gradient kolorów będzie przechodzić przez czerwień, pomarańczę i kończyć się na żółci taksówek w Nowym Jorku w obszarach o najwyższej gęstości. W tym schemacie kolorów te wartości kolorów zastosujesz do atrybutów fillColor i strokeColor. Ustawienie wartości fillOpacity na 0,5 pozwala użytkownikom widzieć mapę podstawową, a ustawienie wartości strokeOpacity na 1,0 pozwala im odróżniać 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
Stylizacja granic Google oparta na danych umożliwia wykorzystanie danych do stylizacji mapy na potrzeby 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 zrozumieniu w czasie rzeczywistym w rzeczywistym świecie.
Dalsze działania
- Obejrzyj webinar Jak stylizować granice map Google za pomocą stylizacji opartej na danych.
- Użyj zdarzeń kliknięcia do tworzenia stylizacji opartej na danych.
- Zastanów się nad dodaniem do mapy zaawansowanych znaczników.
Współtwórcy
Główny autor:
Jim Leflar | Inżynier rozwiązań Google Maps Platform