Web Mapping With QGIS2Web - QGIS Tutorials and Tips PDF

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
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 .
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.
4. Na caixa de diálogo Editar propriedades do widget , escolha Hidden como o tipo. Clique em OK .
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.
6. Selecione como o tipo de campo. Este tipo indica que o valor contido neste campo é uma URL. Web View
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 .
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.
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
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')
11. Agora que temos um Type campo muito melhor , você pode prosseguir e de nir o campo Editar widget para
. type Hidden
12. Use a ferramenta Identify para veri car se os atributos aparecem conforme o esperado.
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 .
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 .
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 .
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
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
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
20. Nosso mapa está pronto. Este é um bom momento para salvar nosso trabalho. Vá para Projeto ‣ Salvar .
Digite Airports como o nome do projeto.
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 .
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.
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
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]))
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.
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)
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?
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!
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?
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...
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 :-)
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?
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 ›
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?

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

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
see more
see more
Mariusz Krukar • 3 months ago

Very useful. Unfortunately work with 3.8 requires more fiddle as
some steps are completely different.
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.
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.
Valentina Rappa > Ujaval Gandhi • 10 months ago

Thank you for the help!
niraj kunwar • a year ago

Great..Thankx
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 ?
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?
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?
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?
Lydia • 2 years ago

This is really good and i am excited about this however i have
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)

Web Mapping With QGIS2Web - QGIS Tutorials and Tips PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Web Mapping With QGIS2Web - QGIS Tutorials and Tips PDF

Загружено:

Авторское право:

Доступные форматы

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

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

Inscrever-se na minha lista

Mapeamento da Web com QGIS2Web

Visão geral da tarefa

Outras habilidades que você aprenderá

Faça o download do shape le de aeroportos

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

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

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

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

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

ALSO ON QGIS TUTORIALS AND TIPS

27 Comments QGIS Tutorials and Tips 🔒 

 Recommend t Tweet f Share Sort by Best

Join the discussion…

OR SIGN UP WITH DISQUS ?

Narayan Thapa • 3 months ago

Tom Rockclimber • 2 years ago

mike ayeh > Tom Rockclimber • 2 years ago

Tom Chadwin > mike ayeh • 2 years ago

Adam Griffith • 2 years ago

Ralda • 3 months ago

Ujaval Gandhi Mod > Ralda • 2 months ago

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

Birgit Blaabjerg • 19 days ago

Mark Cramman • 20 days ago

Mark Cramman • 25 days ago

Véronique Lalonde • 2 months ago

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

Ralda • 3 months ago

Ralda • 3 months ago

Ralda • 3 months ago

Mariusz Krukar • 3 months ago

Valentina Rappa • 10 months ago

Ujaval Gandhi Mod > Valentina Rappa • 10 months ago

Google Drive, Dropbox and other file sharing services do

Valentina Rappa > Ujaval Gandhi • 10 months ago

niraj kunwar • a year ago

Tom Tom • a year ago

Davide Ture • a year ago

Davide Ture • a year ago

kounfoukios • 2 years ago

Lydia • 2 years ago

© Copyright 2019, Ujaval Gandhi. De volta ao topo

Вам также может понравиться