Panoramica
Questo tutorial mostra come visualizzare i dati su Google Maps. Ad esempio, le mappe in questo tutorial visualizzano i dati sulla posizione dei terremoti e sulla loro magnitudo. Impara tecniche da utilizzare con la tua origine dati e crea storie efficaci su Google Maps come quelle riportate di seguito.
I primi due frame mostrati in alto (da sinistra a destra) mostrano mappe con indicatori di base e cerchi dimensioni. L'ultimo frame mostra una mappa termica.
Importa i dati
Questo tutorial utilizza i dati sui terremoti in tempo reale della United States Geological Survey (USGS). Il sito web di USGS fornisce i propri dati in vari formati che puoi copiare nel tuo dominio per l'accesso locale da parte della tua applicazione. Questo tutorial richiede JSONP direttamente dai server USGS aggiungendo un tag script
all'intestazione del documento.
// Create a script tag and set the USGS URL as the source. var script = document.createElement('script'); script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp'; document.getElementsByTagName('head')[0].appendChild(script);
Posiziona indicatori di base
Ora che hai estratto i dati sulla località dei terremoti dal feed USGS nella tua applicazione, puoi visualizzarli sulla mappa. Questa sezione mostra come creare una mappa che utilizzi i dati importati per posizionare un indicatore di base in corrispondenza dell'epicentro di ogni località sismica.
La sezione seguente mostra l'intero codice necessario per creare la mappa in questo tutorial.
TypeScript
let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 2, center: new google.maps.LatLng(2.8, -187.3), mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); } // Loop through the results array and place a marker for each // set of coordinates. const eqfeed_callback = function (results: any) { for (let i = 0; i < results.features.length; i++) { const coords = results.features[i].geometry.coordinates; const latLng = new google.maps.LatLng(coords[1], coords[0]); new google.maps.Marker({ position: latLng, map: map, }); } }; declare global { interface Window { initMap: () => void; eqfeed_callback: (results: any) => void; } } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
JavaScript
let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 2, center: new google.maps.LatLng(2.8, -187.3), mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); } // Loop through the results array and place a marker for each // set of coordinates. const eqfeed_callback = function (results) { for (let i = 0; i < results.features.length; i++) { const coords = results.features[i].geometry.coordinates; const latLng = new google.maps.LatLng(coords[1], coords[0]); new google.maps.Marker({ position: latLng, map: map, }); } }; window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Earthquake Markers</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Prova Sample
Utilizzare forme e mappe termiche per personalizzare le mappe
Questa sezione mostra altri modi per personalizzare set di dati avanzati su una mappa. Considera la mappa creata nella sezione precedente di questo tutorial che mostra gli indicatori per ogni luogo del terremoto. Puoi personalizzare gli indicatori per visualizzare dati aggiuntivi, come i luoghi che hanno il maggior numero di terremoti e la loro magnitudo o profondità.
Di seguito sono riportate alcune opzioni per personalizzare l'indicatore di base:
Utilizzando le dimensioni del cerchio:
Puoi tracciare cerchi (o qualsiasi altra forma) di dimensioni relative alla magnitudo di un terremoto utilizzando i simboli. In questo modo, terremoti di forte impatto sono rappresentati dai cerchi più grandi sulla mappa.Utilizzo delle mappe termiche:
Il livello mappa termica nella libreria di visualizzazione offre un modo semplice ma efficace per mostrare la distribuzione dei terremoti. Le mappe termiche utilizzano i colori per rappresentare la densità dei punti, rendendo più facile individuare le aree ad alta attività. Le mappe termiche possono utilizzare ancheWeightedLocations
in modo che, ad esempio, i terremoti di maggiore entità vengano visualizzati in modo più evidente nella mappa termica.
Dimensioni cerchio
La mappa sottostante mostra indicatori personalizzati mediante cerchi. La dimensione del cerchio aumenta con la magnitudo di un terremoto in quella particolare località.
La sezione di seguito mostra l'intero codice necessario per creare una mappa con indicatori a cerchi personalizzati.
TypeScript
let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 2, center: { lat: -33.865427, lng: 151.196123 }, mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); map.data.setStyle((feature) => { const magnitude = feature.getProperty("mag") as number; return { icon: getCircle(magnitude), }; }); } function getCircle(magnitude: number) { return { path: google.maps.SymbolPath.CIRCLE, fillColor: "red", fillOpacity: 0.2, scale: Math.pow(2, magnitude) / 2, strokeColor: "white", strokeWeight: 0.5, }; } function eqfeed_callback(results: any) { map.data.addGeoJson(results); } declare global { interface Window { initMap: () => void; eqfeed_callback: (results: any) => void; } } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
JavaScript
let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 2, center: { lat: -33.865427, lng: 151.196123 }, mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); map.data.setStyle((feature) => { const magnitude = feature.getProperty("mag"); return { icon: getCircle(magnitude), }; }); } function getCircle(magnitude) { return { path: google.maps.SymbolPath.CIRCLE, fillColor: "red", fillOpacity: 0.2, scale: Math.pow(2, magnitude) / 2, strokeColor: "white", strokeWeight: 0.5, }; } function eqfeed_callback(results) { map.data.addGeoJson(results); } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Earthquake Circles</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Prova Sample
Mappe termiche
Le mappe termiche consentono agli spettatori di comprendere facilmente la distribuzione dei terremoti segnalati da USGS. Anziché posizionare un indicatore in ogni epicentro, le mappe termiche utilizzano colori e forma per rappresentare la distribuzione dei dati. In questo esempio, il rosso rappresenta le aree ad alta attività sismica.
La sezione di seguito mostra l'intero codice necessario per creare questa mappa.
TypeScript
let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 2, center: { lat: -33.865427, lng: 151.196123 }, mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); } function eqfeed_callback(results: any) { const heatmapData: google.maps.LatLng[] = []; for (let i = 0; i < results.features.length; i++) { const coords = results.features[i].geometry.coordinates; const latLng = new google.maps.LatLng(coords[1], coords[0]); heatmapData.push(latLng); } const heatmap = new google.maps.visualization.HeatmapLayer({ data: heatmapData, dissipating: false, map: map, }); } declare global { interface Window { initMap: () => void; eqfeed_callback: (results: any) => void; } } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
JavaScript
let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 2, center: { lat: -33.865427, lng: 151.196123 }, mapTypeId: "terrain", }); // Create a <script> tag and set the USGS URL as the source. const script = document.createElement("script"); // This example uses a local copy of the GeoJSON stored at // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js"; document.getElementsByTagName("head")[0].appendChild(script); } function eqfeed_callback(results) { const heatmapData = []; for (let i = 0; i < results.features.length; i++) { const coords = results.features[i].geometry.coordinates; const latLng = new google.maps.LatLng(coords[1], coords[0]); heatmapData.push(latLng); } const heatmap = new google.maps.visualization.HeatmapLayer({ data: heatmapData, dissipating: false, map: map, }); } window.initMap = initMap; window.eqfeed_callback = eqfeed_callback;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Earthquake Heatmap</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=visualization&v=weekly" defer ></script> </body> </html>
Prova Sample
Ulteriori informazioni
Scopri di più sui seguenti argomenti: