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 przyspieszeniem):
Stylizacja oparta na danych to funkcja Google Maps Platform, która umożliwia korzystanie z poligonów granic administracyjnych Google, stosowanie stylizacji do tych wielokątów na potrzeby wyświetlania na mapach oraz łączenie własnych danych w celu tworzenia bogatych, niestandardowych map, których można używać 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 niemal 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 i interakcję z danymi za pomocą zdarzeń kliknięcia. Te funkcje można wykorzystać do tworzenia pożytecznych 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 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 mogą służyć 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 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 niemal natychmiastowych statystyk, które pomogą im podejmować lepsze decyzje.
Architektura rozwiązania
Teraz pokażę Ci, jak utworzyć mapę, używając stylizacji opartej na danych do wizualizacji danych dynamicznych. Jak już wspomnieliśmy, przykładem zastosowania jest liczba taksówek w Nowym Jorku zwizualizowana według 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 dla swojego 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 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ę wywołania zwrotnego findPlaceFromQuery dla każdego kodu pocztowego. Pamiętaj, że kody pocztowe w Stanach Zjednoczonych mają odrębne nazwy, ale inne poziomy administracyjne nie. W przypadku niejednoznacznych wyników zapytań należy wybrać odpowiedni 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 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 nawiązywanie połączenia ze źródłami danych, a najlepsza implementacja zależy od Twoich 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 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 odświeży 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 za pomocą stylizacji opartej 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ą liczbą taksówek będą miały stylizację w kolorze fioletowym, a gradient kolorów będzie się zmieniał od czerwieni przez pomarańcz do żółtego, czyli koloru 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 na podstawie danych w przypadku granic wyznaczonych przez Google 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 rozumieniu w czasie rzeczywistym w rzeczywistym świecie.
Dalsze działania
- Obejrzyj webinar Jak używać stylizacji opartej na danych do stylizacji granic map Google.
- Aby udoskonalić wizualizację, użyj zdarzeń kliknięcia do stylizacji opartej na danych.
- Rozważ dodanie do mapy zaawansowanych znaczników.
Współtwórcy
Główny autor:
Jim Leflar | Inżynier ds. rozwiązań Google Maps Platform