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

نظرة عامة

يوضح لك هذا البرنامج التعليمي كيفية تمثيل البيانات مرئيًا على خرائط 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);

وضع العلامات الأساسية

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

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

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

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

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

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