Maparea Web cu ajutorul QGIS2Web

Internetul este un mediu excelent pentru a publica datele dvs. cartografice și pentru a le face accesibile altor utilizatori. Crearea unei hărți web este un proces foarte diferit față de crearea unui GIS. Utilizatorii GIS nu sunt, de obicei, programatori web și de aceea, crearea unei hărți web care să aibă aceeași calitate ca și cea dintr-un GIS reprezintă o provocare. Din fericire, există instrumente disponibile pentru a vă traduce cu ușurință munca din QGIS într-o hartă web. În acest tutorial, veți învăța cum să utilizați pluginul QGIS2Web în cadrul proiectului QGIS, pentru a crea o hartă web utilizând bibliotecile OpenLayers sau Leaflet.

Privire de ansamblu asupra activității

Vom crea o hartă web Openlayers, globală, a aeroporturilor.

Alte competențe pe care le veți dobândi

  • Cum se utilizează controlul grafic de Editare din QGIS, pentru a ascunde anumite câmpuri și pentru a seta tipuri personalizate.

  • Cum se poate crea un câmp virtual cu ajutorul Calculatorului de Câmpuri

  • Crearea de etichete pentru funcțiile care apar numai la o anumită scară.

Obținerea datelor

Vom folosi setul de date Airports de la Natural Earth.

Decărcați Fișierul shape de Aeroporturi.

Pentru comoditate, puteți descărca o copie a seturilor de date direct de la adresele de mai jos:

ne_10m_airports.zip

Sursa de date [NATURALEARTH]

Procedura

  1. Deschideți QGIS și mergeți la Straturi ‣ Adăugare Strat Vectorial. Navigați în locația unde s-au extras fișierele, apoi selectați ne_10m_airports.zip. Clic pe OK.

../_images/1138.png
  1. Vom crea acum o hartă în QGIS care arată și se comportă în harta web exact așa cum ne-ar plăcea. Pluginul qgis2web va folosi replicarea setărilor QGIS și va crea automat harta web, fără să avem habar despre bibliotecile de mapare web. Când un utilizator dă clic pe marcajul unui aeroport, dorim ca o fereastră informativă să afișeze informații utile despre locația respectivă. Această informație este deja prezentă în tabela de atribute a straturilor ne_10m_airports. Faceți clic dreapta pe stratul ne_10m_airports, apoi selectați: guilabel:Properties.

../_images/290.png
  1. Mergeți la fila: guilabel:Câmpurilor. Observați diferitele atribute existente în strat. Unele dintre acestea nu sunt relevante pentru utilizatorii hărții noastre web, de aceea vom alege să le ascundem. Vom păstra câmpurile type, name, iata_code, wikipedia și le vom ascunde pe celelalte. Faceți clic pe butonul de Editare text din coloana de Editare control grafic a câmpului `scalerank.

../_images/347.png
  1. În dialogul de Editare a Proprietăților Controlului Grafic, alegeți Ascuns pentru tip. Faceți clic pe OK.

../_images/434.png
  1. În mod similar, setați tipul Ascuns și pentru alte câmpuri. Așa cum poate ați observat, există și alte tipuri de câmpuri disponibile care ne permit să setăm modul în care arată câmpurile pentru utilizatorii hărții noastre. Faceți clic pe Editare Control Grafic pentru câmpul wikipedia.

../_images/535.png
  1. Selectați Web View pentru tipul câmpului. Acest tip indică faptul că valoarea câmpului reprezintă o adresă URL.

../_images/633.png
  1. De asemenea, putem folosi coloana guilabel:Alias pentru a indica un nume alternativ pentru câmpuri, fără a schimba tabelul de date care stă la bază. Acest lucru este util în a oferi utilizatorilor hărții nume pentru câmpuri ușor de utilizat. Adăugați aliasurile dorite, apoi faceți clic pe Ok.

../_images/732.png
  1. Înapoi în fereastra principală QGIS, alegeți instrumentul de Identificare, apoi faceți clic pe oricare punct. Panoul de guilabel:Identificare rezultate va afișa atributele formatate frumos, având adăugate noile pseudonime. Veți observa că în rezultate nu apar câmpurile ascunse.

../_images/831.png
  1. Deși această metodă este utilă, există o limitare. Nu putem schimba ordinea câmpurilor. O modalitate de a depăși această limitare o constituie crearea unui Câmp Virtual. În cazul nostru, dacă vrem ca la sfârșitul ferestrei info să apară câmpul type, putem adăuga un nou câmp virtual și să ascundem câmpul type original. Totodată, putem folosi și o expresie pentru a formata mai bine valorile tipului. Faceți clic dreapta pe stratul ne_10m_airports, apoi alegeți Proprietăți. Accesați fila Câmpurilor și faceți clic pe Calculatorul de câmpuri.

../_images/929.png
  1. Dat fiind că numele câmpurilor trebuie să fie unice, folosiți Type ca nume pentru noul câmp. Alegeți Text (Șir) pentru tipului câmpului, și o lungime de 25 de caractere. Câmpul tip conține valorile mic, mijlociu, mare etc. Putem adăuga o expresie care va schimba capitalizarea cuvintelor din cadrul frazelor și va adăuga cuvântul aeroport pentru o mai bună lizibilitate. Introduceți următoarea expresie în casetă: guilabel: Expresie și faceți clic pe OK.

concat( title("type"), ' Airport')
../_images/1030.png
  1. Acum că avem o imagine mult mai bună asupra câmpului Type, putem stabili valoarea Hidden pentru coloana guilabel:Edit Widget a câmpului type.

../_images/1139.png
  1. Utilizați instrumentul de Identificare pentru a verifica dacă atributele arată conform așteptărilor.

../_images/1230.png
  1. Haideți să stilizăm stratul pentru a-l face mai atractiv și mai informativ din punct de vedere vizual. Faceți clic dreapta pe stratul ne_10m_airports, apoi selectați fila Proprietăți. Accesați fila Stilului. Alegeți stilul de organizare pe Categorii, în funcție de guilabel:Coloana Type. Faceți clic pe Clasificare.

../_images/1327.png
  1. Veți vedea că pentru fiecare tip de aeroport se va asigna câte un cerculeț, diferit colorat. Având în vedere scopul acestui tutorial, vom restrânge harta la aeroporturile civile. Țineți apăsată tasta Ctrl, apoi selectați toate categoriile de aeroporturi militare. O dată încheiată selecția, faceți clic pe: guilabel:Ștergere.

../_images/1426.png
  1. În afară de atribuirea unor culori diferite categoriei, putem schimba mărimea simbolului, pentru a ajuta utilizatorii să distingă între diferitele tipuri de aeroporturi. Faceți clic dreapta pe o categorie, apoi selectați Modificare dimensiune.

../_images/1524.png
  1. Setați valoarea guilabel:Dimensiunii la 3 pentru categoria Large Airport.

../_images/1623.png
  1. În mod similar, setați valoarea guilabel:Dimensiunii la 2 pentru Mid Airport și la 1 pentru Small Airport.

../_images/1722.png
  1. Pentru o hartă completă, trebuie să etichetați fiecare aeroport. Accesați fila Etichetelor din dialogul Proprietăți. Selectați Arată etichetele pentru acest strat, apoi alegeți valoarea iata_code pentru Etichetare cu. De asemenea, vom seta opțiunea de Randare, în așa fel încât etichetele să apară doar atunci când utilizatorul efectuează o mărire suficientă. Bifați Vizibilitate în funcție de scară’ în cadrul :guilabel:`Opțiunilor de etichetare’. Introduceți ``1` ca scară Minimă și 10000000 ca scară maximă. Această setare va afișa etichetele numai după ce utilizatorul a mărit mai mult de scara 1:10000000 și va fi vizibil până la scara 1:1.

../_images/1822.png
  1. Întrucât, pentru a descrie aeroporturile, folosim cerculețe, trebuie să ne asigurăm că etichetele nu se suprapun peste ele. Accesați fila de Poziționare din dialogul Etichetelor, apoi setați Poziționarea pe Cartografică. Alegeți pentru Distanța decalajului valoarea Din limitele simbolui. Faceți clic pe OK.

../_images/1920.png
  1. Harta noastră este gata acum. Este un moment bun pentru a ne salva munca. Mergeți la Proiect ‣ Salvare. Introduceți Aeroporturi la denumirea proiectului.

../_images/2017.png
  1. 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 Utilizarea Plugin-urilor for more details on installing plugins in QGIS). Once the plugin is installed, go to Web ‣ qgis2web ‣ Create a web map.
../_images/2121.png
  1. 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.
../_images/2220.png
  1. Odată ce exportul este finalizat, se va deschide navigatorul implicit al calculatorului dvs., în care se va afișa harta interactivă.

../_images/2316.png
  1. De acum, harta dvs. web este gata pentru publicare.

../_images/2414.png
  1. 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.
../_images/2513.png
  1. 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]))
../_images/2612.png
  1. Reactualizați browserul și observați că harta se va încărca cu Parisul în centru. Acesta este un exemplu trivial, dar în mod similar se poate utiliza oricare altă funcție disponibilă în bibliotecile OpenLayers sau Leaflet, în scopul personalizării hărții web.

../_images/2711.png
  1. 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
../_images/2810.png
  1. 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
../_images/297.png
comments powered by Disqus

This work is licensed under a Creative Commons Attribution 4.0 International License