דף זה תורגם על ידי Cloud Translation API.

תצוגה חזותית של נתונים: מיפוי רעידות אדמה

סקירה כללית

במדריך הזה מוסבר איך להציג נתונים במפות Google. לדוגמה, במפות שבמדריך הזה מוצגים נתונים על המיקום של רעידות אדמה והעוצמה שלהן. תוכלו ללמוד טכניקות לשימוש במקור הנתונים שלכם וליצור סיפורים מעניינים במפות Google, כמו אלה שבהמשך.

ב-2 המסגרות הראשונות שמוצגות למעלה (מימין לשמאל) מופיעות מפות עם סמנים בסיסיים ועם עיגולים בגדלים שונים. בפריים האחרון מוצגת מפת חום.

ייבוא של הנתונים שלך

במדריך הזה נעשה שימוש בנתונים בזמן אמת על רעידות אדמה מהסקר הגאולוגי של ארצות הברית (USGS). הנתונים של USGS זמינים באתר שלהם בכמה פורמטים, ואפשר להעתיק אותם לדומיין שלכם כדי שהאפליקציה תוכל לגשת אליהם באופן מקומי. במדריך הזה נשלחת בקשת JSONP ישירות מהשרתים של USGS על ידי הוספת תג script לראש המסמך.

// 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);

הוספת סמנים בסיסיים

עכשיו, אחרי שמשכתם נתונים על מיקום רעידות האדמה מפיד USGS לאפליקציה, אתם יכולים להציג אותם במפה. בקטע הזה מוסבר איך ליצור מפה שמתבססת על נתונים מיובאים כדי להציב סמן בסיסי במוקד של כל רעידת אדמה.

בקטע הבא מוצג הקוד המלא שדרוש ליצירת המפה במדריך הזה.

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;index.ts

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;index.js

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;
}
style.css

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>index.html

לניסיון

JSFiddle.net Google Cloud Shell

שימוש בצורות ובמפות חום כדי להתאים אישית מפות

בקטע הזה נסביר על דרכים נוספות להתאמה אישית של מערכי נתונים עשירים במפה. נניח שיצרתם את המפה שמופיעה בקטע הקודם במדריך הזה, שבה מוצגים סמנים בכל מיקום של רעידת אדמה. אפשר להתאים אישית את הסמנים כדי להמחיש נתונים נוספים, כמו מיקומים שבהם מתרחשות הכי הרבה רעידות אדמה, והעוצמה או העומק שלהן.

ריכזנו כמה אפשרויות להתאמה אישית של הסמן הבסיסי:

שימוש בגודל העיגול:
אפשר לצייר עיגולים (או כל צורה אחרת) בגדלים שפרופורציונליים לעוצמת רעידת האדמה באמצעות סמלים. כך, רעידות אדמה חזקות מיוצגות כעיגולים הגדולים ביותר במפה.
שימוש במפות חום:
שכבת מפת החום בספריית ההדמיה מציעה דרך פשוטה אך יעילה להצגת התפלגות רעידות האדמה. במפות חום משתמשים בצבעים כדי לייצג את צפיפות הנקודות, וכך קל יותר לזהות אזורים עם פעילות גבוהה. במפות חום אפשר להשתמש גם ב-WeightedLocations כדי, לדוגמה, להציג רעידות אדמה גדולות יותר בצורה בולטת יותר במפת החום.

גודל העיגול

במפה שלמטה מוצגים סמנים מותאמים אישית בצורת עיגולים. גודל העיגול גדל ככל שעוצמת רעידת האדמה במיקום הספציפי הזה גדולה יותר.

בקטע שבהמשך מוצג הקוד המלא שדרוש ליצירת מפה עם סמני עיגול מותאמים אישית.

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;index.ts

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;index.js

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;
}
style.css

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>index.html

לניסיון

JSFiddle.net Google Cloud Shell

מפות צפיפות

מפות צפיפות מאפשרות לצופים להבין בקלות את פיזור רעידות האדמה, כפי שדווח על ידי USGS. במקום להציב סמן בכל מוקד רעידת אדמה, במפות חום משתמשים בצבע ובצורה כדי לייצג את התפלגות הנתונים. בדוגמה הזו, הצבע האדום מייצג אזורים עם פעילות גבוהה של רעידות אדמה.

טיפ: אתם יכולים להגדיר צבעים משלכם למפת החום באמצעות המאפיין gradient.

בקטע שבהמשך מוצג הקוד המלא שדרוש ליצירת המפה הזו.

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;index.ts

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;index.js

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;
}
style.css

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>index.html

לניסיון

JSFiddle.net Google Cloud Shell

מידע נוסף

מידע נוסף על הנושאים הבאים:

תצוגה חזותית של נתונים: מיפוי רעידות אדמה קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

סקירה כללית

ייבוא של הנתונים שלך

הוספת סמנים בסיסיים

TypeScript

JavaScript

CSS

HTML

לניסיון

שימוש בצורות ובמפות חום כדי להתאים אישית מפות

גודל העיגול

TypeScript

JavaScript

CSS

HTML

לניסיון

מפות צפיפות

TypeScript

JavaScript

CSS

HTML

לניסיון

מידע נוסף

תצוגה חזותית של נתונים: מיפוי רעידות אדמה