IoT-For-Beginners/translations/fa/3-transport/lessons/3-visualize-location-data

نمایش داده‌های مکانی

اسکچ‌نوت توسط نیتیا ناراسیمهان. برای مشاهده نسخه بزرگ‌تر روی تصویر کلیک کنید.

این ویدیو نمای کلی از Azure Maps با IoT را ارائه می‌دهد، سرویسی که در این درس پوشش داده خواهد شد.

🎥 برای مشاهده ویدیو روی تصویر بالا کلیک کنید

آزمون پیش از درس

آزمون پیش از درس

مقدمه

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

در این درس موارد زیر را پوشش خواهیم داد:

• بصری‌سازی داده چیست
• سرویس‌های نقشه
• ایجاد یک منبع Azure Maps
• نمایش نقشه در یک صفحه وب
• فرمت GeoJSON
• نمایش داده‌های GPS روی نقشه با استفاده از GeoJSON

💁 این درس شامل مقدار کمی HTML و JavaScript خواهد بود. اگر علاقه‌مند به یادگیری بیشتر در مورد توسعه وب با استفاده از HTML و JavaScript هستید، به توسعه وب برای مبتدیان مراجعه کنید.

بصری‌سازی داده چیست

بصری‌سازی داده، همانطور که از نامش پیداست، به نمایش داده‌ها به گونه‌ای اشاره دارد که درک آن‌ها برای انسان‌ها آسان‌تر شود. این معمولاً با نمودارها و گراف‌ها مرتبط است، اما هر روشی برای نمایش تصویری داده‌ها که به انسان‌ها کمک کند داده‌ها را بهتر درک کنند و تصمیم‌گیری کنند، بصری‌سازی داده محسوب می‌شود.

به عنوان یک مثال ساده - در پروژه مزرعه، شما تنظیمات رطوبت خاک را ثبت کردید. یک جدول از داده‌های رطوبت خاک که هر ساعت در تاریخ ۱ ژوئن ۲۰۲۱ ثبت شده است ممکن است به صورت زیر باشد:

تاریخ	خوانش
01/06/2021 00:00	257
01/06/2021 01:00	268
01/06/2021 02:00	295
01/06/2021 03:00	305
01/06/2021 04:00	325
01/06/2021 05:00	359
01/06/2021 06:00	398
01/06/2021 07:00	410
01/06/2021 08:00	429
01/06/2021 09:00	451
01/06/2021 10:00	460
01/06/2021 11:00	452
01/06/2021 12:00	420
01/06/2021 13:00	408
01/06/2021 14:00	431
01/06/2021 15:00	462
01/06/2021 16:00	432
01/06/2021 17:00	402
01/06/2021 18:00	387
01/06/2021 19:00	360
01/06/2021 20:00	358
01/06/2021 21:00	354
01/06/2021 22:00	356
01/06/2021 23:00	362

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

این نمودار می‌تواند با اضافه کردن یک خط برای نشان دادن زمانی که سیستم آبیاری خودکار در خوانش رطوبت خاک ۴۵۰ روشن شده است، بهبود یابد:

این نمودار به سرعت نشان می‌دهد که سطح رطوبت خاک چه بوده و نقاطی که سیستم آبیاری روشن شده است.

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

✅ به روش‌هایی که داده‌ها را بصری‌سازی کرده‌اید فکر کنید. کدام روش‌ها واضح‌تر بوده‌اند و به شما اجازه داده‌اند سریع‌تر تصمیم‌گیری کنید؟

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

هنگام کار با داده‌های GPS، واضح‌ترین بصری‌سازی می‌تواند نمایش داده‌ها روی یک نقشه باشد. یک نقشه که کامیون‌های تحویل را نشان می‌دهد، می‌تواند به کارکنان یک کارخانه پردازش کمک کند تا زمان رسیدن کامیون‌ها را ببینند. اگر این نقشه نه تنها تصاویر کامیون‌ها در مکان‌های فعلی‌شان را نشان دهد، بلکه اطلاعاتی درباره محتوای کامیون‌ها ارائه دهد، کارکنان کارخانه می‌توانند بر اساس آن برنامه‌ریزی کنند - اگر یک کامیون یخچالی نزدیک باشد، می‌دانند که باید فضای یخچال را آماده کنند.

سرویس‌های نقشه

کار با نقشه‌ها یک تمرین جالب است و گزینه‌های زیادی برای انتخاب وجود دارد، مانند Bing Maps، Leaflet، Open Street Maps، و Google Maps. در این درس، شما با Azure Maps آشنا خواهید شد و یاد خواهید گرفت که چگونه داده‌های GPS خود را نمایش دهید.

Azure Maps مجموعه‌ای از خدمات جغرافیایی و SDKهایی است که از داده‌های نقشه‌برداری تازه برای ارائه زمینه جغرافیایی به برنامه‌های وب و موبایل استفاده می‌کند. توسعه‌دهندگان ابزارهایی برای ایجاد نقشه‌های زیبا و تعاملی دریافت می‌کنند که می‌توانند کارهایی مانند ارائه مسیرهای ترافیکی پیشنهادی، اطلاعات درباره حوادث ترافیکی، ناوبری داخلی، قابلیت‌های جستجو، اطلاعات ارتفاع، خدمات آب و هوا و موارد دیگر انجام دهند.

✅ با برخی نمونه‌های کد نقشه‌برداری آزمایش کنید.

شما می‌توانید نقشه‌ها را به صورت بوم خالی، کاشی‌ها، تصاویر ماهواره‌ای، تصاویر ماهواره‌ای با جاده‌های اضافه‌شده، انواع مختلف نقشه‌های خاکستری، نقشه‌هایی با سایه‌روشن برای نشان دادن ارتفاع، نقشه‌های نمای شب، و نقشه‌های با کنتراست بالا نمایش دهید. شما می‌توانید با ادغام نقشه‌ها با Azure Event Grid به‌روزرسانی‌های لحظه‌ای روی نقشه‌های خود دریافت کنید. شما می‌توانید رفتار و ظاهر نقشه‌های خود را با فعال کردن کنترل‌های مختلف برای واکنش نقشه به رویدادهایی مانند زوم، کشیدن و کلیک کنترل کنید. برای کنترل ظاهر نقشه خود، می‌توانید لایه‌هایی اضافه کنید که شامل حباب‌ها، خطوط، چندضلعی‌ها، نقشه‌های حرارتی و موارد دیگر باشد. سبک نقشه‌ای که پیاده‌سازی می‌کنید به انتخاب SDK شما بستگی دارد.

شما می‌توانید به APIهای Azure Maps از طریق REST API، Web SDK، یا اگر در حال ساخت یک برنامه موبایل هستید، Android SDK دسترسی پیدا کنید.

در این درس، شما از Web SDK برای رسم نقشه و نمایش مسیر مکان GPS حسگر خود استفاده خواهید کرد.

ایجاد یک منبع Azure Maps

اولین قدم شما ایجاد یک حساب Azure Maps است.

وظیفه - ایجاد یک منبع Azure Maps

1. دستور زیر را از ترمینال یا Command Prompt اجرا کنید تا یک منبع Azure Maps در گروه منابع gps-sensor ایجاد کنید:

   az maps account create --name gps-sensor \
                          --resource-group gps-sensor \
                          --accept-tos \
                          --sku S1
   

   این دستور یک منبع Azure Maps به نام gps-sensor ایجاد می‌کند. سطح استفاده S1 است که یک سطح پرداختی است که شامل مجموعه‌ای از ویژگی‌ها می‌شود، اما با مقدار سخاوتمندانه‌ای از تماس‌های رایگان.

   💁 برای مشاهده هزینه استفاده از Azure Maps، به صفحه قیمت‌گذاری Azure Maps مراجعه کنید.

2. شما به یک کلید API برای منبع نقشه نیاز دارید. از دستور زیر برای دریافت این کلید استفاده کنید:

   az maps account keys list --name gps-sensor \
                             --resource-group gps-sensor \
                             --output table
   

   مقدار PrimaryKey را کپی کنید.

نمایش نقشه در یک صفحه وب

اکنون می‌توانید قدم بعدی را بردارید که نمایش نقشه در یک صفحه وب است. ما فقط از یک فایل html برای برنامه کوچک وب شما استفاده خواهیم کرد؛ توجه داشته باشید که در محیط تولید یا تیمی، برنامه وب شما احتمالاً بخش‌های بیشتری خواهد داشت!

وظیفه - نمایش نقشه در یک صفحه وب

1. یک فایل به نام index.html در یک پوشه روی کامپیوتر محلی خود ایجاد کنید. کد HTML را برای نگهداری نقشه اضافه کنید:

   <html>
   <head>
       <style>
           #myMap {
               width:100%;
               height:100%;
           }
       </style>
   </head>
   
   <body onload="init()">
       <div id="myMap"></div>
   </body>
   </html>
   

   نقشه در div به نام myMap بارگذاری خواهد شد. چند سبک اجازه می‌دهند که نقشه عرض و ارتفاع صفحه را پوشش دهد.

   🎓 یک div بخشی از یک صفحه وب است که می‌توان آن را نام‌گذاری و سبک‌دهی کرد.

2. زیر تگ باز <head>، یک فایل سبک خارجی برای کنترل نمایش نقشه و یک اسکریپت خارجی از Web SDK برای مدیریت رفتار آن اضافه کنید:

   <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
   <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
   

   این فایل سبک شامل تنظیمات مربوط به ظاهر نقشه است و فایل اسکریپت شامل کدی برای بارگذاری نقشه است. اضافه کردن این کد مشابه اضافه کردن فایل‌های هدر C++ یا وارد کردن ماژول‌های Python است.

3. زیر آن اسکریپت، یک بلوک اسکریپت برای راه‌اندازی نقشه اضافه کنید.

   <script type='text/javascript'>
       function init() {
           var map = new atlas.Map('myMap', {
               center: [-122.26473, 47.73444],
               zoom: 12,
               authOptions: {
                   authType: "subscriptionKey",
                   subscriptionKey: "<subscription_key>",
   
               }
           });
       }
   </script>
   

   <subscription_key> را با کلید API حساب Azure Maps خود جایگزین کنید.

   اگر صفحه index.html خود را در یک مرورگر وب باز کنید، باید یک نقشه بارگذاری شده و متمرکز بر منطقه سیاتل را ببینید.

   

   ✅ با پارامترهای زوم و مرکز آزمایش کنید تا نمایش نقشه خود را تغییر دهید. می‌توانید مختصات مختلف مربوط به عرض و طول جغرافیایی داده‌های خود را اضافه کنید تا نقشه را دوباره متمرکز کنید.

💁 یک روش بهتر برای کار با برنامه‌های وب به صورت محلی نصب http-server است. شما به node.js و npm نیاز دارید تا قبل از استفاده از این ابزار نصب شوند. پس از نصب این ابزارها، می‌توانید به محل فایل index.html خود بروید و دستور http-server را تایپ کنید. برنامه وب روی یک وب‌سرور محلی http://127.0.0.1:8080/ باز خواهد شد.

فرمت GeoJSON

اکنون که برنامه وب شما آماده است و نقشه نمایش داده می‌شود، باید داده‌های GPS را از حساب ذخیره‌سازی خود استخراج کرده و آن را در یک لایه از نشانگرها روی نقشه نمایش دهید. قبل از انجام این کار، بیایید به فرمت GeoJSON که توسط Azure Maps مورد نیاز است، نگاه کنیم.

GeoJSON یک استاندارد باز JSON با قالب‌بندی خاص است که برای مدیریت داده‌های جغرافیایی طراحی شده است. شما می‌توانید با آزمایش داده‌های نمونه با استفاده از geojson.io درباره آن یاد بگیرید، که همچنین یک ابزار مفید برای اشکال‌زدایی فایل‌های GeoJSON است.

داده‌های نمونه GeoJSON به این صورت است:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -2.10237979888916,
          57.164918677004714
        ]
      }
    }
  ]
}

آنچه که به خصوص جالب است، نحوه قرارگیری داده‌ها به عنوان یک Feature درون یک FeatureCollection است. درون این شیء می‌توان geometry را با coordinates که عرض و طول جغرافیایی را نشان می‌دهد، پیدا کرد.

✅ هنگام ساخت GeoJSON خود، به ترتیب latitude و longitude در شیء توجه کنید، وگرنه نقاط شما در مکان‌های مورد نظر ظاهر نخواهند شد! GeoJSON انتظار دارد داده‌ها به ترتیب lon,lat برای نقاط باشد، نه lat,lon.

Geometry می‌تواند انواع مختلفی داشته باشد، مانند یک نقطه یا یک چندضلعی. در این مثال، یک نقطه با دو مختصات مشخص شده است، طول جغرافیایی و عرض جغرافیایی. ✅ Azure Maps از GeoJSON استاندارد پشتیبانی می‌کند و همچنین شامل برخی ویژگی‌های پیشرفته مانند قابلیت رسم دایره‌ها و دیگر هندسه‌ها است.

نمایش داده‌های GPS روی نقشه با استفاده از GeoJSON

اکنون آماده هستید تا داده‌هایی را که در درس قبلی ذخیره کرده‌اید، مصرف کنید. به یاد داشته باشید که این داده‌ها به صورت تعدادی فایل در ذخیره‌سازی blob ذخیره شده‌اند، بنابراین باید فایل‌ها را بازیابی و تجزیه کنید تا Azure Maps بتواند از داده‌ها استفاده کند.

وظیفه - تنظیم ذخیره‌سازی برای دسترسی از یک صفحه وب

اگر از ذخیره‌سازی خود برای دریافت داده‌ها درخواست کنید، ممکن است با خطاهایی در کنسول مرورگر خود مواجه شوید. دلیل این امر این است که باید مجوزهای CORS را برای این ذخیره‌سازی تنظیم کنید تا برنامه‌های وب خارجی بتوانند داده‌های آن را بخوانند.

🎓 CORS مخفف "اشتراک منابع بین مبدا" است و معمولاً به دلایل امنیتی باید به صورت صریح در Azure تنظیم شود. این تنظیم مانع از دسترسی سایت‌هایی که انتظار ندارید به داده‌های شما می‌شود.

1. فرمان زیر را اجرا کنید تا CORS فعال شود:

   az storage cors add --methods GET \
                       --origins "*" \
                       --services b \
                       --account-name <storage_name> \
                       --account-key <key1>
   

   <storage_name> را با نام حساب ذخیره‌سازی خود جایگزین کنید. <key1> را با کلید حساب ذخیره‌سازی خود جایگزین کنید.

   این فرمان به هر وب‌سایتی (علامت ستاره * به معنای هر وب‌سایت است) اجازه می‌دهد تا درخواست GET، یعنی دریافت داده، از حساب ذخیره‌سازی شما انجام دهد. --services b به این معناست که این تنظیم فقط برای blob‌ها اعمال شود.

وظیفه - بارگذاری داده‌های GPS از ذخیره‌سازی

1. محتوای کامل تابع init را با کد زیر جایگزین کنید:

   fetch("https://<storage_name>.blob.core.windows.net/gps-data/?restype=container&comp=list")
       .then(response => response.text())
       .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
       .then(xml => {
           let blobList = Array.from(xml.querySelectorAll("Url"));
               blobList.forEach(async blobUrl => {
                   loadJSON(blobUrl.innerHTML)                
       });
   })
   .then( response => {
       map = new atlas.Map('myMap', {
           center: [-122.26473, 47.73444],
           zoom: 14,
           authOptions: {
               authType: "subscriptionKey",
               subscriptionKey: "<subscription_key>",
   
           }
       });
       map.events.add('ready', function () {
           var source = new atlas.source.DataSource();
           map.sources.add(source);
           map.layers.add(new atlas.layer.BubbleLayer(source));
           source.add(features);
       })
   })
   

   <storage_name> را با نام حساب ذخیره‌سازی خود جایگزین کنید. <subscription_key> را با کلید API حساب Azure Maps خود جایگزین کنید.

   چندین اتفاق در اینجا رخ می‌دهد. ابتدا، کد داده‌های GPS شما را از کانتینر blob شما با استفاده از یک URL endpoint که با نام حساب ذخیره‌سازی شما ساخته شده است، بازیابی می‌کند. این URL داده‌ها را از gps-data بازیابی می‌کند، که نشان می‌دهد نوع منبع یک کانتینر است (restype=container) و اطلاعاتی درباره تمام blob‌ها را لیست می‌کند. این لیست خود blob‌ها را باز نمی‌گرداند، بلکه یک URL برای هر blob ارائه می‌دهد که می‌توان از آن برای بارگذاری داده‌های blob استفاده کرد.

   💁 شما می‌توانید این URL را در مرورگر خود قرار دهید تا جزئیات تمام blob‌های موجود در کانتینر خود را مشاهده کنید. هر آیتم دارای یک ویژگی Url خواهد بود که می‌توانید آن را نیز در مرورگر خود بارگذاری کنید تا محتوای blob را مشاهده کنید.

   سپس این کد هر blob را بارگذاری می‌کند و تابعی به نام loadJSON را فراخوانی می‌کند که در مرحله بعد ایجاد خواهد شد. سپس کنترل نقشه ایجاد می‌شود و کدی به رویداد ready اضافه می‌شود. این رویداد زمانی فراخوانی می‌شود که نقشه در صفحه وب نمایش داده شود.

   رویداد ready یک منبع داده Azure Maps ایجاد می‌کند - یک کانتینر که شامل داده‌های GeoJSON است و بعداً پر خواهد شد. این منبع داده سپس برای ایجاد یک لایه حبابی استفاده می‌شود - مجموعه‌ای از دایره‌ها روی نقشه که در هر نقطه از GeoJSON متمرکز شده‌اند.

2. تابع loadJSON را به بلوک اسکریپت خود، زیر تابع init اضافه کنید:

   var map, features;
   
   function loadJSON(file) {
       var xhr = new XMLHttpRequest();
       features = [];
       xhr.onreadystatechange = function () {
           if (xhr.readyState === XMLHttpRequest.DONE) {
               if (xhr.status === 200) {
                   gps = JSON.parse(xhr.responseText)
                   features.push(
                       new atlas.data.Feature(new atlas.data.Point([parseFloat(gps.gps.lon), parseFloat(gps.gps.lat)]))
                   )
               }
           }
       };
       xhr.open("GET", file, true);
       xhr.send();
   }    
   

   این تابع توسط روال fetch فراخوانی می‌شود تا داده‌های JSON را تجزیه کند و آن‌ها را به مختصات طول و عرض جغرافیایی به عنوان geoJSON تبدیل کند. پس از تجزیه، داده‌ها به عنوان بخشی از یک Feature geoJSON تنظیم می‌شوند. نقشه مقداردهی اولیه می‌شود و حباب‌های کوچکی در اطراف مسیر داده‌های شما ظاهر می‌شوند:

3. صفحه HTML را در مرورگر خود بارگذاری کنید. نقشه بارگذاری می‌شود، سپس تمام داده‌های GPS از ذخیره‌سازی بارگذاری شده و روی نقشه نمایش داده می‌شود.

   

💁 شما می‌توانید این کد را در پوشه کد پیدا کنید.

---

🚀 چالش

نمایش داده‌های ثابت روی نقشه به عنوان نشانگرها جالب است. آیا می‌توانید این برنامه وب را بهبود دهید تا انیمیشن اضافه کنید و مسیر نشانگرها را در طول زمان با استفاده از فایل‌های JSON دارای زمان‌بندی نشان دهید؟ در اینجا نمونه‌هایی از استفاده از انیمیشن در نقشه‌ها وجود دارد.

آزمون پس از درس

آزمون پس از درس

مرور و مطالعه شخصی

Azure Maps به‌ویژه برای کار با دستگاه‌های IoT مفید است.

• برخی از کاربردها را در مستندات Azure Maps در Microsoft docs بررسی کنید.
• دانش خود را درباره نقشه‌سازی و نقاط مسیر با ماژول یادگیری خودآموز ایجاد اولین برنامه مسیر‌یابی با Azure Maps در Microsoft Learn عمیق‌تر کنید.

تکلیف

برنامه خود را مستقر کنید

سلب مسئولیت:
این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما برای دقت تلاش می‌کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌هایی باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما هیچ مسئولیتی در قبال سوءتفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.