In kaart brengen op het web met QGIS2Web

Waarschuwing

Deze handleiding is nu gedateerd. Een nieuwe en bijgewerkte versie is beschikbaar op In kaart brengen op het web met QGIS2Web (QGIS3)

Het in kaart brengen op het web is een fantastisch medium om uw gegevens van GIS te publiceren op het web en ze toegankelijk te maken voor andere gebruikers. het maken van een kaart voor het web is een geheel ander proces dan er een maken in een GIS. Gebruikers van GIS zijn over het algemeen geen programmeurs voor het web en het is een uitdaging als men een kaart voor het web wil maken die voldoet aan dezelfde kwaliteit als voor het maken van een kaart in een GIS. Gelukkig zijn er gereedschappen aanwezig om uw werk vanuit QGIS te vertalen naar kaarten voor het web. In deze handleiding zult u leren de plug-in QGIS2Web te gebruiken om een kaart voor het web te maken met behulp van bibliotheken van OpenLayers of Leaflet vanuit uw project van QGIS.

Overzicht van de taak

We zullen een webkaart van OpenLayers van de vliegvelden in de wereld maken.

Andere vaardigheden die u zult leren

• Hoe de widgets Bewerken in QGIS te gebruiken om bepaalde velden te verbergen en aangepaste typen in te stellen.

• Hoe een virtueel veld te maken met behulp van Veldberekeningen.

• Labels maken voor objecten die alleen voor een bepaalde schaal verschijnen.

De gegevens ophalen

We zullen de gegevensset Airports van Natural Earth gebruiken.

Download het shapefile Airports.

Voor het gemak kunt u direct een kopie van de gegevensset downloaden vanaf de links hieronder:

ne_10m_airports.zip

Gegevensbron [NATURALEARTH]

Procedure

1. Open QGIS en ga naar Kaartlagen ‣ Laag toevoegen ‣ Vectorlaag toevoegen. Blader naar het gedownloade bestand en selecteer ne_10m_airports.zip. Klik op Openen.

2. We zullen nu een kaart maken in QGIS die er uitziet en zich gedraagt net zoals we zouden willen voor een kaart voor het web. De plug-in qgis2web zal de instellingen van QGIS overnemen en automatisch de kaart voor het web maken zonder dat wij iets merken van de bibliotheken voor het maken van kaarten voor het web. Als een gebruiker op een markering voor een vliegveld klikt, willen we een informatie-venster weergeven dat nuttige informatie over het vliegveld weergeeft. Deze informatie is al aanwezig in de attributentabel van de lagen ne_10m_airports. Klik met rechts op de laag ne_10m_airports en selecteer Eigenschappen.

3. Schakel naar de tab Velden. U zult zien dat de verschillende attributen aanwezig zijn op de laag. Sommige hiervan zijn niet relevant voor de gebruikers van onze webkaart, dus kunnen we ervoor kiezen om ze te verbergen. We zullen de velden type, name, iata_code en wikipedia behouden en de andere verbergen. Klik op de knop Tekst bewerken in de kolom Wijzig-hulpmiddel voor het veld `scalerank.

4. Kies, in het dialoogvenster Eigenschappen Widget bewerken, Verborgen als het type. Klik op OK.

5. Stel op dezelfde wijze ander velden in op het type Verborgen. Zoals u waarschijnlijk zal zijn opgevallen, zijn er nog andere veldtypen beschikbaar die het ons mogelijk maken om in te stellen hoe gebruikers van onze kaart de velden zien. Klik op Tekst bewerken voor het veld wikipedia.

6. Selecteer Webweergave als het veldtype. Dit type geeft aan dat de in dit veld opgenomen waarde een URL is.

7. We kunnen ook de kolom Alias gebruiken om een alternatieve naam aan te geven voor de velden zonder de onderliggende gegevenstabel te wijzigen. Dit is nuttig om meer vriendelijkere veldnamen te presenteren aan de gebruikers van onze kaart. Voeg aliassen van uw keuze toe en klik op Ok.

8. Kies, terug in het hoofdvenster van QGIS, het gereedschap Objecten identificeren en klik op een willekeurige stip. Het paneel Identificatieresultaten zal de keurig opgemaakte attributen laten zien met de nieuw toegevoegde aliassen. Het moet u opvallen dat de verborgen velden niet in de resultaten verschijnen.

9. Hoewel deze methode nuttig is, is er een beperking. We kunnen de volgorde van de velden niet veranderen. Eén manier om deze beperking te omzeilen is door een Virtueel veld te maken. In ons geval, als we zouden willen dat het veld type aan het einde van het informatie-venster zou moeten verschijnen, kunnen we eenvoudigweg een nieuw virtueel veld aan het einde toevoegen en het originele veld type verbergen. Nu we er toch zijn - we kunnen ook een expressie gebruiken om de waarden van de types beter op te maken. Klik met rechts op de laag ne_10m_airports en kies Eigenschappen. Ga naar de tab Velden en klik op Veldberekening.

10. Gebruik, omdat de veldnamen uniek moeten zijn, Type als de nieuwe veldnaam. Stel het veldtype in op Tekst (String) met een lengte van 25 tekens. Het veld type bevat waarden zoals small, mid, large etc. We kunnen een expressie toevoegen om de hoofd-/kleine letters te wijzigen en jet woord airport toevoegen voor betere leesbaarheid. Voer de volgende expressie in in het vak Expressie en klik op OK.

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

11. Nu we een veel beter uitziend veld Type hebben, kunt u doorgaan en Tekst bewerken voor het veld type instellen op Verborgen.

12. Gebruik het gereedschap objecten identificeren om te verifiëren of de attributen verschijnen zoals mag worden verwacht.

13. Laten we nu onze laag beter opmaken zodat die visueel aantrekkelijker is en informatiever. Klik met rechts op de laag ne_10m_airports en selecteer Eigenschappen. Schakel naar de tab Stijl. Kies de stijl Categoriën en ons virtuele veld Type als de Kolom. Klik op Classificeren.

14. U zult zien dat een verschillende gekleurde cirkel wordt toegewezen aan een verschillend type vliegveld. Ten behoeve van deze handleiding zullen we de kaart beperken tot burgervliegvelden. Houd de Ctrl-toets ingedrukt en selecteer alle categorieën voor militaire vliegvelden. Als alles is geselecteerd, klik op Verwijderen.

15. Apart van het toewijzen van een verschillende kleur aan de categorie, kunnen we de grootte van het symbool vergroten om onze gebruikers visueel te helpen de verschillende type vliegvelden te onderscheiden. Klik met rechts op een categorie en selecteer Wijzig formaat.

16. Stel de waarde Grootte in op 3 voor de categorie Large airport.

17. Stel, op dezelfde wijze, de Grootte 2 in voor Mid airport en 1 voor Small airport.

18. Voor een volledige kaart dienen we ook elk vliegveld te voorzien van een label. Schakel naar de tab Labels in het dialoogvenster Eigenschappen. Selecteer Labels voor deze laag weergeven en kies iata_code als de waarde voor Label met. We zullen ook een optie instellen voor Rendering zodat de labels alleen tevoorschijn komen als de gebruiker voldoende is ingezoomd. Selecteer Schaalgebaseerde zichtbaarheid onder Label opties. Voer 1 in als de Minimum schaal en 10000000 als de maximum schaal. Deze instelling zal de labels alleen renderen nadtat de gebruiker is ingezoomd voor meer dan dan de schaal 1:10000000 en zal zichtbara blijven tot de schaal 1:1 is.

19. Omdat we cirkels gebruiken om de vliegvelden weer te geven, dienen we er voor te zorgen dat de labels de cirkels niet overlappen. Ga naar de tab Plaatsing in het dialoogvenster Labels en stel de Plaatsing in op Cartographisch. Selecteer Vanaf grens symbolen als Verschuiving afstand vanaf. Klik op OK.

20. Onze kaart is nu klaar. Dit is een goed moment om ons werk op te slaan. Ga naar Project ‣ Opslaan. Voer Vliegvelden in als de naam van het project.

21. Nu zijn we gereed om ons project als een webkaart te exporteren. Installeer de plug-in qgis2web door te gaan naar Plug-ins ‣ Plug-ins beheren en installeren (Zie Plug-ins gebruiken voor meer details over het installeren van plug-ins in QGIS). Ga, als de plug-in is geïnstalleerd, naar Web ‣ qgis2web ‣ Create a web map.

22. Selecteer, in het dialoogvenster Export to web map, Add layers list in het onderste paneel onder het gedeelte Appearance. Selecteer ook ne_10m_airports: iata_code als het veld voor Label search. Selecteer Show popups on hover om het weergeven van info-vensters als u er overheen gaat mogelijk te maken. We kunnen ook een basiskaart instellen zodat de gebruikers meer context hebben bij het kijken naar de laag met vliegvelden. Selecteer OSM B&W om een zwart-witte thema-basiskaart te gebruiken die werd gemaakt met behulp van gegevens van OpenStreetMap. U heeft ook een optie om te kiezen uit OpenLayers of Leaflet als de bibliotheek voor webkaarten. We zullen deze handleiding beperken tot het gebruiken van de bibliotheek van OpenLayers. Klik op Update Preview` om te zien hoe uw geëxporteerde kaart er uit zal zien. Vóór we daadwerkelijk gaan exporteren, dienen we de Export folder in te stellen. U mag een map naar keuze seelcteren en dan op Export klikken.

23. Als het exporteren is voltooid, zal de standaard browser voor uw computer openen en de interactieve webkaart weergeven.

24. Uw webkaart is nu klaar om te publiceren.

25. De plug-in qgis2web heeft veel beperkingen en kan niet alles wat de krachtige bibliotheken voor webkaarten OpenLayers en Leaflet kunnen. Dit proces kan dienen als het startpunt in het proces voor het het maken van uw webkaarten en u kostbare tijd besparen bij het maken van een basissjabloon van waaruit u de webkaart verder kunt aanpassen. Om het feit te accentueren dat de met dit proces gemaakte voltooide uitvoer kan worden gewijzigd om aan uw wensen te voldoen - we zullen een eenvoudige wijziging aan de webkaart maken om in te zomen op een bepaald vliegveld als de gebruiker de kaart initieel laadt. Op uw computer, ga naar de map van waaruit de webkaart werd geëxporteerd. Zoek naar de map resources en open het bestand qgis2web.js in een tekstbewerker.

26. Zoek naar de regel waar de functie map.getView().fit() wordt aangeroepen en voeg de volgende code erna toe. Deze nieuwe regel code instrueert de webbrowser om de kaart te centreren op de coördinaten van Parijs. Sla de wijzigingen in het bestand qgis2web.js op.

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

27. Vernieuw uw browser en bekijk hoe de webkaart zal laden met Parijs als middelpunt. Dit is een triviaal voorbeeld, maar u ziet hoe u elke functie die beschikbaar is in de bibliotheken OpenLayers of Leaflet kunt gebruiken om de webkaart aan te passen.

28. De geëxporteerde kaart bevindt zich op uw computer. Hoewel u het in actie kunt zien, is het niet erg nuttig omdat u het met niemand kunt delen. U dient hem te uploaden naar een webserver om anderen in de gelegenheid te stellen hem te bekijken. Hoewel het proces voor uploaden zal variëren, afhankelijk van het type server waar u toegang toe heeft - een goekdope en gemakkelijke manier om uw kaart te publiceren op het web zou zijn om een van de publieke services voor opslaan in de cloud te gebruiken. Amazon S3 is a populaire service voor opslaan. U dient een account aan te maken en de instructies te volgen om een mandje aan te maken. Als het mandje eenmaal is gemaakt kunt u de inhoud van uw map voor exporteren naar het mandje uploaden en dat instellen op public. Hier maakte ik een mandje, genaamd qgis-tutorials, en uploadde de inhoud van mijn map voor exporteren naar een sub-map genaamd qgis2web. U heeft toegang tot de resulterende kaart via http://s3.amazonaws.com/qgis-tutorials/qgis2web/index.html

29. Google biedt een soortgelijke service voor opslaan in de cloud, genaamd Google Cloud Storage. Als u eenmaal een account hebt gemaakt en afrekenen heeft ingeschakeld, kunt u een mandje maken en objecten uploaden naar het mandje. Ik maakte een mandje en sub-map als op dezelfde wijze voor Amazon en stelde de map in op public. De resulterende kaart kan worden bekeken op 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)