عرض البيانات بصريًا باستخدام منصة خرائط Google ومنصة سطح المكتب.

عرض البيانات بصريًا باستخدام منصة خرائط Google ومنصة سطح المكتب.

لمحة عن هذا الدرس التطبيقي حول الترميز

subjectتاريخ التعديل الأخير: مايو 11, 2022
account_circleتأليف موظف Google

1. قبل البدء

يعلّمك هذا الدرس التطبيقي حول كيفية إنشاء تمثيل بصري للبيانات الجغرافية المكانية كبيرة الحجم باستخدام واجهة برمجة تطبيقات JavaScript لـ "خرائط Google" ومنصة Chromebase.gl، وهو إطار عمل مفتوح المصدر وتم تسريع WebGL في تمثيل البيانات.

d01802e265548be1.png

المتطلّبات الأساسية

الإجراءات التي ستنفذّها

  • دمج "منصة خرائط Google" مع Chromebase.gl.
  • يمكنك استيراد مجموعة بيانات إلى خريطة من BigQuery.
  • حدّد نقاط البيانات على الخريطة.

الأشياء التي تحتاج إليها

  • حساب Google
  • محرِّر نصوص أو IDE من اختيارك
  • معرفة أساسية بلغة JavaScript وHTML وCSS

2. إعداد البيئة

بدء استخدام "منصة خرائط Google"

اتبع الخطوات التالية إذا لم يسبق لك استخدام "منصة خرائط Google":

  1. أنشئ حساب فوترة.
  2. أنشئ مشروعًا.
  3. تفعيل واجهات برمجة التطبيقات وحزم تطوير البرامج (SDK) في "منصة خرائط Google"
  4. أنشئ مفتاح واجهة برمجة تطبيقات.

تنزيل Node.js

وإذا لم يتوفّر لديك ذلك، يمكنك الانتقال إلى https://nodejs.org/، وتنزيل وقت تشغيل Node.js وتثبيته على جهاز الكمبيوتر.

تتضمن Node.js npm، وهو مدير حزمة يلزمك تثبيت التبعيات لهذا الدرس التطبيقي حول الترميز.

إعداد مشروع إجراء التفعيل

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

للبدء، اتّبِع الخطوات التالية:

  1. إنشاء نسخة طبق الأصل من هذا المستودع أو تنزيلها.
  2. من سطر الأوامر، انتقِل إلى الدليل /starter الذي يحتوي على بنية الملف الأساسية التي تحتاجها لإكمال هذا الدرس التطبيقي حول الترميز.
  3. تثبيت تبعيات من npm من خلال تشغيل الأمر التالي:
npm install
  1. شغِّل مشروع المبتدئين في متصفحك باستخدام Webpack Dev Server من خلال تشغيل الأمر التالي:
npm start

    The starter app opens in your browser and displays a map.
  1. افتح المشروع في IDE وانتقِل إلى دليل /starter/src.
  2. افتح ملف app.js.

ستتمكّن من تنفيذ جميع ترميزك في هذا القسم من الرمز في الملف:

const googleMapsAPIKey = 'YOUR API KEY';
loadJSAPI();
function runApp() {
  // Your code goes here
}

لن تفعل أي شيء مع باقي الرمز في الملف، والذي يحمّل واجهة برمجة تطبيقات JavaScript للخرائط والخريطة:

/* API and map loader helpers */
function loadJSAPI() {
  const googleMapsAPIURI = `https://maps.googleapis.com/maps/api/js?key=${googleMapsAPIKey}&callback=runApp`;
  const script = document.createElement('script');

  script.src = googleMapsAPIURI;
  script.defer = true;
  script.async = true;

  window.runApp = runApp;
  document.head.appendChild(script);
}

function initMap() {
  const mapOptions = {
    center: { lat: 40.75097, lng: -73.98765 },
    zoom: 14,
    styles: mapStyle
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}
  1. يمكنك استبدال YOUR API KEY بمفتاح واجهة برمجة التطبيقات الفعلي الذي أنشأته عند إعداد بيئتك:
const googleMapsAPIKey = 'YOUR API KEY';

3. تصدير البيانات من BigQuery

توفر أداة BigQuery العديد من مجموعات البيانات العامة التي يمكنك استخدامها لتحليل البيانات أو أغراض تجريبية.

استخدم BigQuery لتصدير مجموعة بيانات متاحة للجميع تتضمن بيانات الموقع لمدينة نيويورك "سيتي بايك"، وهي برنامج لمشاركة الدراجات يضم 14500 درّاجة و900 موقع، باتباع الخطوات التالية:

  1. انتقِل إلى Cloud Console.
  2. انقر على قائمة التنقّل 41e8e87b85b0f93.png > BigQuery.
  3. في محرِّر طلب البحث، أدخِل طلب البحث التالي وانقر على تشغيل:
SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`
  1. بعد اكتمال طلب البحث، انقر على حفظ النتائج، ثم اختَر JSON (local file) لتصدير مجموعة النتائج. يمكنك تسمية الملف stations.json وحفظه في الدليل /src.

2f4932829f7e1f78.png

الآن بعد أن حصلت على بياناتك، يمكنك إنشاء التمثيل البصري الأول باستخدام Chromebase.gl.

4. تحديد التمثيل البصري

Chromebase.gl عبارة عن إطار عرض مرئي مفتوح المصدر يستخدم WebGL لإنتاج عروض ثنائية وثلاثية الأبعاد عالية الدقة لمجموعات البيانات الكبيرة للغاية. وتعالج هذه البيانات مئات الآلاف من نقاط البيانات، وعند تحسينها، يمكنها معالجة الملايين من هذه النقاط.

لإنشاء تمثيل بصري، تحتاج إلى فئتين - GoogleMapsOverlay وإحدى طبقات العرض المرئي.gl's.

للبدء، يمكنك إنشاء مثيل ScatterplotLayer: يعرض نقاط البيانات كدائرة على الخريطة:

  1. يمكنك استيراد class Chromebase.gl's ScatterplotLayer من خلال إضافة ما يلي إلى الجزء العلوي من app.js:
import { ScatterplotLayer } from '@deck.gl/layers';
  1. حدِّد خصائص الطبقة من خلال الاختيار من بين نوعَي الخصائص المتاحة لطبقة سطح المكتب المبعثرة.

وتزوِّد خصائص التعيين بإعداد التمثيل البصري بالمعلومات التي تحتاج إلى عرضها، مثل موضع نقاط البيانات ونطاقها. تتيح لك خصائص Stylerer إمكانية تخصيص نمط التمثيل البصري.

في ما يلي تصنيف للخصائص التي تستخدمها في مقتطف الرمز التالي:

  • يسمح id للعارض بالتعرّف على الطبقات لأسباب مختلفة، مثل عمليات إعادة الطلاء وغيرها من التعديلات على التمثيل البصري. تتطلب جميع طبقات Chromebase.gl رقم تعريف فريدًا تُعيّنه.
  • تحدّد data مصدر البيانات للتمثيل البصري. اضبطها على ‘./stations.json' لاستخدام مجموعة البيانات التي تم تصديرها من BigQuery.
  • يسترد getPosition موضع كل كائن من مصدر البيانات. تجدر الإشارة إلى أن قيمة السمة هي وظيفة. تستخدم package.gl الدالة للتكرار في كل صف في مجموعة البيانات. وتخبر الدالة العارض كيفية الوصول إلى خط العرض وخط الطول لنقطة البيانات في كل صف. في مجموعة البيانات هذه، تكون البيانات في كل صف كائن JSON مع ضبط الموضع في خصائص خط الطول وخط العرض، وبالتالي فإن الدالة التي تقدّمها إلى getPosition هي d => [parseFloat(d.longitude), parseFloat(d.latitude)].
  • تحدّد الخاصية getRadius نطاق كل عنصر بالأمتار. في هذه الحالة، يتم ضبط النطاق الجغرافي على d => parseInt(d.capacity) الذي يضبط حجم نقاط البيانات استنادًا إلى سعة كل محطة.
  • يحدِّد stroked ما إذا كانت نقاط البيانات المعروضة يتوسطها حواف خارجية.
  • تضبط getFillColor لون تعبئة كل نقطة بيانات كرمز لون نموذج أحمر أخضر أزرق.
  • تضبط getLineColor لون خط كل نقطة بيانات كرمز لون نموذج أحمر أخضر أزرق.
  • يضبط radiusMinPixels الحد الأدنى لعرض البكسل لكل نقطة بيانات. أثناء تكبير المستخدمين وتصغيرهم، يغيّر المنصة.gl حجم مقياس نقاط البيانات تلقائيًا للحفاظ على التمثيل البصري مرئيًا بوضوح على الخريطة. يسمح لك هذا الموقع بالتحكم في مدى حدوث هذا الحجم.
  • يضبط radiusMaxPixels الحد الأقصى لعرض البكسل لكل نقطة بيانات.
const layerOptions = {
  id: 'scatter-plot',
  data: './stations.json',
  getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
  getRadius: d => parseInt(d.capacity),
  stroked: true,
  getFillColor: [255, 133, 27],
  getLineColor: [255, 38, 27],    
  radiusMinPixels: 5,
  radiusMaxPixels: 50
};
  1. إنشاء مثيل من class.gl's ScatterplotLayer:
const scatterplotLayer = new ScatterplotLayer(layerOptions);

بعد إكمال هذا القسم، يجب أن يظهر الرمز كما يلي:

import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatterplot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],    
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };

  const scatterplotLayer = new ScatterplotLayer(layerOptions);
}

5. تطبيق التمثيل البصري على الخريطة

يمكنك الآن تطبيق مثيل ScatterplotLayer على الخريطة باستخدام الفئة GoogleMapsOverlay، والتي تستخدم واجهة برمجة تطبيقات JavaScript لـ "خرائط Google"OverlayView لإدخال سياق WebGL على الخريطة.

وبعد الانتهاء من ذلك، يمكنك تمرير أي من طبقات العرض المرئي للمنصة.gl's إلى GoogleMapsOverlay، مما يؤدي إلى عرض الطبقة ومزامنتها مع الخريطة.

لتطبيق ScatterplotLayer على الخريطة، اتبع الخطوات التالية:

  1. استيراد سطح الشبكة.gl's GoogleMapsOverlay:
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
  1. أنشئ مثيلًا للصف GoogleMapsOverlay وانسخه المثيل scatterplotLayer الذي أنشأته سابقًا في السمة layers من العنصر:
const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  1. تطبيق التراكب على الخريطة:
 googleMapsOverlay.setMap(map);

بعد إكمال هذا القسم، يجب أن يظهر الرمز كما يلي:

import { GoogleMapsOverlay } from '@deck.gl/google-maps';
import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatter-plot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],    
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };
  const scatterplotLayer = new ScatterplotLayer(layerOptions);
  const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  googleMapsOverlay.setMap(map);
}

ارجع إلى متصفحك، حيث من المفترض أن ترى تمثيلاً بصريًا رائعًا لجميع محطات Citi Bike في مدينة نيويورك.

d01802e265548be1.png

6. تهانينا

تهانينا. لقد أنشأت تمثيلاً بصريًا ضخم الحجم للبيانات لمدينة "سيتي بايك" في مدينة نيويورك من خلال "منصة خرائط Google" ومنصة سطح المكتب.gl.

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

تتيح لك واجهة برمجة تطبيقات JavaScript لـ "خرائط Google" الوصول إلى جميع الميزات التي تقدّمها منصّة "خرائط Google" للويب. اطّلِع على مزيد من المعلومات عن كيفية استخدام "منصة خرائط Google" على الويب بالاطّلاع على الروابط التالية:

يوفّر منصّة Chromebase.gl العديد من طبقات عرض البيانات التي يمكنك استخدامها لعرض البيانات للمستخدمين. اطّلِع على مزيد من المعلومات عن استخدام Chromebase.gl باستخدام واجهة برمجة تطبيقات JavaScript للخرائط من خلال الاطّلاع على الروابط التالية:

bug_report الإبلاغ عن خطأ