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):
Datengestützte Stile sind eine Funktion der Google Maps Platform, mit der Sie die Polygone für Verwaltungsgrenzen von Google nutzen, Stile auf diese Polygone anwenden, um sie auf Ihren Karten darzustellen, und Ihre eigenen Daten kombinieren können, 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 einige Beispiele für Anwendungsfälle, die für eine Karte mit dynamischen Datenaktualisierungen mit datengestützten Stilen infrage kommen:
- 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, Hochrisikobereiche 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, wird in diesem Anwendungsfall die Anzahl der Taxis in New York City nach Postleitzahl visualisiert. 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 dynamische Choroplethenkarte mit datengestützten Stilen für Ihr Dataset zu implementieren.
Mit dieser Lösung können Sie ein hypothetisches Dataset mit der Taxidichte in Echtzeit nach Postleitzahl in New York City 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 findPlaceFromQuery-Callback-Methode für jede Postleitzahl aufrufen. Postleitzahlen in den USA haben eindeutige Namen, andere Verwaltungsebenen jedoch nicht. In Fällen, in denen es zu mehrdeutigen Ergebnissen kommen kann, müssen Sie die richtige Orts-ID für Ihre Abfrage auswählen.
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 Längen-/Breitengradwerte in Orts-IDs für die Feature-Ebene aufzulösen, die Sie gestalten möchten. In diesem Beispiel gestalten Sie die Element-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 müssen Sie dafür sorgen, dass die Daten aktuell bleiben. Eine Möglichkeit besteht darin, die oben genannte Abfrage mit einem Web-Worker aufzurufen und einen Timer festzulegen, um Ihre 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 sich diese Änderungen im Erscheinungsbild der Kartenpolygone widerspiegeln.
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 fillOpacity auf 0,5 festlegen, können Ihre Nutzer die zugrunde liegende Karte sehen. Wenn Sie 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. Diese Funktion kann 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