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

يوضّح هذا المستند سبب استخدام التنسيق المستنِد إلى البيانات الديناميكي لحدود 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'];
   });
}

بعد ذلك، عليك التأكّد من إبقاء البيانات محدّثة. تتمثل إحدى طرق تنفيذ ذلك في استدعاء طلب البحث أعلاه باستخدام عامل ويب، وتعيين مؤقّت لتحديث بياناتك باستخدام الدالة 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"