تصوّر البيانات باستخدام Google Maps Platform وdeck.gl

1. قبل البدء

يعلّمك هذا الدرس التطبيقي كيفية إنشاء تصور لبيانات جيوفضائية كبيرة الحجم باستخدام Maps JavaScript API وdeck.gl، وهو إطار عمل مفتوح المصدر لتصور البيانات ومُسرَّع باستخدام WebGL.

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

• Maps JavaScript API
• مقدمة عن "منصة خرائط Google": تجربة عملية حول JavaScript

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

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

المتطلبات

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

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

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

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

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

ملاحظة: توفّر لك الروابط مستندات أو فيديوهات يمكنك اتّباعها لإكمال كل خطوة.

تنزيل Node.js

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

يتضمّن Node.js أداة npm، وهي أداة لإدارة الحِزم تحتاج إلى تثبيت التبعيات الخاصة بهذا الدرس العملي.

إعداد المشروع الأوّلي

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

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

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

npm install

4. شغِّل المشروع التجريبي في المتصفّح باستخدام Webpack Dev Server من خلال تنفيذ الأمر التالي:

npm start

    The starter app opens in your browser and displays a map.

5. افتح المشروع في بيئة التطوير المتكاملة (IDE) وانتقِل إلى الدليل /starter/src.
6. افتح ملف app.js.

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

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

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

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

7. استبدِل YOUR API KEY بمفتاح واجهة برمجة التطبيقات الفعلي الذي أنشأته عند إعداد بيئتك:

const googleMapsAPIKey = 'YOUR API KEY';

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

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

استخدِم BigQuery لتصدير مجموعة بيانات متاحة للجميع تتضمّن بيانات الموقع الجغرافي لبرنامج مشاركة الدراجات Citi Bike في مدينة نيويورك، وهو برنامج يضمّ 14,500 دراجة و900 موقع جغرافي، وذلك باتّباع الخطوات التالية:

1. انتقِل إلى Cloud Console.
2. انقر على قائمة التنقّل > BigQuery.
3. في "محرّر طلب البحث"، أدخِل طلب البحث التالي وانقر على تنفيذ:

SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`

4. بعد اكتمال طلب البحث، انقر على حفظ النتائج، ثم اختَر JSON (ملف محلي) لتصدير مجموعة النتائج. أدخِل اسم الملف stations.json واحفظه في الدليل /src.

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

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

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

لإنشاء تمثيل مرئي، تحتاج إلى فئتَين، GoogleMapsOverlay، وإحدى طبقات التمثيل المرئي العديدة في deck.gl.

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

1. استورِد فئة ScatterplotLayer في deck.gl من خلال إضافة ما يلي إلى أعلى app.js:

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

2. اضبط خصائص الطبقة من خلال الاختيار من بين نوعَي الخصائص المتاحة لطبقة scatterplot في deck.gl.

توفّر خصائص Setter المعلومات التي يحتاجها التمثيل المرئي لعرض البيانات، مثل موضع نقاط البيانات ونصف قطرها. تتيح لك خصائص Styler تخصيص نمط التمثيل البصري.

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

• تسمح السمة id لبرنامج العرض بتحديد الطبقات لأسباب مختلفة، مثل عمليات إعادة الطلاء والتعديلات الأخرى على التمثيل المرئي. تتطلّب جميع طبقات deck.gl معرّفًا فريدًا تحدّده أنت.
• تحدّد data مصدر بيانات التمثيل البصري. اضبطها على ‘./stations.json' لاستخدام مجموعة البيانات التي صدّرتها من BigQuery.
• يستردّ getPosition موضع كل عنصر من مصدر البيانات. لاحظ أنّ قيمة السمة هي دالة. تستخدم مكتبة deck.gl الدالة لتكرار كل صف في مجموعة البيانات. تخبر الدالة أداة العرض كيفية الوصول إلى خط العرض وخط الطول لنقطة البيانات في كل صف. في مجموعة البيانات هذه، تكون البيانات في كل صف عبارة عن عنصر JSON مع ضبط الموضع في سمتي خطوط الطول والعرض، وبالتالي تكون الدالة التي تقدّمها إلى getPosition هي d => [parseFloat(d.longitude), parseFloat(d.latitude)].
• تحدّد getRadius نصف قطر كل عنصر بالأمتار. في هذه الحالة، تم ضبط نصف القطر على d => parseInt(d.capacity)، ما يحدّد حجم نقاط البيانات استنادًا إلى سعة كل محطة.
• تحدّد stroked ما إذا كانت نقاط البيانات المعروضة تتضمّن خطًا على حوافها الخارجية.
• getFillColor يضبط لون التعبئة لكل نقطة بيانات كرمز لون أحمر أخضر أزرق.
• يضبط getLineColor لون حدود كل نقطة بيانات كرمز لون أحمر أخضر أزرق.
• يضبط radiusMinPixels الحد الأدنى لعرض كل نقطة بيانات بالبكسل. عندما يكبّر المستخدمون ويصغّرون الخريطة، يعيد deck.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
};

3. أنشئ مثيلاً لفئة ScatterplotLayer في deck.gl:

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، التي تستخدم واجهة برمجة التطبيقات OverlayView Maps JavaScript API لإدراج سياق WebGL أعلى الخريطة.

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

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

1. استيراد فئة GoogleMapsOverlay في deck.gl:

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

2. أنشئ مثيلاً للفئة GoogleMapsOverlay ومرِّر إليه مثيل scatterplotLayer الذي أنشأته سابقًا في السمة layers الخاصة بأحد العناصر:

const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });

3. تطبيق التراكب على الخريطة:

 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 في مدينة نيويورك.

6. تهانينا

تهانينا! لقد أنشأت عرضًا مرئيًا للبيانات بكمية كبيرة لبيانات Citi Bike في مدينة نيويورك باستخدام "منصة خرائط Google" وdeck.gl.

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

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

• مستندات Maps JavaScript API
• مقدمة عن "منصة خرائط Google": تجربة عملية حول JavaScript

تقدّم مكتبة deck.gl العديد من طبقات تصور البيانات التي يمكنك استخدامها لعرض البيانات للمستخدمين. يمكنك الاطّلاع على مزيد من المعلومات حول استخدام deck.gl مع Maps JavaScript API من خلال الروابط التالية:

• مستندات الوحدة الفرعية GoogleMapsOverlay deck.gl
• مستندات "طبقة الرسم البياني للنقاط المبعثرة"
• العروض التوضيحية لـ "منصة خرائط Google" وdeck.gl والرمز المصدر للعروض التوضيحية