Escolar Documentos
Profissional Documentos
Cultura Documentos
Autor
Ujaval Gandhi
Follow @spatialthoughts
endereço de e-mail
Se inscrever
Mudar idioma
Inglês
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
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)
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
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
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
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.
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.
LOG IN WITH
Name
see more
△ ▽ • Reply • Share ›
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 ›
see more
△ ▽ • Reply • Share ›
△ ▽ • Reply • Share ›
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