Maparea Web cu ajutorul QGIS2Web

Atenționare

Acest tutorial este învechit. O versiune actualizată este disponibilă la Web Mapping with QGIS2Web (QGIS3)

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.

2. 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.

3. 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.

4. În dialogul de Editare a Proprietăților Controlului Grafic, alegeți Ascuns pentru tip. Faceți clic pe OK.

5. Î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.

6. Selectați Web View pentru tipul câmpului. Acest tip indică faptul că valoarea câmpului reprezintă o adresă URL.

7. 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.

8. Î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.

9. 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.

10. 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')

11. 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.

12. Utilizați instrumentul de Identificare pentru a verifica dacă atributele arată conform așteptărilor.

13. 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.

14. 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.

15. Î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.

16. Setați valoarea guilabel:Dimensiunii la 3 pentru categoria Large Airport.

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

18. 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.

19. Î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.

20. 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.

21. Acum suntem gata să exportăm proiectul sub forma unei hărți web. Instalați plugin-ul qgis2web mergând la Plugin-uri ‣ Gestionare și Instalare Plugin (Parcurgeți Utilizarea Plugin-urilor pentru mai multe detalii despre instalarea plugin-urilor în QGIS). O dată ce plugin-ul este instalat, mergeți la Web ‣ qgis2web ‣ Creează o hartă web.

22. În fereastra dialogului de Exportare într-o hartă web, bifați opțiunea de Adăugare a listei de straturi din panoul de sub secțiunea Aspectului. De asemenea, selectați ne_10m_airports:iata_code ca și câmp de Căutare a etichetei. Bifați Afișarea unui pop-up la momentul trecerii pe deasupra pentru a permite afișarea ferestrelor informative. Putem de asemenea să setăm o hartă de bază, în așa fel încât utilizatorii să aibă mai multe informații contextuale la momentul inspectării stratului aeroporturilor. Selectați OSM B&W pentru a utiliza o hartă de bază tematică, în alb și negru, cu ajutorul datelor OpenStreetMap. De asemenea, puteți alege între bibliotecile de cartografiere web OpenLayers și Leaflet. Pentru acest tutorial vom folosi OpenLayers. Faceți clic pe Actualizarea vederii`, pentru a înțelege cum va arăta harta exportată. Înainte de a face exportul real, trebuie să stabilim Folderul de exportare. Puteți selecta un dosar după dorință, apoi acționați butonul Export.

23. Odată ce exportul este finalizat, se va deschide navigatorul implicit al calculatorului dvs., în care se va afișa harta interactivă.

24. De acum, harta dvs. web este gata pentru publicare.

25. Pluginul qgis2web are multe limitări, comparativ cu puternicele biblioteci de mapare web OpenLayers și Leaflet. Acest procedeu constituie un punct de plecare în procesul de mapare web, care va economisi timp prețios prin realizarea unui șablon personalizabil de hartă web. Pentru a evidenția faptul că rezultatul acestui proces poate fi ușor modificat pentru a se potrivi cerințelor dvs. - vom face o simplă modificare a hărții web, introducând efectul de zoom către un anumit aeroport, la momentul încărcării inițiale a hărții. Pe calculatorul dvs., accesați directorul în care a fost exportată harta web. Localizați folderul resources, apoi deschideți fișierul qgis2web.js într-un editor de text.

26. Localizați linia în care este apelată funcția map.getView().fit(), iar după ea adăugați codul următor. Această nouă linie de cod indică navigatorului web că trebuie să centreze harta pe coordonatele Parisului. Salvați modificările în fișierul qgis2web.js.

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

27. 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.

28. Harta exportată se află pe calculatorul dvs. Deși o puteți vedea în acțiune, nu este foarte utilă atât timp cât nu o puteți distribui nimănui. Pentru ca și alții să o poată vedea, trebuie să o încărcați pe un server web. Deși procesul de încărcare variază în funcție de tipul de server la care aveți acces - o modalitate ieftină și ușoară de publicare a hărții pe web constă în utilizarea serviciilor publice de stocare în cloud. Amazon S3 <https://aws.amazon.com/s3/> _ reprezintă un serviciu popular de stocare. Va trebui să vă înscrieți pentru un cont, apoi să urmați instrucțiunile de creare a unei unități de stocare / bucket. O dată ce ați creat-o, puteți încărca conținutul folderului dvs., pe care îl veți face public. În cazul nostru, am creat o unitate de stocare denumită qgis-tutorials, și un sub-folder denumit qgis2web, în care am încărcat conținutul folderului exportat. Puteți accesa harta rezultată la adresa http://s3.amazonaws.com/qgis-tutorials/qgis2web/index.html

29. În mod similar, Google oferă, de asemenea, un serviciu de stocare în cloud denumit «Google Cloud Storage» <https://cloud.google.com/storage/> «_. După ce ați creat un cont și ați activat facturarea, puteți să creați o unitate de stocare / bucket în care să încărcați obiectele. În unitatea de stocare creați un sub-folder cu acces public, similar cu Amazon. Harta rezultată poate fi vizualizată la 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)