تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

تمثيل البيانات بصريًا: رصد الزلازل

نظرة عامة

يوضّح لك هذا البرنامج التعليمي كيفية عرض البيانات بشكل مرئي على "خرائط Google". على سبيل المثال، تعرض الخرائط في هذا البرنامج التعليمي بيانات مرئية حول الموقع الجغرافي للزلازل وقوتها. تعرَّف على التقنيات التي يمكنك استخدامها مع مصدر البيانات الخاص بك، وأنشئ قصصًا رائعة على "خرائط Google"، مثل القصص أدناه.

تعرض اللقطتان الأوليان أعلاه (من اليمين إلى اليسار) خرائط تحتوي على علامات أساسية ودوائر بحجم محدّد. يعرض الإطار الأخير خريطة تمثيل لوني.

استيراد بياناتك

يستخدم هذا البرنامج التعليمي بيانات الزلازل في الوقت الفعلي من هيئة المساحة الجيولوجية الأمريكية (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

خرائط التمثيل اللوني

تسهّل خرائط التمثيل اللوني على المستخدمين فهم توزيع الزلازل التي رصدتها هيئة المسح الجيولوجي الأمريكية. بدلاً من وضع علامة على كل مركز زلزال، تستخدم خرائط التمثيل اللوني اللون والشكل لتمثيل توزيع البيانات. في هذا المثال، يمثّل اللون الأحمر المناطق التي تشهد نشاطًا زلزاليًا كبيرًا.

يعرض القسم أدناه الرمز الكامل الذي تحتاج إليه لإنشاء هذه الخريطة.

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

تجربة عيّنة

مزيد من المعلومات

تمثيل البيانات بصريًا: رصد الزلازل