# نمایش دادههای مکانی  > اسکچنوت توسط [نیتیا ناراسیمهان](https://github.com/nitya). برای مشاهده نسخه بزرگتر روی تصویر کلیک کنید. این ویدیو نمای کلی از Azure Maps با IoT را ارائه میدهد، سرویسی که در این درس پوشش داده خواهد شد. [](https://www.youtube.com/watch?v=P5i2GFTtb2s) > 🎥 برای مشاهده ویدیو روی تصویر بالا کلیک کنید ## آزمون پیش از درس [آزمون پیش از درس](https://black-meadow-040d15503.1.azurestaticapps.net/quiz/25) ## مقدمه در درس قبلی یاد گرفتید که چگونه دادههای GPS را از حسگرهای خود دریافت کرده و با استفاده از کد بدون سرور در یک کانتینر ذخیرهسازی در فضای ابری ذخیره کنید. اکنون خواهید آموخت که چگونه این نقاط را روی یک نقشه آژور نمایش دهید. شما یاد خواهید گرفت که چگونه یک نقشه در یک صفحه وب ایجاد کنید، با فرمت داده GeoJSON آشنا شوید و از آن برای نمایش تمام نقاط GPS ذخیرهشده روی نقشه خود استفاده کنید. در این درس موارد زیر را پوشش خواهیم داد: * [بصریسازی داده چیست](../../../../../3-transport/lessons/3-visualize-location-data) * [سرویسهای نقشه](../../../../../3-transport/lessons/3-visualize-location-data) * [ایجاد یک منبع Azure Maps](../../../../../3-transport/lessons/3-visualize-location-data) * [نمایش نقشه در یک صفحه وب](../../../../../3-transport/lessons/3-visualize-location-data) * [فرمت GeoJSON](../../../../../3-transport/lessons/3-visualize-location-data) * [نمایش دادههای GPS روی نقشه با استفاده از GeoJSON](../../../../../3-transport/lessons/3-visualize-location-data) > 💁 این درس شامل مقدار کمی HTML و JavaScript خواهد بود. اگر علاقهمند به یادگیری بیشتر در مورد توسعه وب با استفاده از HTML و JavaScript هستید، به [توسعه وب برای مبتدیان](https://github.com/microsoft/Web-Dev-For-Beginners) مراجعه کنید. ## بصریسازی داده چیست بصریسازی داده، همانطور که از نامش پیداست، به نمایش دادهها به گونهای اشاره دارد که درک آنها برای انسانها آسانتر شود. این معمولاً با نمودارها و گرافها مرتبط است، اما هر روشی برای نمایش تصویری دادهها که به انسانها کمک کند دادهها را بهتر درک کنند و تصمیمگیری کنند، بصریسازی داده محسوب میشود. به عنوان یک مثال ساده - در پروژه مزرعه، شما تنظیمات رطوبت خاک را ثبت کردید. یک جدول از دادههای رطوبت خاک که هر ساعت در تاریخ ۱ ژوئن ۲۰۲۱ ثبت شده است ممکن است به صورت زیر باشد: | تاریخ | خوانش | | ---------------- | ------: | | 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](https://azure.microsoft.com/services/azure-maps/?WT.mc_id=academic-17441-jabenn) آشنا خواهید شد و یاد خواهید گرفت که چگونه دادههای GPS خود را نمایش دهید.  Azure Maps مجموعهای از خدمات جغرافیایی و SDKهایی است که از دادههای نقشهبرداری تازه برای ارائه زمینه جغرافیایی به برنامههای وب و موبایل استفاده میکند. توسعهدهندگان ابزارهایی برای ایجاد نقشههای زیبا و تعاملی دریافت میکنند که میتوانند کارهایی مانند ارائه مسیرهای ترافیکی پیشنهادی، اطلاعات درباره حوادث ترافیکی، ناوبری داخلی، قابلیتهای جستجو، اطلاعات ارتفاع، خدمات آب و هوا و موارد دیگر انجام دهند. ✅ با برخی [نمونههای کد نقشهبرداری](https://docs.microsoft.com/samples/browse?WT.mc_id=academic-17441-jabenn&products=azure-maps) آزمایش کنید. شما میتوانید نقشهها را به صورت بوم خالی، کاشیها، تصاویر ماهوارهای، تصاویر ماهوارهای با جادههای اضافهشده، انواع مختلف نقشههای خاکستری، نقشههایی با سایهروشن برای نشان دادن ارتفاع، نقشههای نمای شب، و نقشههای با کنتراست بالا نمایش دهید. شما میتوانید با ادغام نقشهها با [Azure Event Grid](https://azure.microsoft.com/services/event-grid/?WT.mc_id=academic-17441-jabenn) بهروزرسانیهای لحظهای روی نقشههای خود دریافت کنید. شما میتوانید رفتار و ظاهر نقشههای خود را با فعال کردن کنترلهای مختلف برای واکنش نقشه به رویدادهایی مانند زوم، کشیدن و کلیک کنترل کنید. برای کنترل ظاهر نقشه خود، میتوانید لایههایی اضافه کنید که شامل حبابها، خطوط، چندضلعیها، نقشههای حرارتی و موارد دیگر باشد. سبک نقشهای که پیادهسازی میکنید به انتخاب SDK شما بستگی دارد. شما میتوانید به APIهای Azure Maps از طریق [REST API](https://docs.microsoft.com/javascript/api/azure-maps-rest/?WT.mc_id=academic-17441-jabenn&view=azure-maps-typescript-latest)، [Web SDK](https://docs.microsoft.com/azure/azure-maps/how-to-use-map-control?WT.mc_id=academic-17441-jabenn)، یا اگر در حال ساخت یک برنامه موبایل هستید، [Android SDK](https://docs.microsoft.com/azure/azure-maps/how-to-use-android-map-control-library?WT.mc_id=academic-17441-jabenn&pivots=programming-language-java-android) دسترسی پیدا کنید. در این درس، شما از Web SDK برای رسم نقشه و نمایش مسیر مکان GPS حسگر خود استفاده خواهید کرد. ## ایجاد یک منبع Azure Maps اولین قدم شما ایجاد یک حساب Azure Maps است. ### وظیفه - ایجاد یک منبع Azure Maps 1. دستور زیر را از ترمینال یا Command Prompt اجرا کنید تا یک منبع Azure Maps در گروه منابع `gps-sensor` ایجاد کنید: ```sh az maps account create --name gps-sensor \ --resource-group gps-sensor \ --accept-tos \ --sku S1 ``` این دستور یک منبع Azure Maps به نام `gps-sensor` ایجاد میکند. سطح استفاده `S1` است که یک سطح پرداختی است که شامل مجموعهای از ویژگیها میشود، اما با مقدار سخاوتمندانهای از تماسهای رایگان. > 💁 برای مشاهده هزینه استفاده از Azure Maps، به [صفحه قیمتگذاری Azure Maps](https://azure.microsoft.com/pricing/details/azure-maps/?WT.mc_id=academic-17441-jabenn) مراجعه کنید. 1. شما به یک کلید API برای منبع نقشه نیاز دارید. از دستور زیر برای دریافت این کلید استفاده کنید: ```sh az maps account keys list --name gps-sensor \ --resource-group gps-sensor \ --output table ``` مقدار `PrimaryKey` را کپی کنید. ## نمایش نقشه در یک صفحه وب اکنون میتوانید قدم بعدی را بردارید که نمایش نقشه در یک صفحه وب است. ما فقط از یک فایل `html` برای برنامه کوچک وب شما استفاده خواهیم کرد؛ توجه داشته باشید که در محیط تولید یا تیمی، برنامه وب شما احتمالاً بخشهای بیشتری خواهد داشت! ### وظیفه - نمایش نقشه در یک صفحه وب 1. یک فایل به نام index.html در یک پوشه روی کامپیوتر محلی خود ایجاد کنید. کد HTML را برای نگهداری نقشه اضافه کنید: ```html
``` نقشه در `div` به نام `myMap` بارگذاری خواهد شد. چند سبک اجازه میدهند که نقشه عرض و ارتفاع صفحه را پوشش دهد. > 🎓 یک `div` بخشی از یک صفحه وب است که میتوان آن را نامگذاری و سبکدهی کرد. 1. زیر تگ باز ``، یک فایل سبک خارجی برای کنترل نمایش نقشه و یک اسکریپت خارجی از Web SDK برای مدیریت رفتار آن اضافه کنید: ```html ``` این فایل سبک شامل تنظیمات مربوط به ظاهر نقشه است و فایل اسکریپت شامل کدی برای بارگذاری نقشه است. اضافه کردن این کد مشابه اضافه کردن فایلهای هدر C++ یا وارد کردن ماژولهای Python است. 1. زیر آن اسکریپت، یک بلوک اسکریپت برای راهاندازی نقشه اضافه کنید. ```javascript ``` `