مؤثرات عرض البيانات: رسم الزلازل

نظرة عامة

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

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

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

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

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

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

ملاحظة: يتم تجميع JavaScript من مقتطف TypeScript.

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

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

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

ملاحظة: يتم تجميع JavaScript من مقتطف TypeScript.

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

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

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

ملاحظة: يتم تجميع JavaScript من مقتطف TypeScript.

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

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

يمكنك الاطّلاع على مزيد من المعلومات حول المواضيع التالية:

• العلامات الأساسية:
• استخدام الأشكال لتخصيص الخرائط
• طبقات خريطة التمثيل اللوني