تهیه نقشه وب با QGIS2Web

هشدار

This tutorial is now obsolete. A new and updated version is available at نقشه برداری وب با QGIS2Web (QGIS3)

نقشهوب یک رسانه عالی برای انتشار داده های GIS در وب و در دسترسی سایر کاربران به آن است. ایجاد یک نقشه وب فرایند بسیار متفاوتی نسبت به ایجاد آن در GIS دارد. کاربران GIS به طور معمول برنامه نویسان وب نیستند و ایجاد یک نقشه وب با کیفیت در GIS ، این یک چالش است. خوشبختانه ، ابزارهایی برای اجرای آ عملیاتر QGIS به نقشه های وب در دسترس است. در این تمرین آموزشی ، شما می آموزید که چگونه از پلاگین ** QGIS2Web ** برای ایجاد یک نقشه وب با استفاده از کتابخانه های OpenLayers یا Leaflet در یک پروژه QGIS استفاده کنید.

نمای کلی تمرین

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

سایر مهارت های دیگری که خواهید آموخت

• نحوه استفاده از ابزارهای ویرایش در QGIS برای پنهان کردن ستون های خاص و تنظیم سفارشی نوع آن.

• نحوه ایجاد یک زمینه مجازی با استفاده از محاسبه گر ستون Field Calculator.

• ایجاد برچسب برایعراضه هایی که فقط در مقیاس خاص ظاهر می شوند.

اخذ داده

We will use the Airports dataset from Natural Earth.

Download the Airports shapefile.

برای راحتی کار ، می توانید مستقیماً یک کپی از مجموعه داده ها را از پیوندهای زیر بارگیری کنید:

ne_10m_airports.zip

Data Source [NATURALEARTH]

مراحل

1. نرم افزار QGIS را باز نموده و بمنوی Layer ‣ Add Vector Layer رفته و به مسیر فایل ne_10m_airports.zip برویید و برا دکمه OK کلیک کنید.

2. اکنون ما نقشه ای در QGIS ایجاد خواهیم کرد که ظاهر آن درست مانند آنچه در نقشه وببوده و همانند آن رفتار میکند. پلاگین"qgis2web" از ابزارتنظیمات QGIS استفاده می کند و به طور خودکار نقشه وب را ایجاد می کند بدون اینکه ما در مورد کد برنامه نویسی تهیه نقشه وب بدانیم. هنگامی که یک کاربر بر روی نشانگر فرودگاه کلیک کند ، می خواهیم یک پنجره اطلاعات برای ارائه اطلاعات مفید در مورد فرودگاه نمایش داده شود.. این اطلاعات قبلاً در جدول توصیفی لایه های ne_10m_airports وجود دارد. بر روی لایه "ne_10m_airports" کلیک راست کرده و گزینه :guilabel:`Properties`را انتخاب کنید.

3. به تب Fields بروید. انواع ستون های موجود در لایه را مشاهده خواهید کرد. برخی از این موارد مربوط به کاربران نقشه وب ما نیستند ، بنابراین می توانیم این موارد را مخفی کنیم. ما قسمت های type، name، iata_code و``wikipedia`` را نگه خواهیم داشت و موارد دیگر را مخفی می کنیم. بر روی دکمه ویرایش متن Text Edit در زیر ویرایش ابزار Edit widget بری ستون "scalerank کلیک کنید.

4. در کادر محاوره ای ویرایش خصوصیات Edit Widget Properties بر نوع "مخفی" انتخاب شود و بر دکمه:guilabel:`OK کلیک نمایید.

5. به همین ترتیب نوع سایر ستون ها بر Hidden تنظیم نمایید. از آنجا که ممکن است اعلان هایی داشته باشید ، انواع زمینه دیگری نیز وجود دارد که به ما امکان می دهد نحوه نمایش فیلدها را برای کاربران نقشه خود تنظیم کنیم. کلیک کنید؛ برای ویرایش ستون ``wikipedia``بر Edit Widget  کلیک نمایید.

6. "Web View" را به عنوان نوع فیلد انتخاب کنید. این نوع نشان می دهد که مقدار موجود در این قسمت یک آدرس وب URL است.

7. همچنین می توانیم از ستون Alias ​​استفاده کنیم تا یک نام مستعار برای فیلدها نشان انتخاب شود بدون اینکه واقعاً جدول داده های پایه تغییر کند. این برای تعیین نام کاربر پسند بیشتر به کاربران نقشه ما مفید است. بر اساس انتخاب های خود ، نام های مستعار اضافه کرده و روی :guilabel:`Ok`کلیک کنید.

8. دوباره به پنجره اصلی QGIS بروید ، ابزار Identify Results را انتخاب کنید و روی هر نقطه کلیک کنید. پانل Identify Results صفات را با نام های مستعار تازه اضافه شده نمایش می دهد. مشاهده خواهید کرد که قسمتهای پنهان در نتایج نشان داده نمی شوند.

9. While this method is useful, there is one limitation. We are not able to change the order of the fields. One way to overcome this limitation is to create a Virtual Field. In our case, if we wanted the type field to appear at the end of the info window, we can simply add a new virtual field the end and hide the original type field. While we are at it - we can also use an expression to better format the type values. Right-click the ne_10m_airports layer and choose Properties. Go to the Fields tab and click Field Calculator.

10. از آنجا که نام فیلدها باید منحصر به فرد باید باشد ، از عبارت "Type" به عنوان نام فیلد جدید استفاده کنید. نوع فیلد را متنی``Text (String)`` با اندازه طول "25" حرف تنظیم کنید. قسمت "type" شامل مقادیری مانند "small, mid, ``large``و غیره است. می توانیم عبارتی را برای تغییر حالت کلمات به جمله جمله اضافه کنیم و برای خوانایی بهتر کلمه*airport*ا ضمیمه کنیم. عبارت زیر را در کادر:guilabel:`Expression`وارد کنید و روی: روی guilabel:`OK`کلیک کنید.

concat( title("type"), ' Airport')

11. اکنون که ستون"Type" با ظاهر بسیار بهتر خواهیم داشت ، حال ستون قبلی رل پنهان نمایید. می توانید در بخش ویرایش : guilabel: "Edit Widget" برای ستون "type" حالت مخفی"Hidden" تنظیم کنید.

12. از ابزار شناسایی Identify برای تایید نمایش خصوصیات ستون مورد انتظار استفاده شود.

13. Now let's style our layer to be more visually appealing and informative. Right-click the ne_10m_airports layer and select Properties. Switch to the Style tab. Choose Categorized style and our virtual field Type as the Column. Click Classify.

14. You will see a different colored circle gets assigned to a differnt type of airport. For the purpose of this tutorial, we will restrict the map to civilian airports. Hold the Ctrl key and select all categories for military airports. Once selected, click Delete.

15. Apart from assigning a different color to the category, we can change the size of the symbol to visually help our users distinguish different type of airports. Right-click on a category and select Change size.

16. Set the Size value to 3 for the Large Airport category.

17. Similarly, set the Size to 2 for Mid Airport and 1 for Small Airport.

18. For a complete map, we also need to label each airport. Switch to the Labels tab in the Properties dialog. Select Show labels for this layer and choose iata_code as the value for Label with. We will also set Rendering option so that the labels only appear when the user is sufficiently zoomed in. Check Scale-based visibility under Label options. Enter 1 as the Minimum scale and 10000000 as the maximum scale. This setting will render the labels only after the user has zoomed in more than 1:10000000 scale and will be visible till 1:1 scale.

19. As we are using circles to depict the airports, we need to ensure that the labels don't overlap with the circles. Go to the Placement tab in the Labels dialog and set the Placement to Cartographic. Select From symbol bounds as Distance offset from. Click OK.

20. Our map is now ready. This is a good time to save our work. Go to Project ‣ Save. Enter Airports as the name of the project.

21. Now we are ready to export our project to a web map. Install the qgis2web plugin by going to Plugins ‣ Manage and Install Plugin (See استفاده از پلاگین Plugins for more details on installing plugins in QGIS). Once the plugin is installed, go to Web ‣ qgis2web ‣ Create a web map.

22. In the Export to web map dialog, check Add layers list in the bottom panel under the Appearance section. Also select ne_10m_airports: iata_code as the field for Label search. Check the Show popups on hover to allow display of info-windows on hover. We can also set a basemap so the users have more context when looking at the airports layer. Select OSM B&W to use a black-and-white themed basemap create using OpenStreetMap data. You also have an option to choose from either OpenLayers or Leaflet as the web mapping library. We will restrict this tutorial to use the OpenLayers library. Click Update Preview` to see how your exported map will look like. Before we do the actual export, we need to set the Export folder. You can select a folder of your choice and click Export.

23. Once the export is complete, the default browser for your computer will open and show the interactive web map.

24. Your web map is now ready for publishing.

25. The qgis2web plugin has many limitations and it cannot do everything that the powerful web mapping libraries OpenLayers and Leaflet can do. This process can act as the starting point in your web mapping process and save you valuable time by creating a basic template from which you can further customize the web map. To highlight the fact that the output created from this process can be readily changed to suit your requirement - we will make a simple change to the web map to zoom to a particular airport when the user initially loads the map. On your computer, go to the folder where the web map was exported. Locate the resources folder and open qgis2web.js file in a text editor.

26. Locate the line where the map.getView().fit() function is called and add the following code after that. This new line of code instructs the web browser to center the map on the coordinates of Paris. Save the changes to the qgis2web.js file.

map.getView().setCenter(ol.proj.fromLonLat([2.35, 48.85]))

27. Refresh your browser and see that the web map will load with Paris at the center. This is a trivial example, but you can see how you can use any function available in the OpenLayers or Leaflet libraries to customize the web map.

28. The exported map resides on your computer. While you can see it in action, it is not very useful since you cannot share it anyone. For others to be able to see the map, you need to upload it to a web server. While the upload process will vary on the type of server you have access to - a cheap and easy way to publish your map on the web would be to use any of the public cloud storage services. Amazon S3 is a popular storage service. You will need to sign up for an account and follow the instructions to create a bucket. Once a bucket is created, you can upload the contents of your exported folder to the bucket and set it to public. Here I created a bucket named qgis-tutorials and uploaded the contents of my exported folder to a sub-folder named qgis2web. You can access the resulting map at http://s3.amazonaws.com/qgis-tutorials/qgis2web/index.html

29. Similarly, Google also offers a cloud storage service called Google Cloud Storage. Once you have created an account and enable billing, you can create a bucket and upload objects to the bucket. I create a bucket and sub-folder similar to Amazon and set the folder to public. The resulting map can be viewed at https://storage.googleapis.com/qgis-tutorials/qgis2web/index.html

---

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