Você está na página 1de 31

03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

Autor
Ujaval Gandhi

Follow @spatialthoughts

Faça meus cursos de QGIS! Visite o site da minha empresa. (https://spatialthoughts.com/)

Inscrever-se na minha lista


Receba e-mails ocasionais quando publicar novos materiais ou anunciar eventos de treinamento.

endereço de e-mail

Se inscrever

Mudar idioma

Inglês

Mapeamento da Web com QGIS2Web


O mapeamento da Web é um ótimo meio para publicar seus dados GIS na Web e torná-los acessíveis por outros
usuários. Criar um mapa da web é um processo muito diferente do que criar um em um GIS. Os usuários de GIS
geralmente não são programadores da Web e isso representa um desa o quando é necessário criar um mapa da
Web com a mesma qualidade que um mapa criado em um GIS. Felizmente, existem ferramentas disponíveis para
traduzir facilmente seu trabalho no QGIS em mapas da web. Neste tutorial, você aprenderá como usar o plug-in
QGIS2Web para criar um mapa da web usando os lubri cantes OpenLayers ou Lea et do seu projeto QGIS.

Visão geral da tarefa


Criaremos um mapa da web dos aeroportos do mundo.

Outras habilidades que você aprenderá


Como usar Editar Widgets no QGIS para ocultar certos campos e de nir tipos personalizados.
Como criar um campo virtual usando a Calculadora de Campo.
Criando etiquetas para recursos que aparecem apenas em determinada escala.

Obtenha os dados
Usaremos o conjunto de dados de aeroportos (http://www.naturalearthdata.com/downloads/10m-cultural-
vectors/airports/) da Terra Natural.

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 1/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

Faça o download do shape le de aeroportos


(http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_airports.zip)
.

Por conveniência, você pode baixar diretamente uma cópia dos conjuntos de dados nos links abaixo:

ne_10m_airports.zip (http://www.qgistutorials.com/downloads/ne_10m_airports.zip)

Fonte de dados [NATURALEARTH] (credits.html#naturalearth)

Procedimento
1. Abra o QGIS e vá para Camada ‣ Adicionar camada vetorial . Navegue até o local do arquivo baixado e
selecione ne_10m_airports.zip . Clique em OK .

2. Agora, criaremos um mapa no QGIS com aparência e comportamento exatamente como gostaríamos no
mapa da web. O plug qgis2web - in irá replicar as con gurações do QGIS e criar automaticamente o mapa
da web sem que saibamos sobre as bibliotecas de mapeamento da web. Quando um usuário clica em um
marcador de aeroporto, queremos uma janela de informações para fornecer informações úteis sobre o
aeroporto. Esta informação já está presente na tabela de atributos das ne_10m_airports camadas. Clique
com o botão direito do mouse na ne_10m_airports camada e selecione Propriedades .

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 2/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

3. Alterne para a guia Campos . Você observará os diferentes atributos presentes na camada. Algumas delas
não são relevantes para os usuários do nosso mapa da web, portanto, podemos optar por ocultá-las. Vamos
manter type , name , iata_code e wikipedia campos e esconder os outros. Clique no botão Editar texto na
coluna Editar widget para o `scalerank campo.

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 3/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

4. Na caixa de diálogo Editar propriedades do widget , escolha Hidden como o tipo. Clique em OK .

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 4/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

5. Da mesma forma, de na outros campos como Tipo oculto. Como você pode perceber, existem outros tipos
de campos disponíveis que nos permitem de nir como os campos serão exibidos aos usuários do nosso
mapa. Clique em Editar widget para o wikipedia campo.

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 5/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

6. Selecione como o tipo de campo. Este tipo indica que o valor contido neste campo é uma URL. Web View

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 6/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

7. Também podemos usar a coluna Alias para indicar um nome alternativo para os campos sem alterar a
tabela de dados subjacente. Isso é útil para fornecer nomes de campos mais amigáveis aos usuários do
nosso mapa. Adicione aliases conforme suas escolhas e clique em OK .

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 7/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

8. De volta à janela principal do QGIS, escolha a ferramenta Identify e clique em qualquer ponto. O painel
Identify Results exibirá os atributos bem formatados com os aliases recém-adicionados. Você notará que os
campos ocultos não aparecem nos resultados.

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 8/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

9. Embora esse método seja útil, há uma limitação. Não podemos alterar a ordem dos campos. Uma maneira
de superar essa limitação é criar a . No nosso caso, se quisermos que o campo apareça no nal da janela de
informações, podemos simplesmente adicionar um novo campo virtual ao nal e ocultar o campo original .
Enquanto estamos nisso - também podemos usar uma expressão para formatar melhor os valores do tipo.
Clique com o botão direito do mouse na camada e escolha Propriedades . Vá para a guia Campos e clique
em Calculadora de campos . Virtual Field type type ne_10m_airports

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 9/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

10. Como os nomes dos campos precisam ser exclusivos, use Type como o novo nome do campo. De na o tipo
de campo para com um comprimento de caracteres. O campo contém valores tais como , , etc. Nós
podemos adicionar uma expressão para alterar o caso das palavras para caso sentença e acrescentar a
palavra aeroporto para melhor legibilidade. Digite a seguinte expressão na caixa Expressão e clique em OK
. Text (String) 25 type small mid large

concat (título ("tipo"), 'Aeroporto')

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 10/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

11. Agora que temos um Type campo muito melhor , você pode prosseguir e de nir o campo Editar widget para
. type Hidden

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 11/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

12. Use a ferramenta Identify para veri car se os atributos aparecem conforme o esperado.

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 12/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

13. Agora vamos modelar nossa camada para ser mais visualmente atraente e informativa. Clique com o botão
direito do mouse na ne_10m_airports camada e selecione Propriedades . Alterne para a guia Estilo . Escolha
o Categorized estilo e nosso campo virtual Type como a coluna . Clique em Classificar .

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 13/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

14. Você verá um círculo colorido diferente ser atribuído a um tipo diferente de aeroporto. Para os ns deste
tutorial, restringiremos o mapa aos aeroportos civis. Mantenha Ctrl pressionada a tecla e selecione todas
as categorias para aeroportos militares. Depois de selecionado, clique em Excluir .

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 14/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

15. Além de atribuir uma cor diferente à categoria, podemos alterar o tamanho do símbolo para ajudar
visualmente nossos usuários a distinguir diferentes tipos de aeroportos. Clique com o botão direito do
mouse em uma categoria e selecione Alterar tamanho .

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 15/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

16. De na o valor do tamanho como 3 para a categoria. Large Airport

17. Da mesma forma, de na o tamanho como 2 para e para . Mid Airport 1 Small Airport

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 16/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

18. Para um mapa completo, também precisamos rotular cada aeroporto. Alterne para a guia Etiquetas na caixa
de diálogo Propriedades . Selecione e escolha como o valor para Label with . Também de niremos a opção
Renderização para que os rótulos apareçam apenas quando o usuário estiver su cientemente ampliado.
Veri que a visibilidade baseada em escala em Opções de rótulo . Digite como a escala Mínima e como a
escala máxima. Essa con guração renderizará os rótulos somente depois que o usuário ampliar mais que a
escala e cará visível até a escala. Show labels for this layer iata_code 1 10000000 1:10000000 1:1

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 17/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

19. Como estamos usando círculos para representar os aeroportos, precisamos garantir que os rótulos não se
sobreponham aos círculos. Vá para a guia Canal na caixa de diálogo Rótulos e de na o canal como
Cartographic . Selecione como Deslocamento de distância de . Clique em OK . From symbol bounds

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 18/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

20. Nosso mapa está pronto. Este é um bom momento para salvar nosso trabalho. Vá para Projeto ‣ Salvar .
Digite Airports como o nome do projeto.

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 19/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

21. Agora estamos prontos para exportar nosso projeto para um mapa da web. Instale o qgis2web plug - in
acessando Plug - ins ‣ Gerenciar e instalar plug-in (consulte Usando plug-ins (using_plugins.html) para obter
mais detalhes sobre a instalação de plug-ins no QGIS). Depois que o plug-in estiver instalado, vá para a Web
‣ qgis2web ‣ Crie um mapa da web .

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 20/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

22. Na caixa de diálogo Exportar para mapa da web , marque a lista Adicionar camadas no painel inferior na
seção Aparência . Selecione também como o campo para pesquisa de etiquetas . Marque Mostrar pop-ups
ao passar o mouse para permitir a exibição de janelas de informações ao passar o mouse. Também
podemos de nir um mapa base para que os usuários tenham mais contexto ao olhar para a camada de
aeroportos. Selecione para usar um mapa base com temas em preto e branco usando os dados do
OpenStreetMap. Você também tem a opção de escolher uma ou como a biblioteca de mapeamento da
web. Restringiremos este tutorial para usar a biblioteca. Clique em Atualizar visualização` ne_10m_airports:
iata_code OSM B&W OpenLayers Leaflet OpenLayers para ver como será o seu mapa exportado. Antes de
fazermos a exportação real, precisamos de nir a pasta Exportar . Você pode selecionar uma pasta de sua
escolha e clicar em Exportar .

23. Após a conclusão da exportação, o navegador padrão do seu computador será aberto e exibirá o mapa da
web interativo.

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 21/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

24. Seu mapa da web está pronto para publicação.

25. O qgis2web plugin tem muitas limitações e não pode fazer tudo o que os poderosos bibliotecas de
mapeamento web OpenLayers e Leaflet pode fazer. Esse processo pode atuar como ponto de partida no
processo de mapeamento da web e economizar um tempo valioso, criando um modelo básico a partir do
qual você pode personalizar ainda mais o mapa da web. Para destacar o fato de que a saída criada a partir
deste processo pode ser facilmente alterada para atender às suas necessidades - faremos uma simples
https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 22/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

alteração no mapa da web para aumentar o zoom em um aeroporto especí co quando o usuário carregar o
mapa inicialmente. No seu computador, vá para a pasta onde o mapa da web foi exportado. Localize a
resources pasta e abra o qgis2web.js arquivo em um editor de texto.

26. Localize a linha em que a map.getView().fit() função é chamada e adicione o código a seguir. Essa nova
linha de código instrui o navegador da web a centralizar o mapa nas coordenadas de Paris. Salve as
alterações no qgis2web.js arquivo.

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

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 23/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

27. Atualize seu navegador e veja se o mapa da Web será carregado com Paris no centro. Este é um exemplo
trivial, mas você pode ver como pode usar qualquer função disponível nas bibliotecas OpenLayers ou
Leaflet para personalizar o mapa da web.

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 24/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

28. O mapa exportado reside no seu computador. Embora você possa vê-lo em ação, não é muito útil, pois você
não pode compartilhá-lo com ninguém. Para que outras pessoas possam ver o mapa, você precisa enviá-lo
para um servidor da web. Embora o processo de upload varie de acordo com o tipo de servidor ao qual
você tem acesso - uma maneira fácil e barata de publicar seu mapa na Web seria usar qualquer um dos
serviços públicos de armazenamento em nuvem. O Amazon S3 (https://aws.amazon.com/s3/) é um serviço
de armazenamento popular. Você precisará se inscrever em uma conta e seguir as instruções para criar um
bloco. Depois que um bucket é criado, você pode fazer upload do conteúdo da pasta exportada para o
bucket e con gurá-lo como público. Aqui, criei um bucket chamado qgis-tutorials e carreguei o conteúdo
da minha pasta exportada para uma subpasta chamada qgis2web . Você pode acessar o mapa resultante
em http://s3.amazonaws.com/qgis-tutorials/qgis2web/index.html (http://s3.amazonaws.com/qgis-
tutorials/qgis2web/index.html)

29. Da mesma forma, o Google também oferece um serviço de armazenamento em nuvem chamado Google
Cloud Storage (https://cloud.google.com/storage/) . Depois de criar uma conta e ativar o faturamento,
você pode criar um bloco e fazer upload de objetos para o bloco. Crio um bucket e uma subpasta
semelhante à Amazon e de no a pasta como pública. O mapa resultante pode ser visualizado em
https://storage.googleapis.com/qgis-tutorials/qgis2web/index.html (https://storage.googleapis.com/qgis-
tutorials/qgis2web/index.html)

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 25/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

Se você gostou de tutoriais neste site e con ra o spatialthoughts.com (http://spatialthoughts.com) para obter
mais recursos gratuitos.

ALSO ON QGIS TUTORIALS AND TIPS

27 Comments QGIS Tutorials and Tips 🔒 


1 Login

 Recommend t Tweet f Share Sort by Best

Join the discussion…

LOG IN WITH

OR SIGN UP WITH DISQUS ?

Name

Narayan Thapa • 3 months ago


Its really nice
5△ ▽ • Reply • Share ›

Tom Rockclimber • 2 years ago


when viewing your amazon or google map, I can hover over an
airport and see a wikipedia url, but cannot click on it or access
the url as the popup disappears when I maneuver off the icon
and onto the popup. How do you correct this?
4△ ▽ • Reply • Share ›
https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 26/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

mike ayeh > Tom Rockclimber • 2 years ago


am having a similar challenge,. I hope there is a way it
can be rectfied
47 △ ▽ • Reply • Share ›

Tom Chadwin > mike ayeh • 2 years ago


The only solution to this is to uncheck "Show
popups on hover", which means the user has to
click on an airport to get the popup.
△ ▽ • Reply • Share ›

Adam Griffith • 2 years ago


This was great. I used it in class today and it went very well.
There are a few minor differences between 2.14 and 2.18. I am
curious to see how different 3.0 will be. Thank you!
2△ ▽ • Reply • Share ›

Ralda • 3 months ago


Hello Ujaval, thank you very much for this tutorial. It has really
been helpful for me. However, I have a little challenge, for my
dataset, I had to use the size assistant under the symbol
selector to adjust the sizes of my circle as my data sets ranges
from 1-13 for the first and 25-93 for the second. on exporting it to
QGIS2web, the original sizes are showing instead of the edited
ones I made. How do I fix this?
1△ ▽ • Reply • Share ›

Ujaval Gandhi Mod > Ralda • 2 months ago

Many styling features don't work with qgis2web. Try this


way of setting size and see if it works
https://gis.stackexchange.c...
△ ▽ • Reply • Share ›

Birgit Blaabjerg • 19 days ago


Nice feature/plugin, unfortunately the guide does not match the
plugin for QGIS v3.4 so the upload did not work...
It would be nice if You could update the guide :-)
△ ▽ • Reply • Share ›

Mark Cramman • 20 days ago


Hi. Another question. Is there a way of adding layers in to
groups? for example, I'm looking at model results and I'd like all
my depth layers to be in a group and then all my velocity in
another? Is there any way to do this?
△ ▽ • Reply • Share ›

Mark Cramman • 25 days ago


Thanks for this. It's a very useful tool. Question - Is there any
way of showing the legend of a raster file, ie the colour ramp?
△ ▽ • Reply • Share ›
https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 27/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips
Reply Share ›

Véronique Lalonde • 2 months ago


Hi,

Once I have uploaded the file for the exported map to my


qgis2web map, where do I find the link to actually view the map
and share it?
△ ▽ • Reply • Share ›

Ralda • 3 months ago


After using the size assistant, this is how it will look:

see more

△ ▽ • Reply • Share ›

Ralda • 3 months ago


Hello Ujaval, thank you very much for this tutorial. It has really
been helpful for me. However, I have a little challenge, for my
dataset, I had to use the size assistant under the symbol
selector to adjust the sizes of my circle as my data sets ranges
from 1-13 for the first and 25-93 for the second. on exporting it to
QGIS2web, the original sizes are showing instead of the edited
ones I made. How do I fix this?

see more
https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 28/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips
see more

△ ▽ • Reply • Share ›

Ralda • 3 months ago

see more

△ ▽ • Reply • Share ›

Mariusz Krukar • 3 months ago


Very useful. Unfortunately work with 3.8 requires more fiddle as
some steps are completely different.
△ ▽ • Reply • Share ›

Valentina Rappa • 10 months ago


Can you make the map publicly available using Google Drive as
well? I don't want to pay for a Google Cloud Storage account but
I am having a difficult time sharing the files using Google Drive.
When a friend tries to open my map using the Google Drive link
to the index.html file it only shows them the script and not the
actual map. I uploaded the contents of my exported folder from
QGIS onto my Drive and made the folder accessible to the
public.
△ ▽ • Reply • Share ›

Ujaval Gandhi Mod > Valentina Rappa • 10 months ago

Google Drive, Dropbox and other file sharing services do


not allow using them as static web servers. Some of them
did allow in the early days and there were hacks to get it
to work, but now I find that the only reliable way to
achieve this is either to setup your own webserver or use
the cloud hosting service as I mentioned. Btw, the cloud
hosting providers charge only for usage, so for casual
use, you may not end up paying very much and even
stay under the free quota.
https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 29/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips

△ ▽ • Reply • Share ›

Valentina Rappa > Ujaval Gandhi • 10 months ago


Thank you for the help!
△ ▽ • Reply • Share ›

niraj kunwar • a year ago


Great..Thankx
△ ▽ • Reply • Share ›

Tom Tom • a year ago


Hello,
Thanks a lot for this tutorial!
I have a problem to solve. The layer search don't works for me.
The position of the map don't changes when I make a
research.What doesn't work out ?
△ ▽ • Reply • Share ›

Davide Ture • a year ago


Hello,
I regularly use qgis and the qgis2web plugin to create webmaps.
Now
I need to insert a key such as that of the
search address for alerts. I need to insert on the
webmap a free field that allows users to enter
a text and receive the information. There is the feasibility with
the plugin
Qgis2Web or other plugin?
△ ▽ • Reply • Share ›

Davide Ture • a year ago


Ciao,
utilizzo regolarmente qgis ed il plugin qgis2web per creare delle
webmap.
Adesso
ho la necessità di inserire un tasto come ad esempio quello della
ricerca indirizzo per le segnalazioni. Ho la necessità di inserire
sulla
webmap un campo libero che dia la possibilità agli utenti di
inserire
un testo e ricevere l'informazione. C'è la fattibilità con il plugin
Qgis2Web o altro plugin?
△ ▽ • Reply • Share ›

kounfoukios • 2 years ago


So that means you dont need to setup a geo server, but only
upload the exported folder to a web server?
△ ▽ • Reply • Share ›

Lydia • 2 years ago


This is really good and i am excited about this however i have
https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 30/31
03/03/2020 Web Mapping with QGIS2Web — QGIS Tutorials and Tips
This is really good and i am excited about this however, i have
run into a brick wall. I tried to turn off the layer properties for
ne_10m_airports so i can view just the major, mid and small
airport but everything on the page disappeared. My label is also
not showing and i have turned on the label and labelled with
iata_code. Please what could be wrong?

© Copyright 2019, Ujaval Gandhi. De volta ao topo


Última atualização em 02 de março de 2020.
Criado usando o Sphinx (http://sphinx.pocoo.org/) 1.3.6.

Este trabalho está licenciado sob uma Licença Internacional Creative Commons Attribution 4.0
(http://creativecommons.org/licenses/by/4.0/deed.en_US)

https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html 31/31