{"id":5088,"date":"2016-04-28T07:14:10","date_gmt":"2016-04-28T10:14:10","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=5088"},"modified":"2016-04-29T08:44:29","modified_gmt":"2016-04-29T11:44:29","slug":"criando-um-webapp-com-openlayers-3-sem-escrever-codigo-parte-1","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2016\/04\/28\/criando-um-webapp-com-openlayers-3-sem-escrever-codigo-parte-1\/","title":{"rendered":"Criando um aplicativo com OpenLayers 3 sem escrever c\u00f3digo (Parte 1)"},"content":{"rendered":"

Construir uma aplica\u00e7\u00e3o web para exibir seus dados pode ser uma tarefa dif\u00edcil se voc\u00ea n\u00e3o for um desenvolvedor, especialmente se voc\u00ea n\u00e3o est\u00e1 familiarizado com os conceitos de SIG.<\/p>\n

A equipe do OpenGeo Suite (Boundless<\/a>) tem buscado maneiras de ajudar seus clientes a construir mapas na web, aproveitando todas as funcionalidades agora dispon\u00edveis com o lan\u00e7amento do OpenLayers 3<\/a> sem a necessidade de trabalhar a partir da linha de c\u00f3digo.<\/p>\n

Um dos mecanismos desenvolvido para isto foi um plugin para o QGIS<\/a>. Este plugin permite voc\u00ea publicar um projeto feito no QGIS como um aplicativo web OpenLayers 3 (“OL3”), basta seguir algumas instru\u00e7\u00f5es e preencher alguns formul\u00e1rios. Isso n\u00e3o requer nenhuma habilidade de codifica\u00e7\u00e3o.<\/p>\n

O objetivo deste post \u00e9 orient\u00e1-lo atrav\u00e9s dos passos necess\u00e1rios para transformar seu projeto do QGIS em uma aplica\u00e7\u00e3o web completa, tudo a partir do QGIS usando o plugin “Web App Builder”. A inten\u00e7\u00e3o \u00e9 demonstrar a simplicidade de constru\u00e7\u00e3o de um aplicativo sem a necessidade de recorrer ao c\u00f3digo.<\/p>\n

Para come\u00e7ar, voc\u00ea precisa instalar QGIS 2.8.2 (vers\u00e3o para o OpenGeo Suite). Esta op\u00e7\u00e3o est\u00e1 dispon\u00edvel (usando o Windows ou Mac OS X 10.9 e superior) em http:\/\/boundlessgeo.com\/solutions\/solutions-software\/qgis\/<\/a><\/p>\n

Uma vez instalado o Web App Builder \u00e9 acess\u00edvel atrav\u00e9s dos menu de “Plugins”.<\/p>\n

\"webapp1\"<\/p>\n

No entanto, antes que possamos criar um aplicativo precisamos de um projeto QGIS com os dados de apoio. Neste exemplo iremos utilizar alguns dados de inunda\u00e7\u00f5es em Boulder County, Colorado (2013) para criar um visualizador de eventos de inunda\u00e7\u00e3o. Ser\u00e3o carregadas tr\u00eas camadas – Total de precipita\u00e7\u00e3o, as parcelas com inunda\u00e7\u00f5es e as \u00e1reas inundadas.<\/p>\n

Agora que temos o nosso projeto QGIS vamos construir um webapp!<\/p>\n

Primeiro, escolha o menu Plugins -> Boundless -> Web App Builder. Isso far\u00e1 com que abra a tela do Web App Builder para nos ajudar a definir a nossa aplica\u00e7\u00e3o.<\/p>\n

\"Miller2_1\"<\/p>\n

Esta janela vai nos ajudar no processo de cria\u00e7\u00e3o do nosso aplicativo. Vamos come\u00e7ar pelo t\u00edtulo do nosso aplicativo, escolhendo o \u00edcone do logotipo, e selecionando um tema. Os temas podem ser ajustados para atender \u00e0s suas necessidades espec\u00edficas, usando o bot\u00e3o “Configure theme”. Neste exemplo vamos usar os valores padr\u00e3o para o tema b\u00e1sico.<\/p>\n

Sobre a aba “Base Layers”, podemos escolher qual servi\u00e7o de mapa base que queremos usar e tamb\u00e9m selecionar as camadas que podem ser usadas como sobreposi\u00e7\u00f5es. Para esta aplica\u00e7\u00e3o, vamos usar o MapQuest como a nossa camada de base para ajudar a mostrar o evento de chuva que possa ter ocorrido e fornecer ao usu\u00e1rio um contexto melhor do que um mapa de rodovia. As camadas de sobreposi\u00e7\u00e3o proporcionam acesso a servi\u00e7os que incluem clima quase em tempo real, rotulagem adicional, etc. Para este exemplo vamos usar o MapQuest Labels como servi\u00e7o de sobreposi\u00e7\u00e3o para mostrar nomes de cidades, estradas principais, etc. Agora vamos definir as camadas que desejamos colocar sobre o mapa base.<\/p>\n

\"webapp4\"<\/p>\n

Na guia “Layers” vamos configurar as camadas de dados que ser\u00e3o usadas em nossa aplica\u00e7\u00e3o. Por padr\u00e3o, todas as camadas que foram adicionadas ao nosso projeto QGIS, com exce\u00e7\u00e3o das camadas base, vai aparecer na lista. No nosso caso temos apenas tr\u00eas camadas – se voc\u00ea tiver muitas camadas pode procur\u00e1-las usando a barra de busca na parte superior da caixa de di\u00e1logo. Queremos mostrar todas as camadas por isso vamos deixar todas marcadas.<\/p>\n

\"webapp5-939x1024\"<\/p>\n

No pr\u00f3ximo post<\/a> daremos continuidade na cria\u00e7\u00e3o da nossa aplica\u00e7\u00e3o web, n\u00e3o perca!<\/p>\n","protected":false},"excerpt":{"rendered":"

Construir uma aplica\u00e7\u00e3o web para exibir seus dados pode ser uma tarefa dif\u00edcil se voc\u00ea n\u00e3o for um desenvolvedor, especialmente se voc\u00ea n\u00e3o est\u00e1 familiarizado com os conceitos de SIG. A equipe do OpenGeo Suite (Boundless) tem buscado maneiras de… Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":5091,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,132,258],"tags":[223,250,260],"class_list":["post-5088","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","category-openlayers","category-qgis","tag-gis","tag-openlayers","tag-qgis"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5088","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=5088"}],"version-history":[{"count":13,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5088\/revisions"}],"predecessor-version":[{"id":5133,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5088\/revisions\/5133"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/5091"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=5088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=5088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=5088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}