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

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

عدد سيارات الأجرة في نيويورك حسب الرمز البريدي
عدد سيارات الأجرة المتحركة في مدينة نيويورك حسب حدود الرمز البريدي (في وضع المحاكاة والتسريع الزمني):
عدد سيارات الأجرة في نيويورك حسب الرمز البريدي (الفاصل الزمني) التسمية التوضيحية للخريطة

التصميم المستند إلى البيانات هو إمكانية "منصة خرائط 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]);
      }
   });
}

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

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

هناك طرق متنوعة للربط بمصادر البيانات، وسيعتمد التنفيذ الأفضل على احتياجاتك الخاصة وبنيتك الأساسية الفنية. في هذه الحالة، لنفترض أنّ بياناتك تتوفّر في جدول BigQuery يحتوي على عمودَين: "zip_code" و"taxi_count"، وستجري الاستعلام عنه من خلال دالة 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'];
   });
}

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

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

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

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

في هذا المثال، ستقوم بتصميم الخريطة بناءً على عدد سيارات الأجرة في كل رمز بريدي، مما يمنح المستخدمين فكرة عن كثافة سيارات الأجرة وتوافرها في منطقتهم. سيختلف النمط اعتمادًا على قيم عدد سيارات الأجرة. سيتم تطبيق تصميم أرجواني للمناطق التي بها أقل سيارات أجرة، وسيتحرك تدرج اللون من خلال الأحمر والبرتقالي وينتهي في سيارة أجرة نيويورك باللون الأصفر للمناطق الأعلى كثافة. بالنسبة لنظام الألوان هذا، ستطبق قيم الألوان هذه على fillColor و السريانColor. يتيح ضبط fillOpacity على 0.5 للمستخدمين مشاهدة الخريطة الأساسية، وضبط خوارزمية StrikeOpacity على 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