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 können Sie die Polygone für Verwaltungsgrenzen von Google verwenden, diese Polygone für die Darstellung auf Ihren Karten stylen und Ihre eigenen Daten 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:Mit Echtzeitaktualisierungen können die Bewegung von Vulkanasche und anderen Schadstoffen beobachtet, Gebiete mit Umweltverschmutzung identifiziert und die Auswirkungen menschlicher Aktivitäten beobachtet werden.
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 an, wie Sie mithilfe von datengestützten Stilen eine Karte erstellen, 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 einen hypothetischen Datensatz der Echtzeit-Taxidichte in New York City nach Postleitzahl visualisieren. Auch wenn es sich hierbei 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 für die Visualisierung auswählen und mit einer Orts-ID für Begrenzungen verknüpfen
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 diese Abgleiche clientseitig ausführen, indem Sie für jede Postleitzahl 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 Ihre Daten Werte für den Breiten- und Längengrad enthalten, können Sie auch die Geocoding API mit Komponentenfilterung verwenden, um diese Werte in Orts-ID-Werte für die zu stilisierende Feature-Ebene umzuwandeln. In diesem Beispiel gestalten Sie die POSTAL_CODE-Ebenen.
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. Jedes Mal, wenn die Intervallzeit abgelaufen ist, fordert der Webworker aktualisierte taxiCount-Werte pro Postleitzahl an.
Da wir die Daten jetzt abfragen und aktualisieren können, prüfen wir, ob die Kartenpolygone diese Änderungen widerspiegeln.
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. Der Farbverlauf 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. Wenn Sie eine Verbindung zu Echtzeitdaten herstellen, können Sie mitteilen, was passiert, wo es passiert und wann 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 Mit datengestützten Stilen Google-Kartengrenzen gestalten an.
- Mit Klickereignissen für das datengestützte Styling können Sie Ihre Visualisierung noch weiter optimieren.
- Sie können Ihrer Karte erweiterte Markierungen hinzufügen.
Beitragende
Hauptautor:
Jim Leflar | Google Maps Platform Solutions Engineer