In diesem Dokument wird beschrieben, warum und wie mithilfe der Maps JavaScript API dynamische datengestützte Stile von Google-Grenzen implementiert werden. Diese API ist für eine Vielzahl von Anwendungsfällen in verschiedenen Branchen und Segmenten nützlich.
Animierte Taxianzahl in New York City nach Postleitzahlbereich (simuliert, zeitversetzt):
Datengestützte Stile sind eine Funktion der Google Maps Platform, mit der Sie Begrenzungspolygone von Google nutzen, Stile auf diese Polygone zur Anzeige auf Ihren Karten anwenden und eigene Daten kombinieren können, um aussagekräftige, benutzerdefinierte Karten zu erstellen, die für visuelle Analysen und ein besseres Verständnis Ihrer Daten verwendet werden können. In diesem Dokument werden einige Anwendungsfälle erläutert, in denen erläutert wird, warum und wie Sie Ihre Daten mit datengestützten Stilen nahezu in 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. Außerdem können Sie den Polygonstil dynamisch anpassen und über Klickereignisse 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 zu datengestützten Stilen anwendbar sein können:
- Mitfahrdienste:Mithilfe von Echtzeitaktualisierungen lassen sich Regionen mit hoher Nachfrage identifizieren. Bei einigen Anbietern kann es dann zu Spitzenpreisen kommen.
- Verkehr:Mithilfe von Echtzeitaktualisierungen können Verkehrsbehinderungen ermittelt und die besten Alternativrouten ermittelt werden.
- Wahlen:Am Wahlabend können Umfrageergebnisse in Echtzeit verwendet werden, um die Ergebnisse zu visualisieren.
- Arbeitssicherheit:Mithilfe von Echtzeit-Updates können Sie die Entwicklung von Ereignissen in Echtzeit verfolgen, Gebiete mit hohem Risiko identifizieren und den Einsatzkräften vor Ort ein Überblick über die jeweilige Situation verschaffen.
- Wetter:Mithilfe von Echtzeitaktualisierungen können Sie Stürme verfolgen, aktuelle Gefahren erkennen und Warnungen und Warnungen ausgeben.
- Umwelt:Mithilfe von Echtzeitaktualisierungen können die Bewegungen von Vulkanasche und anderen Schadstoffen verfolgt werden, um Umweltzerstörungen zu ermitteln und die Auswirkungen menschlicher Aktivitäten zu beobachten.
In all diesen Situationen können Kunden einen Mehrwert schaffen, indem sie ihre Echtzeit-Datenfeeds mit den Grenzen von Google kombinieren, um ihre Daten schnell und einfach auf einer Karte darzustellen. So erhalten sie Zugriff auf nahezu sofortige Informationen und eine bessere Entscheidungsfindung.
Architekturansatz zur Lösung
Sehen wir uns nun an, wie Sie mit datengestützten Stilen eine Karte erstellen, um dynamische Daten zu visualisieren. Wie bereits dargestellt, ist der Anwendungsfall eine Anzahl von New Yorker Taxis, dargestellt nach Postleitzahl. Dies kann für Nutzer hilfreich sein zu verstehen, wie einfach es ist, ein Taxi heranzuwinken.
Hier ist ein Diagramm der Anwendungsarchitektur des Ansatzes:
Die dynamische, datengestützte Stillösung
Gehen wir nun die Schritte durch, 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 zur Echtzeit-Taxidichte in New York City nach Postleitzahl visualisieren. Dabei handelt es sich zwar nicht um reale Daten, aber sie bieten reale Anwendungen und vermitteln Ihnen 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 auswählen, die visualisiert und mit einer Orts-ID einer Begrenzung verbunden werden sollen
Der erste Schritt besteht darin, die Daten zu identifizieren, die Sie anzeigen möchten, und sicherzustellen, dass sie mit den Grenzen von Google abgeglichen werden können. Sie können diesen Abgleich clientseitig durchführen, indem Sie die Callback-Methode findPlaceFromQuery für jeden postalCode aufrufen. Beachten Sie, dass Postleitzahlen in den USA über unterschiedliche Namen verfügen, auf anderen Verwaltungsebenen jedoch nicht. Achten Sie darauf, dass Sie die richtige Orts-ID für Ihre Abfrage auswählen, wenn die Ergebnisse nicht eindeutig sind.
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 die Geocoding API mit Komponentenfilter verwenden, um diese Werte für die Breiten- und Längengrade in Orts-ID-Werte der Element-Ebene aufzulösen, für die Sie einen Stil festlegen möchten. In diesem Beispiel gestalten Sie die Element-Ebene POSTAL_CODE.
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. Nehmen wir in diesem Fall an, dass sich Ihre Daten in einer BigQuery-Tabelle mit zwei Spalten befinden: „zip_code“ und „taxi_count“. Sie fragen sie über eine Firebase Cloud Functions-Funktion 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 dafür sorgen, dass die Daten aktuell sind. Eine Möglichkeit, dies zu tun, besteht darin, die obige Abfrage mit einem Web Worker aufzurufen und einen Timer zum Aktualisieren Ihrer Daten mit der Funktion setInterval einzustellen. Sie können das Intervall auf einen geeigneten Wert festlegen, z. B. eine Aktualisierung der Karte alle 15 Sekunden. Nach jedem Intervall fordert der Web Worker aktualisierte taxiCount-Werte per postalCode an.
Jetzt, da wir die Daten abfragen und aktualisieren können, müssen wir sicherstellen, dass die Darstellung der Kartenpolygone diese Änderungen widerspiegelt.
Schritt 3: Karte mit datengestützten Stilen gestalten
Da Sie nun über die dynamischen Datenwerte verfügen, die erforderlich sind, um einen visuellen Stil zu erstellen und auf die Postleitzahlengrenzen in Ihrer Maps JavaScript-Instanz als JSON-Objekt anzuwenden, ist es an der Zeit, ihm einen Stil als Choroplethenkarte zu verleihen.
In diesem Beispiel gestalten Sie die Karte basierend auf der Anzahl der Taxis pro Postleitzahl. So erhalten die Nutzer eine Vorstellung von der Anzahl der Taxifahrten und der Verfügbarkeit in ihrem Gebiet. Der Stil variiert je nach Wert für die Anzahl der Taxis. Die Gebiete mit den wenigsten Taxis werden lila gestaltet und der Farbverlauf bewegt sich durch Rot und Orange und endet bei den Vierteln mit der höchsten Dichte bei NYC Taxi Gelb. Bei diesem Farbschema wenden Sie diese Farbwerte auf "fillColor" und "StrichColor" an. Wenn Sie „fillOpacity“ auf „0.5“ festlegen, können Nutzer die zugrunde liegende Karte sehen. Wenn Sie „strokeOpacity“ auf „1.0“ setzen, können Nutzer zwischen den Grenzen von gleichfarbigen Polygonen 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-Begrenzungen können Sie anhand Ihrer Daten Karten für verschiedene Arten von Implementierungen in verschiedenen Branchen und Segmenten gestalten. Durch die Verbindung mit Echtzeitdaten können Sie kommunizieren, was passiert, wo es passiert und wie es passiert. Mit dieser Funktion können Sie den Wert Ihrer Echtzeitdaten erschließen und Ihren Nutzern helfen, diese in Echtzeit und in der realen Welt besser zu verstehen.
Nächste Aktionen
- Sehen Sie sich das Webinar Mit datengestützten Stilen zur Gestaltung von Google-Kartengrenzen an.
- Mit Klickereignissen für datengestützte Stile können Sie die Visualisierung noch optimieren.
- Sie können Ihrer Karte erweiterte Markierungen hinzufügen.
Beitragende
Hauptautor:
Jim Leflar | Google Maps Platform Solutions Engineer