داده های خود را در زمان واقعی با استایل مبتنی بر داده مشاهده کنید

این سند توضیح می‌دهد که چرا و چگونه می‌توان استایل‌های پویا مبتنی بر داده‌های Google Boundaries را با استفاده از Maps JavaScript API پیاده‌سازی کرد، که برای انواع موارد استفاده در صنایع و بخش‌ها مفید است.

استایل مبتنی بر داده یک قابلیت پلتفرم Google Maps است که به شما امکان می‌دهد از چند ضلعی‌های مرزی مدیریتی Google استفاده کنید، برای نمایش در نقشه‌هایتان یک استایل را روی آن چند ضلعی‌ها اعمال کنید و داده‌های خود را برای ایجاد نقشه‌های غنی و سفارشی‌سازی کنید که می‌توانند برای تجزیه و تحلیل بصری استفاده شوند. درک بهتر داده های شما این سند برخی موارد استفاده را مورد بحث قرار می‌دهد که توضیح می‌دهند چرا و چگونه می‌توانید داده‌های خود را با استایل مبتنی بر داده‌ها بر روی نقشه در زمان واقعی با یکپارچه‌سازی فیدهای داده پویا تجسم کنید.

استایل مبتنی بر داده به شما امکان می‌دهد نقشه‌هایی ایجاد کنید که توزیع جغرافیایی داده‌ها را نشان می‌دهند، سبک چند ضلعی را به صورت پویا سفارشی می‌کنند و از طریق رویدادهای کلیک با داده‌های شما تعامل دارند. از این ویژگی ها می توان برای ایجاد نقشه های آموزنده و جذاب برای موارد استفاده و صنایع مختلف استفاده کرد.

در اینجا چند نمونه از موارد استفاده وجود دارد که می‌تواند برای نقشه‌ای که به‌روزرسانی‌های داده‌های پویا را در قالب داده‌محور نشان می‌دهد قابل استفاده باشد:

• اشتراک‌گذاری سواری: به‌روزرسانی‌های بی‌درنگ را می‌توان برای شناسایی مناطق با تقاضای بالا استفاده کرد، در این صورت ممکن است برخی از ارائه‌دهندگان قیمت‌های افزایشی داشته باشند.
• حمل و نقل: به روز رسانی های بلادرنگ را می توان برای شناسایی مناطق شلوغ استفاده کرد که به تعیین بهترین مسیرهای جایگزین کمک می کند.
• انتخابات: در شب انتخابات، از داده‌های نظرسنجی داده‌های بی‌درنگ می‌توان برای تجسم نتایج در زمان وقوع استفاده کرد.
• ایمنی کارگران: به‌روزرسانی‌های بی‌درنگ می‌توانند برای ردیابی رویدادها در زمان واقعی، شناسایی مناطق پرخطر، و ارائه آگاهی موقعیتی برای پاسخ‌دهندگان در میدان مورد استفاده قرار گیرند.
• آب و هوا: به روز رسانی های بلادرنگ را می توان برای ردیابی حرکت طوفان ها، شناسایی خطرات فعلی و ارائه هشدارها و هشدارها استفاده کرد.
• محیط زیست: به روز رسانی های بلادرنگ را می توان برای ردیابی حرکت خاکستر آتشفشانی و سایر آلاینده ها، شناسایی مناطق تخریب محیط زیست و نظارت بر تأثیر فعالیت های انسانی استفاده کرد.

در تمام این موقعیت‌ها، مشتریان می‌توانند ارزش بیشتری را با ترکیب فید داده‌های بی‌درنگ خود با مرزهای Google برای تجسم سریع و آسان داده‌هایشان بر روی نقشه باز کنند و به آنها قدرت فوق‌العاده بینش‌های تقریباً فوری برای تصمیم‌گیری آگاهانه‌تر را به آنها بدهد.

رویکرد معماری به راه حل

اکنون بیایید در ساخت یک نقشه با استفاده از استایل مبتنی بر داده برای تجسم داده های پویا قدم برداریم. همانطور که قبلاً نشان داده شد، مورد استفاده تعداد تاکسی های نیویورک است که با کد پستی تجسم شده است. این می تواند برای کاربران مفید باشد تا درک کنند که گرفتن تاکسی چقدر آسان خواهد بود.

راه حل استایل مبتنی بر داده های پویا

اکنون بیایید مراحل مورد نیاز برای پیاده سازی یک نقشه choropleth یک ظاهر طراحی شده مبتنی بر داده های پویا را برای مجموعه داده شما طی کنیم.

این راه حل شما را قادر می سازد تا یک مجموعه داده فرضی از تراکم تاکسی در زمان واقعی در اطراف شهر نیویورک را با کد پستی تجسم کنید. اگرچه ممکن است این داده‌های دنیای واقعی نباشد، اما کاربردهای دنیای واقعی دارد و به شما حس قدرت و قابلیت‌هایی را می‌دهد که چگونه داده‌های پویا را می‌توان روی نقشه با استایل مبتنی بر داده تجسم کرد.

مرحله 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 با فیلتر مؤلفه‌ها نیز برای حل آن مقادیر lat/lon به مقادیر Place ID برای لایه ویژگی مورد علاقه خود استفاده کنید. در این مثال شما به لایه ویژگی 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: نقشه خود را با یک استایل مبتنی بر داده طراحی کنید

اکنون که مقادیر داده پویا لازم برای ایجاد و اعمال یک سبک بصری در مرزهای کد پستی در نمونه جاوا اسکریپت Maps خود را به عنوان یک شی JSON دارید، زمان آن رسیده است که به آن سبکی به عنوان یک نقشه choropleth بدهید.

در این مثال، نقشه را بر اساس تعداد تاکسی‌های موجود در هر کد پستی استایل می‌دهید و به کاربران خود احساس تراکم تاکسی و در دسترس بودن در منطقه خود را می‌دهید. سبک بسته به مقادیر تعداد تاکسی ها متفاوت خواهد بود. مناطقی که کمترین تاکسی را دارند، یک طرح بنفش اعمال می‌شوند، و شیب رنگ از میان قرمز، نارنجی، و به رنگ زرد تاکسی نیویورک برای بیشترین تراکم مناطق ختم می‌شود. برای این طرح رنگ، این مقادیر رنگ را برای 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، توانایی استفاده از داده‌های خود را برای سبک‌دهی به نقشه‌تان برای پیاده‌سازی‌های مختلف در صنایع و بخش‌ها باز می‌کند. اتصال به داده‌های بی‌درنگ به شما امکان می‌دهد تا با آنچه اتفاق می‌افتد، مکان وقوع آن و زمانی که اتفاق می‌افتد ارتباط برقرار کنید. این قابلیت این پتانسیل را دارد که ارزش داده‌های بلادرنگ شما را باز کند و به کاربران شما کمک کند آن‌ها را در زمان واقعی و در دنیای واقعی بهتر درک کنند.

اقدامات بعدی

• وبینار نحوه استفاده از استایل مبتنی بر داده برای استایل مرزهای نقشه گوگل را تماشا کنید.
• با رویدادهای کلیکی برای یک استایل مبتنی بر داده، تجسم خود را یک قدم جلوتر ببرید.
• اضافه کردن نشانگرهای پیشرفته به نقشه خود را در نظر بگیرید.

مشارکت کنندگان

نویسنده اصلی:

جیم لفلار | مهندس راه حل های پلتفرم نقشه های گوگل