جزوه نقشه های وب با qgis2leaf

هشدار

افزونه qgis2leaf دیگر در حال توسعه فعال نیست. عملکرد این افزونه در یک افزونه جدید به نام qgis2web جمع شده است.

برای نسخه به روز شده این آموزش به آموزش تهیه نقشه وب با QGIS2Web مراجعه کنید.

Leaflet یک کتابخانه جاوا اسکریپت منبع باز محبوب برای ساخت برنامه های نقشه برداری وب است. افزونه qgis2leaf یک راه ساده برای صادر کردن نقشه QGIS شما به یک نقشه وب مبتنی بر جزوه کاربردی ارائه می دهد. این افزونه یک راه مفید برای شروع نقشه برداری وب و ایجاد یک نقشه وب تعاملی از لایه های داده ایستا GIS شما است.

بررسی اجمالی کار

ما یک نقشه وب بروشور از فرودگاه های جهان ایجاد خواهیم کرد.

مهارت های دیگری که یاد خواهید گرفت

  • استفاده از دستور SQL CASE در Field Calculator برای ایجاد مقادیر فیلد جدید بر اساس شرایط مختلف.

  • مکان یابی و استفاده از آیکون های سفارشی SVG در QGIS.

داده ها را دریافت کنید

ما از مجموعه داده «Airports <http://www.naturalearthdata.com/downloads/10m-cultural-vectors/airports/>» از Natural Earth استفاده خواهیم کرد.

«Airports shapefile <http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_airports.zip>» را دانلود کنید.

منبع داده [NATURALEARTH]

روش

  1. پلاگین qgis2leaf` را با رفتن به Plugins ‣ Manage and Install Plugin نصب کنید. توجه داشته باشید که افزونه در حال حاضر با علامت تجربی علامت گذاری شده است، بنابراین باید نمایش افزونه های آزمایشی را در تنظیمات افزونه بررسی کنید. (برای جزئیات بیشتر در مورد نصب افزونه ها در QGIS به استفاده از پلاگین Plugins مراجعه کنید)

../_images/1190.png

  1. پرونده بارگیری شده `` ne_10m_airports.zip` را از حالت فشرده خارج کنید. QGIS را باز کنید و به: MENUSEECTION: "لایه -> اضافه کردن لایه بردار. هنگام استخراج پرونده ها به مکان مرور کنید و `` ne_10m_airports.shp`` را انتخاب کنید. روی OK کلیک کنید.

../_images/2154.png

  1. هنگامی که لایه «ne_10m_airports» بارگیری شد، از ابزار :guilabel:`Identify برای کلیک بر روی هر ویژگی و مشاهده ویژگی ها استفاده کنید. ما یک نقشه فرودگاه ایجاد می کنیم که در آن فرودگاه ها را به 3 دسته طبقه بندی می کنیم. ویژگی «نوع» هنگام طبقه‌بندی ویژگی‌ها مفید خواهد بود.

../_images/397.png

  1. روی لایه "ne_10m_airports" کلیک راست کرده و :guilabel:"Open Attribute Table" را انتخاب کنید.

../_images/461.png

  1. در گفتگوی جدول ویژگی، روی دکمه :guilabel:`Toggle Editing کلیک کنید. هنگامی که لایه در حالت ویرایش قرار گرفت، روی دکمه :guilabel:'Open Field Calculator' کلیک کنید.

../_images/554.png

  1. ما می‌خواهیم یک ویژگی جدید به نام «نوع_کد» ایجاد کنیم که در آن به فرودگاه‌های بزرگ مقدار 3، فرودگاه‌های با اندازه متوسط 2 و بقیه مقدار 1 می‌دهیم. می‌توانیم از دستور CASE استفاده کنیم و یک عدد بنویسیم. عبارتی که به مقدار ویژگی "type" نگاه می کند و بر اساس شرط یک ویژگی "type_code" ایجاد می کند. کادر :guilabel: ایجاد یک فیلد جدید را علامت بزنید و "type_code" را به عنوان :guilabel:"نام فیلد خروجی" وارد کنید. عدد کامل (عدد صحیح) را به عنوان :guilabel:`نوع فیلد خروجی انتخاب کنید. در پنجره :guilabel:`Expression، متن زیر را وارد کنید.

CASE  WHEN "type" LIKE '%major%'  THEN 3
 WHEN "type" LIKE '%mid%' THEN 2
 ELSE 1
END
../_images/652.png

  1. در پنجره :guilabel:'Attribute Table' ستون جدیدی را در انتها خواهید دید. بررسی کنید که عبارت شما درست کار کرده است و برای ذخیره تغییرات روی دکمه :guilabel:`Toggle Editing کلیک کنید.

../_images/751.png

  1. اکنون با استفاده از ویژگی جدید ایجاد شده "type_code" به لایه فرودگاه ها استایل می دهیم. روی لایه "ne_10m_airports" کلیک راست کرده و :guilabel:"Properties" را انتخاب کنید.

../_images/850.png

  1. تب Style را در گفتگوی ویژگی های لایه انتخاب کنید. سبک :guilabel:"Categorized" را از منوی کشویی انتخاب کنید و "type_code" را به عنوان :guilabel:"Column" انتخاب کنید. یک رمپ رنگ دلخواه را انتخاب کنید و روی :guilabel:`Classify کلیک کنید. روی :guilabel:`OK کلیک کنید تا به پنجره اصلی QGIS برگردید.

../_images/950.png

  1. در اینجا یک نقشه فرودگاه با طراحی زیبا را مشاهده خواهید کرد. بیایید این را صادر کنیم تا یک نقشه وب تعاملی ایجاد شود. به Web ‣ qgis2leaf ‣ یک پروژه QGIS را به نقشه وب برگه کاری صادر می کند بروید.

../_images/1057.png

  1. در: GUILABEL: QGIS 2 LEAFLELT ، کلیک کنید: GUILABEL:` LAYERS "را برای دریافت لیست لایه های تازه شده دریافت کنید. گزینه: Guilabel: Full Screen" را انتخاب کنید تا یک نقشه وب تمام صفحه داشته باشید. انتخاب کنید: GUILABEL: `LAYER EXTENT" به عنوان: GUILABEL: "میزان نقشه صادر شده". A: GUILABEL: `OUTPUT PROOCE FOLRETER" را در سیستم خود انتخاب کنید که در آن افزونه پرونده های خروجی را می نویسد. روی :guilabel:`OK کلیک کنید.

../_images/1191.png

  1. پس از اتمام فرآیند صادرات، پوشه خروجی را روی دیسک خود پیدا کنید. فایل "index.html" را در یک مرورگر باز کنید. یک نقشه وب تعاملی را خواهید دید که کپی نقشه QGIS است. می توانید نقشه را بزرگنمایی و حرکت دهید و همچنین بر روی هر ویژگی کلیک کنید تا یک پنجره بازشو با اطلاعات ویژگی دریافت کنید. شما می توانید محتویات این پوشه را در یک وب سرور کپی کنید تا یک نقشه وب کامل داشته باشید.

../_images/1259.png

  1. در: GUILABEL: QGIS 2 LEAFLELT، کلیک کنید: GUILABEL:` LAYERS "را برای دریافت لیست لایه های جدید دریافت کنید. گزینه: Guilabel: "Full Screen" را انتخاب کنید تا یک نقشه تمام صفحه داشته باشید. انتخاب کنید: GULABEL: LAYER EXTENT" به عنوان: GULABEL: "میزان نقشه صادر شده". A: GUILABEL: `OUTPUT PROOCE FOLRETER" را در سیستم خود انتخاب کنید که در آن فایل های اضافی خروجی را می نویسید. ره: گیلابل: `ok کelیک کnیd.

../_images/1357.png

  1. در گفتگوی جدول ویژگی، روی دکمه :guilabel:`Toggle Editing کلیک کنید. هنگامی که لایه در حالت ویرایش قرار گرفت، روی دکمه :guilabel:'Open Field Calculator' کلیک کنید.

../_images/1453.png

  1. کادر :guilabel:"ایجاد یک فیلد جدید" را علامت بزنید و "html_exp" را به عنوان :guilabel:"نام فیلد خروجی" وارد کنید. Text (رشته) را به عنوان :guilabel:`نوع فیلد خروجی انتخاب کنید. از آنجایی که ما یک رشته طولانی HTML ایجاد خواهیم کرد، "200" را به عنوان :guilabel:"عرض فیلد خروجی" انتخاب کنید. عبارت زیر را در ناحیه :guilabel:`Expression وارد کنید. عبارت پیچیده به سادگی یک جدول HTML را تعریف می کند و مقادیر سلول را از ویژگی های "iata_code"، "name" و "type" جایگزین می کند. برای اطمینان از صحت بیان ،: Guilabel: `پیش نمایش خروجی" را بررسی کنید.

concat('<h3>', "iata_code", '</h3><table>', '<tr><td>Airport Name: <b> ',
"name", '</b></td></tr><tr><td>Category: <b> ', "type",
'</b></td></tr></table>')

توجه

فرمت shapefile می تواند حداکثر 254 کاراکتر در یک فیلد داشته باشد. اگر می‌خواهید متن طولانی‌تری در فیلد ذخیره کنید، قالب دیگری را انتخاب کنید.

../_images/1549.png

  1. در پنجره :guilabel:'Attribute Table' ستون جدیدی را در انتها خواهید دید. بررسی کنید که عبارت شما درست کار کرده است و برای ذخیره تغییرات روی دکمه :guilabel:`Toggle Editing کلیک کنید.

../_images/1646.png

  1. اکنون دوباره نقشه را با استفاده از: Menuselection صادر کنید: `وب -> qgis2leaf -> یک پروژه QGIS را به یک دفترچه جزوه کار صادر می کند.

../_images/1743.png

  1. گزینه ها را مانند گذشته انتخاب کنید.

../_images/1840.png

  1. پس از اتمام فرآیند صادرات، به پوشه خروجی بروید. شما یک زیرپوشه با مهر زمانی فعلی خواهید داشت. فایل "index.html" را در داخل آن پیدا کنید و آن را در یک مرورگر باز کنید. روی هر ویژگی کلیک کنید و به پنجره بازشو نگاه کنید. متوجه خواهید شد که بسیار تمیزتر و آموزنده به نظر می رسد.

../_images/1931.png

  1. یکی دیگر از ویژگی های مفید افزونه qgis2leaf امکان تعیین یک نماد سفارشی برای استفاده با نقشه وب است. این کار با تعیین مسیر نماد سفارشی در فیلدی به نام "icon_exp" انجام می شود. ما یک لایه جدید ایجاد می کنیم که فقط شامل فرودگاه های اصلی و سبک با استفاده از نماد SVG سفارشی است. ابزار انتخاب ویژگی ها با استفاده از عبارت را از نوار ابزار پیدا کنید.

../_images/2026.png

  1. عبارت زیر را وارد کنید و :guilabel:'Select' را فشار دهید تا همه فرودگاه های اصلی انتخاب شوند.

"type_code" = 3
../_images/2155.png

  1. روی فرودگاه‌های «ne_10m_airports» کلیک راست کرده و :guilabel: «Save Selection As...» را انتخاب کنید.

../_images/2227.png

  1. در: GUILABEL: SAVE LAYER VECTOR AS ... DIALOG ، پرونده خروجی را به عنوان `` major_airports.shp`` نامگذاری کنید. بررسی کنید: Guilabel: پرونده ذخیره شده را به نقشه اضافه کنید و کلیک کنید: GUILABEL: OK`.

../_images/2324.png

  1. هنگامی که لایه "major_airports" در QGIS بارگیری شد، روی آن کلیک راست کرده و :guilabel:'Open Attribute Table را انتخاب کنید.

../_images/2424.png

  1. در گفتگوی جدول ویژگی، روی دکمه :guilabel:`Toggle Editing کلیک کنید. هنگامی که لایه در حالت ویرایش قرار گرفت، روی دکمه :guilabel:'Open Field Calculator' کلیک کنید.

../_images/2522.png

  1. در گفتگوی :guilabel:'Field Calculator'، "icon_exp" را به عنوان :guilabel:"نام فیلد خروجی" وارد کنید. آن را به نوع Text (string) تبدیل کنید. در ناحیه :guilabel:`Expression، عبارت زیر را وارد کنید.

'airport.svg'
../_images/2620.png

  1. ویرایش های خود را با کلیک بر روی دکمه :guilabel:'Toggle Editing' در :guilabel:'Attribute Table' ذخیره کنید.

../_images/2719.png

  1. پلاگین qgis2leaf را از Web ‣ qgis2leaf ‣ یک پروژه QGIS را به یک نقشه وب برگه کار صادر می کند باز کنید. برای واکشی هر دو لایه از QGIS روی دکمه :guilabel:`Get Layers کلیک کنید. بسیاری از لایه های کاشی از پیش ساخته شده مختلف برای نقشه های پایه وجود دارد. در این نقشه، می‌توانیم چیز دیگری را امتحان کنیم و :guilabel:`Stamen Watercolor را به‌عنوان Basemap بارگذاری کنیم. روی :guilabel:`OK کلیک کنید.

../_images/2818.png

  1. اگر به خاطر داشته باشید ما "airport.svg" را به عنوان نماد فرودگاه ها مشخص کردیم. باید آن نماد را به صورت دستی به فهرست خروجی اضافه کنیم. QGIS با مجموعه بزرگی از آیکون ها همراه است. در ویندوز، این نمادها در C: ‣ OSGEO4W64 ‣ apps ‣ qgis ‣ svg قرار دارند. مسیر ممکن است بسته به پلت فرم و نوع نصب شما متفاوت باشد. آن دایرکتوری را پیدا کنید و نمادی را که دوست دارید انتخاب کنید. برای نقشه خود، می‌توانیم نماد «amenity=airport.svg» را که در زیر دسته «transport» قرار دارد، امتحان کنیم.

../_images/2917.png

  1. این نماد را در پوشه خروجی که هنگام صادرات نقشه مشخص کرده بودید کپی و جایگذاری کنید. نام آن را به «airport.svg» تغییر دهید.

../_images/3016.png

  1. اکنون فایل «index.html» را که در پوشه قرار دارد باز کنید. شما یک نقشه پایه زیبا با نمادهای سفارشی ما برای فرودگاه های اصلی خواهید دید. همچنین به پانل لایه در گوشه سمت راست بالا توجه کنید که دارای کنترل نمایش لایه برای هر دو لایه است.

../_images/3119.png

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

If you want to give feedback or share your experience with this tutorial, please comment below. (requires GitHub account)