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

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

أعداد سيارات الأجرة في مدينة نيويورك حسب الرمز البريدي
أعداد سيارات الأجرة المتحركة في مدينة نيويورك حسب حدود الرمز البريدي (محاكاة، مرور الوقت بشكل مكثّف):

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

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

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

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

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

المحاولة الآن: يُرجى الانتقال إلى وحدة تحكّم Google Cloud وتفعيل واجهة برمجة التطبيقات JavaScript API لتطبيق "خرائط Google".

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

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

البنية
في ما يلي مخطّط بياني لبنية التطبيق يوضّح المنهج المُتّبع:

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

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

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

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

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

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"