In diesem Dokument wird beschrieben, warum und wie dynamische datengestützte Stile von Google-Grenzen mithilfe der Maps JavaScript API implementiert werden. Diese API ist für eine Vielzahl von Anwendungsfällen in verschiedenen Branchen und Segmenten nützlich.
<ph type="x-smartling-placeholder">Animierte Taxis in New York City nach Postleitzahlengrenze (simuliert, im Zeitraffer):
Datengestützte Stile sind eine Funktion der Google Maps Platform, mit der Sie die administrativen Begrenzungspolygone von Google nutzen, Stile auf diese Polygone zur Anzeige auf Ihren Karten anwenden und Ihre eigenen Daten kombinieren können, um umfassende, 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 erörtert, die erklären, 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 der Daten zu sehen ist. Außerdem können Sie 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.
Im Folgenden finden Sie einige Beispiele für Anwendungsfälle, die auf eine Karte angewendet werden können, die dynamische Datenaktualisierungen für datengestützte Stile enthält:
- Mitfahrdienste:Mithilfe von Echtzeitaktualisierungen können Gebiete mit hoher Nachfrage identifiziert werden. In diesem Fall können bei einigen Anbietern höhere Preise gelten.
- Verkehr:Mithilfe von Echtzeitaktualisierungen können Sie Staus identifizieren und so die besten alternativen Routen ermitteln.
- Wahlen:Am Wahlabend können Umfragedaten in Echtzeit verwendet werden, um die Ergebnisse in Echtzeit darzustellen.
- Sicherheit der Beschäftigten:Echtzeit-Updates können verwendet werden, um Ereignisse in Echtzeit zu verfolgen, Risikobereiche zu identifizieren und die Einsatzkräfte vor Ort über die Situation zu informieren.
- Wetter:Echtzeitaktualisierungen können verwendet werden, um die Bewegungen von Stürmen zu verfolgen, aktuelle Gefahren zu identifizieren sowie Warnungen und Warnungen zu senden.
- 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 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 zu visualisieren. So erhalten sie nahezu sofort Informationen und können fundiertere Entscheidungen treffen.
<ph type="x-smartling-placeholder">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 gezeigt, ist der Anwendungsfall die Anzahl der New Yorker Taxis, dargestellt nach Postleitzahl. So wissen Nutzer, wie einfach es ist, ein Taxi anzuhalten.
<ph type="x-smartling-placeholder">Hier ist ein Diagramm der Anwendungsarchitektur für diesen Ansatz:
Die dynamische datengestützte Stillösung
Sehen wir uns nun die Schritte zum Implementieren einer Choroplethenkarte mit dynamischen datengestützten Stilen für Ihr Dataset an.
Mit dieser Lösung können Sie ein hypothetisches Dataset zur Taxidichte in Echtzeit in New York City nach Postleitzahl visualisieren. Dabei handelt es sich zwar nicht um reale Daten, aber es gibt reale Anwendungen. So bekommen Sie einen Eindruck davon, wie sich dynamische Daten mit datengestützten Stilen auf der Karte darstellen lassen.
Schritt 1: Daten auswählen, die visualisiert und mit einer Orts-ID der Begrenzung verknüpft werden sollen
Der erste Schritt besteht darin, die anzuzeigenden Daten zu identifizieren und sicherzustellen, dass sie den Grenzen von Google zugeordnet werden können. Sie können diesen Abgleich clientseitig durchführen, indem Sie für jeden postalCode die Callback-Methode findPlaceFromQuery aufrufen. Beachten Sie, dass Postleitzahlen in den USA unterschiedliche Namen haben, dies auf anderen Verwaltungsebenen nicht der Fall ist. Achten Sie darauf, die richtige Orts-ID für Ihre Abfrage auszuwählen, falls 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 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 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 sicherstellen, dass die Daten aktuell sind. Eine Möglichkeit dazu besteht darin, die obige Abfrage mithilfe eines Web Workers aufzurufen und einen Timer zum Aktualisieren der Daten mit der Funktion setInterval einzustellen. Sie können das Intervall auf einen geeigneten Wert festlegen, z. B. indem die Karte alle 15 Sekunden aktualisiert wird. 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 zum Erstellen eines visuellen Stils und zum Anwenden eines visuellen Stils auf die Postleitzahlengrenzen in Ihrer Maps JavaScript-Instanz als JSON-Objekt benötigen. Als Nächstes können Sie ihm einen Stil als Choroplethenkarte geben.
In diesem Beispiel gestalten Sie die Karte basierend auf der Anzahl der Taxis in jeder Postleitzahl, um Ihren Nutzern einen Eindruck von der Dichte und Verfügbarkeit der Taxis in ihrem Gebiet zu vermitteln. Der Stil variiert je nach Anzahl der Taxianzahl. Die Bereiche mit den wenigsten Taxis werden lila gestaltet. Der Farbverlauf geht durch Rot und Orange und endet in NYC Taxigelb für die Gebiete mit der höchsten Dichte. Bei diesem Farbschema wenden Sie diese Farbwerte auf fillColor und strokeColor an. Wenn Sie für „fillOpacity“ den Wert 0.5 festlegen, sehen die Nutzer die zugrunde liegende Karte. Wenn Sie für „strokeOpacity“ auf „1.0“ setzen, können Nutzer 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 verschiedene 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. Diese Funktion bietet das Potenzial, den Wert Ihrer Echtzeitdaten zu erschließen und Ihren Nutzern zu helfen, diese in Echtzeit und in der realen Welt besser zu verstehen.
Nächste Aktionen
- Sehen Sie sich das Webinar Datengestützte Stile zum Gestalten von Google-Kartengrenzen verwenden an.
- Optimieren Sie Ihre Visualisierung mit Klickereignissen für datengestützte Stile.
- Sie können Ihrer Karte auch erweiterte Markierungen hinzufügen.
Beitragende
Hauptautor:
Jim Leflar | Google Maps Platform Solutions Engineer