In diesem Dokument wird beschrieben, warum und wie Sie dynamisches datengetriebenes Styling von Google-Grenzen mit der Maps JavaScript API implementieren. Das ist für eine Vielzahl von Anwendungsfällen in verschiedenen Branchen und Segmenten nützlich.
Animierte Taxianzahl in New York City nach Postleitzahl (simuliert, Zeitraffer):
Mit datengestützten Stilen ist es möglich, die Polygone für Verwaltungsgrenzen von Google zu verwenden, diese Polygone zu gestalten und auf Ihren Karten anzuzeigen sowie eigene Daten zu kombinieren, um aussagekräftige, benutzerdefinierte Karten zu erstellen, die für die visuelle Analyse und ein besseres Verständnis Ihrer Daten verwendet werden können. In diesem Dokument werden einige Anwendungsfälle beschrieben, in denen erläutert wird, warum und wie Sie Ihre Daten mithilfe von Data-driven Styling auf einer Karte nahezu in Echtzeit visualisieren können, indem Sie dynamische Datenfeeds einbinden.
Mit datengestützten Stilen können Sie Karten erstellen, die die geografische Verteilung von Daten zeigen, den Polygonstil dynamisch anpassen und über Click-Events mit Ihren Daten interagieren. Mit diesen Funktionen lassen sich informative und ansprechende Karten für eine Vielzahl von Anwendungsfällen und Branchen erstellen.
Hier sind einige Beispiele für Anwendungsfälle, die für eine Karte mit dynamischen Datenaktualisierungen für das datengestützte Styling gelten könnten:
- Fahrgemeinschaft:Mithilfe von Echtzeitaktualisierungen können Sie Gebiete mit hoher Nachfrage ermitteln. In diesem Fall können einige Anbieter einen Aufschlag auf den Fahrpreis erheben.
- Verkehr:Anhand von Echtzeitdaten können Sie Staus erkennen und so die besten alternativen Routen ermitteln.
- Wahlen:Am Wahlabend können Echtzeitdaten von Umfragen verwendet werden, um die Ergebnisse in Echtzeit zu visualisieren.
- Arbeitnehmersicherheit:Mit Echtzeitaktualisierungen können Ereignisse in Echtzeit verfolgt, Hochrisikobereiche identifiziert und Einsatzkräfte vor Ort über die aktuelle Situation informiert werden.
- Wetter:Mit Echtzeitaktualisierungen können Sie die Bewegung von Stürmen verfolgen, aktuelle Gefahren erkennen und Warnungen und Benachrichtigungen erhalten.
- Umwelt:Echtzeitaktualisierungen können verwendet werden, um die Ausbreitung von Vulkanasche und anderen Schadstoffen zu verfolgen, Bereiche mit Umweltverschmutzung zu identifizieren und die Auswirkungen menschlicher Aktivitäten zu überwachen.
In all diesen Fällen können Kunden zusätzliche Vorteile erzielen, indem sie ihre Echtzeit-Datenfeeds mit den Grenzen von Google kombinieren, um ihre Daten schnell und einfach auf einer Karte zu visualisieren. So erhalten sie nahezu sofortige Informationen, die ihnen bei fundierten Entscheidungen helfen.
Architekturansatz für die Lösung
Sehen wir uns nun das Erstellen einer Karte mit datengestützten Stilen an, um dynamische Daten zu visualisieren. Wie bereits erwähnt, geht es bei diesem Anwendungsfall um die Anzahl der Taxis in New York, die nach Postleitzahl visualisiert wird. So können Nutzer besser nachvollziehen, wie einfach es sein wird, ein Taxi zu rufen.
Hier ist ein Diagramm der Anwendungsarchitektur des Ansatzes:
Die Lösung für dynamische, datengestützte Stile
Sehen wir uns nun an, wie Sie eine dynamische Choroplethenkarte mit datengestütztem Stil für Ihren Datensatz implementieren.
Mit dieser Lösung können Sie ein hypothetisches Dataset der Echtzeit-Taxidichte in New York City nach Postleitzahl visualisieren. Auch wenn es sich nicht um reale Daten handelt, haben sie praktische Anwendungen und vermitteln einen Eindruck davon, wie leistungsfähig und vielfältig dynamische Daten mithilfe des datengestützten Stylings auf der Karte visualisiert werden können.
Schritt 1: Daten auswählen, die visualisiert und mit einer Orts-ID der Begrenzung verknüpft werden sollen
Zuerst müssen Sie die Daten identifizieren, die Sie anzeigen möchten, und dafür sorgen, dass sie mit den Grenzen von Google abgeglichen werden können. Sie können diesen Abgleich clientseitig durchführen, indem Sie für jeden postalCode die Callback-Methode findPlaceFromQuery aufrufen. Postleitzahlen in den USA haben eindeutige Namen, andere Verwaltungsebenen jedoch nicht. Achten Sie darauf, die richtige Orts-ID für Ihre Suchanfrage auszuwählen, wenn es zu mehrdeutigen Ergebnissen kommen kann.
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]);
}
});
}
Wenn in Ihren Daten Breiten- und Längengradwerte vorhanden sind, können Sie auch die Geocoding API mit Komponentenfilter verwenden, um diese Werte in Orts-ID-Werte für die Elementebene aufzulösen, für die Sie einen Stil erstellen möchten. In diesem Beispiel geben Sie der Feature-Ebene „POSTAL_CODE“ einen Stil.
Schritt 2: Verbindung zu Echtzeitdaten herstellen
Es gibt verschiedene Möglichkeiten, eine Verbindung zu Datenquellen herzustellen. Die beste Implementierung hängt von Ihren spezifischen Anforderungen und Ihrer technischen Infrastruktur ab. Angenommen, Ihre Daten befinden sich in einer BigQuery-Tabelle mit zwei Spalten: „zip_code“ und „taxi_count“. Sie möchten sie über eine Firebase Cloud Function abfragen.
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'];
});
}
Als Nächstes sollten Sie dafür sorgen, dass die Daten immer auf dem neuesten Stand sind. Eine Möglichkeit dazu besteht darin, die obige Abfrage mit einem Webworker aufzurufen und mit der Funktion setInterval einen Timer zum Aktualisieren der Daten festzulegen. Sie können das Intervall auf einen geeigneten Wert festlegen, z. B. alle 15 Sekunden. Nach Ablauf des Intervalls fordert der Web Worker aktualisierte "taxiCount"-Werte pro postalCode an.
Da wir nun die Daten abfragen und aktualisieren können, sorgen wir dafür, dass die Darstellung der Kartenpolygone diese Änderungen widerspiegelt.
Schritt 3: Karte mit datengestützten Stilen gestalten
Sie haben jetzt die dynamischen Datenwerte, die Sie benötigen, um in Ihrer Maps JavaScript-Instanz als JSON-Objekt einen visuellen Stil für die Postleitzahlengrenzen zu erstellen und anzuwenden. Jetzt ist es an der Zeit, der Karte einen Stil als Choropleth-Karte zu verleihen.
In diesem Beispiel gestalten Sie die Karte anhand der Anzahl der Taxis in jeder Postleitzahl, damit Nutzer einen Eindruck von der Taxidichte und -verfügbarkeit in ihrer Region erhalten. Der Stil variiert je nach Wert der Taxianzahl. Die Bereiche mit den wenigsten Taxis werden lila dargestellt. Die Farbabstufung geht über Rot und Orange bis hin zu Gelb, der Farbe der Taxis in New York, in den Bereichen mit der höchsten Dichte. Für dieses Farbschema wenden Sie diese Farbwerte auf „fillColor“ und „strokeColor“ an. Wenn Sie „fillOpacity“ auf 0,5 festlegen, können Ihre Nutzer die zugrunde liegende Karte sehen. Wenn Sie „strokeOpacity“ auf 1,0 festlegen, können sie die Grenzen von Polygonen mit derselben Farbe unterscheiden:
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,
};
Fazit
Mit datengestützten Stilen für Google-Grenzen können Sie Ihre Daten verwenden, um Ihre Karte für eine Vielzahl von Implementierungen in verschiedenen Branchen und Segmenten zu gestalten. Durch die Verbindung mit Echtzeitdaten können Sie kommunizieren, was passiert, wo es passiert und während es passiert. Mit dieser Funktion können Sie den Wert Ihrer Echtzeitdaten besser nutzen und Ihren Nutzern helfen, sie in Echtzeit besser zu verstehen.
Nächste Aktionen
- Sehen Sie sich das Webinar Datengestützte Stile für Google-Kartengrenzen verwenden an.
- Optimieren Sie Ihre Visualisierung mit Klickereignissen für datengestützte Stile.
- Sie können Ihrer Karte erweiterte Markierungen hinzufügen.
Beitragende
Hauptautor:
Jim Leflar | Google Maps Platform Solutions Engineer