الاطّلاع على بياناتك في الوقت الفعلي باستخدام التصميم المستند إلى البيانات

يوضّح هذا المستند سبب استخدام التنسيق المستنِد إلى البيانات الديناميكي لحدود Google وكيفية تنفيذه باستخدام Maps JavaScript API، وهو مفيد لمجموعة متنوعة من حالات الاستخدام في مختلف المجالات والشرائح.

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

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

في ما يلي بعض أمثلة حالات الاستخدام التي يمكن أن تنطبق على خريطة تعرض تعديلات البيانات الديناميكية في التنسيق المستنِد إلى البيانات:

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

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

النهج المعماري لحلّ المشكلة

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

حلّ التصميم الديناميكي المستنِد إلى البيانات

لنطّلِع الآن على الخطوات اللازمة لتنفيذ خريطة توزيعات بتظليل مساحي ديناميكية مستندة إلى البيانات لمجموعة بياناتك.

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

الخطوة 1: اختيار البيانات المراد عرضها ودمجها مع معرّف مكان حدودي

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

const request = {
    query: postalCode,
    fields: ['place_id'],
};
 
function findPlaceId() {
   placesService.findPlaceFromQuery(request, function (results, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
         console.log(results[0]);
      }
   });
}

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

الخطوة 2: الربط بالبيانات في الوقت الفعلي

هناك مجموعة متنوّعة من الطرق للربط بمصادر البيانات، ويعتمد أفضل أسلوب للتنفيذ على احتياجاتك المحدّدة والبنية الأساسية التقنية. في هذه الحالة، لنفترض أنّ بياناتك متوفّرة في جدول BigQuery يتضمّن عمودَين: "رقم_الرمز_البريدي" و"عدد_سيارات_التاكسي"، وسيتمّ طلب البحث عنها من خلال وظيفة Firebase Cloud.

async function queryNycTaxis() {
   // Queries the NYC Taxis dataset.

   // Create a client
   const bigqueryClient = new BigQuery();
  
   // The SQL query to run
   const sqlQuery = 'SELECT zip_code, taxi_count
      FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
      
   const options = {
      query: sqlQuery,
      // Location must match that of the dataset(s)
      // referenced in the query.
      location: 'US',
   };
  
   // Run the query
   const [rows] = await bigqueryClient.query(options);
  
   rows.forEach(row => {
      const postalCode = row['zip_code'];
      const taxiCount = row['taxi_count'];
   });
}

بعد ذلك، عليك التأكّد من إبقاء البيانات محدّثة. إحدى الطرق لإجراء ذلك هي استدعاء طلب البحث أعلاه باستخدام Web Worker، وضبط موقّت لإعادة تحميل بياناتك باستخدام الدالة setInterval. يمكنك ضبط الفاصل الزمني على قيمة مناسبة، مثل إعادة تحميل الخريطة كل 15 ثانية. في كل مرة ينتهي فيها الفاصل الزمني، سيطلب عامل الويب قيم عدد سيارات الأجرة المعدَّلة لكل رمز بريدي.

الآن بعد أن أصبح بإمكاننا الاستعلام عن البيانات وتعديلها، لنحرص على أن يعكس شكل مضلّعات الخريطة هذه التغييرات.

الخطوة 3: تصميم خريطتك باستخدام أسلوب مستند إلى البيانات

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

في هذا المثال، ستصمّم الخريطة استنادًا إلى عدد سيارات الأجرة في كل رمز بريدي، ما يمنح المستخدمين فكرة عن كثافة سيارات الأجرة ومدى توفّرها في منطقتهم. سيختلف النمط حسب قيم عدد سيارات الأجرة. سيتم تطبيق تصميم بنفسجي على المناطق التي تضم أقل عدد من سيارات الأجرة، وسينتقل التدرّج اللوني من الأحمر إلى البرتقالي وينتهي باللون الأصفر لسيارات الأجرة في مدينة نيويورك في المناطق التي تضم أعلى كثافة. في نظام الألوان هذا، عليك تطبيق قيم الألوان هذه على fillColor وstrokeColor. يؤدي ضبط fillOpacity على 0.5 إلى السماح للمستخدمين برؤية الخريطة الأساسية، كما يؤدي ضبط strokeOpacity على 1.0 إلى السماح لهم بالتمييز بين حدود المضلّعات ذات اللون نفسه:

const featureLayer = map.getFeatureLayer(
   google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
   const placeFeature = featureStyleFunctionOptions.feature;
   // taxiCount per (postal_code) PlaceID 
   const taxiCount = zips[placeFeature.placeId];
   let fillColor;
   let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
   fillColor = "#571845";  
   strokeColor = "#571845"; 
} else if (taxiCount < 13) {
   fillColor = "#900c3e";
   strokeColor = "#900c3e";
} else if (taxiCount < 21) {
   fillColor = "#c60039"; 
   strokeColor = "#c60039"; 
} else if (taxiCount < 34) {
   fillColor = "#fe5733";
   strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) { 
   fillColor = "#fec30f";
   strokeColor = "#fec30f";
}  
return {
   fillColor,
   strokeColor,
   fillOpacity: 0.5,
   strokeOpacity: 1.0,
};
 

الخاتمة

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

الإجراءات التالية

• شاهِد البرنامج التعليمي على الويب كيفية استخدام التنسيق المستنِد إلى البيانات لتنسيق حدود "خرائط Google".
• يمكنك تحسين العروض المرئية باستخدام أحداث النقرات لتطبيق أسلوب مستند إلى البيانات.
• ننصحك بإضافة العلامات المتقدّمة إلى خريطتك.

المساهمون

المؤلف الرئيسي:

جيم ليفلار | مهندس حلول في "منصة خرائط Google"