{"id":8161,"date":"2019-04-17T07:30:00","date_gmt":"2019-04-17T10:30:00","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=8161"},"modified":"2019-04-12T16:36:20","modified_gmt":"2019-04-12T19:36:20","slug":"introducao-ao-leaflet-qgis-parte-12","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2019\/04\/17\/introducao-ao-leaflet-qgis-parte-12\/","title":{"rendered":"Introdu\u00e7\u00e3o ao Leaflet \u2013 QGIS"},"content":{"rendered":"<p>Hoje vamos usar o plugin qgis2web para exportar seus dados do QGIS para um mapa utilizando a biblioteca Leaflet.<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i1.png\" alt=\"\" width=\"1078\" height=\"697\" class=\"aligncenter size-full wp-image-8163\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i1.png 1078w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i1-300x194.png 300w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i1-768x497.png 768w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i1-1024x662.png 1024w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i1-945x611.png 945w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i1-600x388.png 600w\" sizes=\"auto, (max-width: 1078px) 100vw, 1078px\" \/><br \/>\n<\/center><\/p>\n<p><strong>1. Instalando o qgis2web<\/strong><\/p>\n<p>O plugin qgis2web \u00e9 instalado como qualquer outro no QGIS. Clique no item de menu <em>Plugins->Manage and Install Plugins<\/em>, clique em <em>Not installed<\/em> e, em seguida, localize o qgis2web na lista. Clique no bot\u00e3o <em>Install plugin<\/em> para concluir a instala\u00e7\u00e3o.<\/p>\n<p>Voc\u00ea encontrar\u00e1 um \u00edcone adicionado \u00e0 barra de ferramentas Plug-ins, al\u00e9m de uma entrada no menu Web.<\/p>\n<p><strong>2. Preparando o Projeto QGIS<\/strong><\/p>\n<p>Com o qgis2web instalado, clique na guia Help e leia as informa\u00e7\u00f5es. Sob o t\u00edtulo Usage, voc\u00ea encontrar\u00e1 algumas dicas sobre como preparar seu projeto do QGIS para exporta\u00e7\u00e3o:<\/p>\n<ul>\n<li>1. Defina o t\u00edtulo do seu projeto e o plano de fundo e destaque as cores em <em>Projeto-> Propriedades do Projeto<\/em><\/li>\n<li>2. D\u00ea a suas camadas nomes humanos amig\u00e1veis \u200b\u200bno painel <em>Camadas<\/em><\/li>\n<li>3. D\u00ea \u00e0s suas colunas das camada nomes amig\u00e1veis \u200b\u200bpara o usu\u00e1rio via <em>Camada-> Propriedades-> Campos-> Alias<\/em><\/li>\n<li>4. Esconda as colunas que voc\u00ea n\u00e3o deseja que apare\u00e7am nos seus pop-ups, alterando o widget Editar para &#8220;Hidden&#8221;<\/li>\n<li>5. Se algum dos campos contiver nomes de arquivos de imagens, altere o widget Editar para \u201cPhoto\u201d para que as imagens apare\u00e7am nos pop-ups<\/li>\n<li>6. Estilize suas camadas e defina sua visibilidade dependente de escala, se necess\u00e1rio<\/li>\n<\/ul>\n<p>D\u00ea uma aten\u00e7\u00e3o especial ao item 4 se suas camadas tiverem muitos campos de atributos. Por padr\u00e3o, todos eles ser\u00e3o inclu\u00eddos no pop-up no mapa do Leaflet. Voc\u00ea pode modificar o widget Editar para uma camada abrindo suas propriedades no QGIS (clique duas vezes no nome da camada) e selecionando <em>Attributes Form<\/em>.<\/p>\n<p><strong>3. Usando o qgis2web<\/strong><\/p>\n<p>O plugin qgis2web suporta exporta\u00e7\u00e3o para OpenLayers e Leaflet.<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i2.png\" alt=\"\" width=\"836\" height=\"463\" class=\"aligncenter size-full wp-image-8164\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i2.png 836w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i2-300x166.png 300w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i2-768x425.png 768w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i2-600x332.png 600w\" sizes=\"auto, (max-width: 836px) 100vw, 836px\" \/><br \/>\n<\/center><\/p>\n<p>Selecione as op\u00e7\u00f5es para cada camada, incluindo se ela est\u00e1 inclu\u00edda no mapa, sua visibilidade e op\u00e7\u00f5es de campo.<\/p>\n<p>Na aba <em>Appearance<\/em> voc\u00ea pode definir v\u00e1rias op\u00e7\u00f5es, incluindo:<\/p>\n<ul>\n<li>Adicionar uma lista de camadas<\/li>\n<li>Pesquisar camadas<\/li>\n<li>Ferramenta de medida<\/li>\n<li>Extens\u00e3o do mapa (extens\u00e3o de tela completa ou atual)<\/li>\n<li>N\u00edveis de zoom (min e max)<\/li>\n<\/ul>\n<p>Voc\u00ea pode visualizar o mapa, mas esteja ciente de que, se houver muitos recursos em suas camadas, poder\u00e1 levar muito tempo para ser renderizado.<\/p>\n<p>Voc\u00ea pode ver na visualiza\u00e7\u00e3o que temos v\u00e1rias colis\u00f5es de r\u00f3tulos. N\u00e3o reservamos tempo para modificar os widgets de edi\u00e7\u00e3o das camadas, ent\u00e3o o que voc\u00ea v\u00ea \u00e9 o padr\u00e3o.<\/p>\n<p>Clicar em exportar converte seus dados para GeoJSON e cria o arquivo index.html.<\/p>\n<p><strong>4. Resultados<\/strong><\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i3.png\" alt=\"\" width=\"800\" height=\"572\" class=\"aligncenter size-full wp-image-8165\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i3.png 800w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i3-300x215.png 300w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i3-768x549.png 768w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/04\/leaflet_d12_i3-600x429.png 600w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><br \/>\n<\/center><\/p>\n<p>O mapa resultante tem um controle de camada com boa legenda e o controle de zoom padr\u00e3o. Os pop-ups de cada camada s\u00e3o inclu\u00eddos no arquivo index.html. Voc\u00ea pode modific\u00e1-los ao seu gosto.<\/p>\n<p>Removemos a rotulagem dos rios para eliminar as colis\u00f5es.<\/p>\n<p>Com o plugin qgis2web, voc\u00ea pode gerar um mapa r\u00e1pido ou criar um \u00f3timo ponto de partida para ajustar o seu mapa.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hoje vamos usar o plugin qgis2web para exportar seus dados do QGIS para um mapa utilizando a biblioteca Leaflet. 1. Instalando o qgis2web O plugin qgis2web \u00e9 instalado como qualquer outro no QGIS. Clique no item de menu Plugins->Manage and&#8230; <a class=\"more-link\" href=\"https:\/\/www.fernandoquadro.com.br\/html\/2019\/04\/17\/introducao-ao-leaflet-qgis-parte-12\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":275,"featured_media":8162,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[140,293,260],"class_list":["post-8161","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","tag-javascript","tag-leaflet","tag-qgis"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/users\/275"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/comments?post=8161"}],"version-history":[{"count":7,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8161\/revisions"}],"predecessor-version":[{"id":8172,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8161\/revisions\/8172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/8162"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=8161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=8161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=8161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}