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

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

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

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

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

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 وStrColorColor. يؤدي تعيين fillOpacity على 0.5 إلى السماح للمستخدمين بمشاهدة الخريطة الأساسية، كما أن تعيين نسبة تشوّه خط اليد على 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"