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

يوضّح هذا المستند أسباب وكيفية تنفيذ التصميم الديناميكي المستند إلى البيانات للحدود الإدارية في 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 يتضمّن عمودَين: "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'];
   });
}

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

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

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

بعد الحصول على قيم البيانات الديناميكية اللازمة لإنشاء نمط مرئي وتطبيقه على حدود الرموز البريدية في مثيل Maps JavaScript كعنصر 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"