In diesem Dokument wird beschrieben, warum und wie Sie dynamische datengestützte Stile für Google-Grenzen mit der Maps JavaScript API implementieren. Dies ist für eine Vielzahl von Anwendungsfällen in verschiedenen Branchen und Segmenten nützlich.
Animierte Anzahl der Taxis in New York City nach Postleitzahlgrenze (simuliert, Zeitraffer):
Mit datengestützten Stilen können Sie die Polygone für Verwaltungsgrenzen von Google verwenden, Stile auf diese Polygone anwenden, um sie auf Ihren Karten darzustellen, und Ihre eigenen Daten kombinieren, um aussagekräftige, individuelle 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 erklärt wird, warum und wie Sie Ihre Daten mit datengestützten Stilen in nahezu Echtzeit auf einer Karte visualisieren können, indem Sie dynamische Datenfeeds einbinden.
Mit datengestützten Stilen können Sie Karten erstellen, auf denen die geografische Verteilung von Daten dargestellt wird, Polygone dynamisch anpassen und über Klickereignisse mit Ihren Daten interagieren. Diese Funktionen können verwendet werden, um informative und ansprechende Karten für eine Vielzahl von Anwendungsfällen und Branchen zu erstellen.
Hier sind einige Beispiele für Anwendungsfälle, die auf eine Karte angewendet werden könnten, auf der dynamische Datenaktualisierungen mit datengestützten Stilen angezeigt werden:
- Mitfahrgelegenheiten: Mit Echtzeitaktualisierungen können Sie Bereiche mit hoher Nachfrage identifizieren. In diesem Fall können einige Anbieter Aufpreise erheben.
- Transport: Mit Echtzeitaktualisierungen können Sie Bereiche mit Staus identifizieren, um die besten alternativen Routen zu ermitteln.
- Wahlen: Am Wahlabend können Sie mit Echtzeitdaten aus Umfragen die Ergebnisse visualisieren, sobald sie eintreffen.
- Arbeitssicherheit: Mit Echtzeitaktualisierungen können Sie Ereignisse in Echtzeit verfolgen, Bereiche mit hohem Risiko identifizieren und Einsatzkräften vor Ort Informationen zur Lage geben.
- Wetter: Mit Echtzeitaktualisierungen können Sie die Bewegung von Stürmen verfolgen, aktuelle Gefahren identifizieren und Warnungen und Benachrichtigungen ausgeben.
- Umwelt: Mit Echtzeitaktualisierungen können Sie die Bewegung von Vulkanasche und anderen Schadstoffen verfolgen, Bereiche mit Umweltverschmutzung identifizieren und die Auswirkungen menschlicher Aktivitäten beobachten.
In all diesen Situationen können Kunden zusätzlichen Mehrwert 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 sofort Einblicke, um fundiertere Entscheidungen zu treffen.
Architektonischer Ansatz für die Lösung
Sehen wir uns nun an, wie Sie mit datengestützten Stilen eine Karte erstellen, um dynamische Daten zu visualisieren. Wie bereits erwähnt, ist der Anwendungsfall die Anzahl der Taxis in New York City, visualisiert nach Postleitzahl. So können Nutzer besser einschätzen, 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 die Schritte an, die erforderlich sind, um eine Choroplethenkarte mit dynamischen datengestützten Stilen für Ihr Dataset zu implementieren.
Mit dieser Lösung können Sie ein hypothetisches Dataset mit der Taxidichte in Echtzeit rund um New York City nach Postleitzahl visualisieren. Auch wenn es sich nicht um reale Daten handelt, gibt es reale Anwendungen und Sie erhalten einen Eindruck von der Leistungsfähigkeit und den Möglichkeiten, wie dynamische Daten mit datengestützten Stilen auf der Karte visualisiert werden können.
Schritt 1: Daten für die Visualisierung auswählen und mit einer Orts-ID für eine Grenze verknüpfen
Im ersten Schritt müssen Sie die Daten identifizieren, die Sie anzeigen möchten, und dafür sorgen, dass sie mit den Grenzen von Google übereinstimmen. Sie können diese Übereinstimmung clientseitig ausführen, indem Sie die Callback-Methode findPlaceFromQuery für jede Postleitzahl aufrufen. Beachten Sie, dass Postleitzahlen in den USA eindeutige Namen haben, andere Verwaltungsebenen jedoch nicht. Sie sollten die richtige Orts-ID für Ihre Abfrage auswählen, wenn es mehrdeutige Ergebnisse geben könnte.
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 Längen- und Breitengradwerte enthalten, können Sie auch die Geocoding API mit der Komponentenfilterung verwenden, um diese Werte in Orts-IDs für die Feature-Ebene aufzulösen, die Sie gestalten möchten. In diesem Beispiel gestalten Sie die Feature-Ebene POSTAL_CODE.
Schritt 2: Mit Echtzeitdaten verbinden
Es gibt verschiedene Möglichkeiten, eine Verbindung zu Datenquellen herzustellen. Die beste Implementierung hängt von Ihren spezifischen Anforderungen und Ihrer technischen Infrastruktur ab. In diesem Fall gehen wir davon aus, dass sich Ihre Daten in einer BigQuery-Tabelle mit zwei Spalten befinden: „zip_code“ und „taxi_count“. Sie fragen sie über eine Firebase Cloud Function ab.
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 darauf achten, dass die Daten aktuell sind. Eine Möglichkeit besteht darin, die oben genannte Abfrage mit einem Web Worker aufzurufen und einen Timer festzulegen, um die Daten mit der Funktion setInterval zu aktualisieren. Sie können das Intervall auf einen geeigneten Wert festlegen, z. B. die Karte alle 15 Sekunden aktualisieren. Jedes Mal, wenn das Intervall abläuft, fordert der Web Worker aktualisierte taxiCount-Werte pro Postleitzahl an.
Jetzt, da wir die Daten abfragen und aktualisieren können, sorgen wir dafür, dass das Erscheinungsbild der Kartenpolygone diese Änderungen widerspiegelt.
Schritt 3: Karte mit datengestützten Stilen gestalten
Jetzt haben Sie die dynamischen Datenwerte, die erforderlich sind, um einen visuellen Stil für die Postleitzahlgrenzen in Ihrer Maps JavaScript-Instanz als JSON-Objekt zu erstellen und anzuwenden. Es ist an der Zeit, sie als eine Choroplethenkarte zu gestalten.
In diesem Beispiel gestalten Sie die Karte anhand der Anzahl der Taxis in jeder Postleitzahl, damit Ihre Nutzer einen Eindruck von der Taxidichte und Verfügbarkeit in ihrer Region erhalten. Der Stil variiert je nach den Werten für die Anzahl der Taxis. Auf die Bereiche mit den wenigsten Taxis wird ein violetter Stil angewendet. Der Farbverlauf geht über Rot und Orange bis hin zu Gelb für die Bereiche mit der höchsten Dichte. Für dieses Farbschema wenden Sie diese Farbwerte auf fillColor und strokeColor an. Wenn Sie die fillOpacity auf 0,5 festlegen, können Ihre Nutzer die zugrunde liegende Karte sehen. Wenn Sie die strokeOpacity auf 1,0 festlegen, können sie zwischen den Grenzen gleichfarbiger Polygone 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 was passiert, wo es passiert und wann es passiert kommunizieren. Mit dieser Funktion können Sie den Wert Ihrer Echtzeitdaten steigern und Ihren Nutzern helfen, sie in Echtzeit und in der realen Welt besser zu verstehen.
Nächste Schritte
- Sehen Sie sich das Webinar Datengestützte Stile zum Gestalten von Google-Kartengrenzen verwenden an.
- Mit Klickereignissen für datengestützte Stile können Sie Ihre Visualisierung noch weiter verbessern.
- Sie können Ihrer Karte auch erweiterte Markierungen hinzufügen.
Beitragende
Hauptautor:
Jim Leflar | Google Maps Platform Solutions Engineer