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

No \u00faltimo post<\/a>, iniciamos a cria\u00e7\u00e3o da nossa webapp a partir de um projeto do QGIS. Agora, precisamos decidir como ser\u00e3o armazenados os dados para nosso aplicativo. Escolhendo a op\u00e7\u00e3o “Connect to this layer using” s\u00e3o apresentados uma s\u00e9rie de op\u00e7\u00f5es.<\/p>\n

\"webapp6\"<\/p>\n

Os dados que temos para o nosso visualizador de eventos de inunda\u00e7\u00e3o \u00e9 uma amostra pequena, por isso usar diretamente o arquivo neste caso \u00e9 quest\u00e3o de bom senso. Se tiv\u00e9ssemos um conjunto de dados maior ou dados din\u00e2micos poder\u00edamos escolher para armazen\u00e1-los no GeoServer ou PostGIS. No nosso caso, a simbologia ser\u00e1 criado no aplicativo usando simbologia do OL3 que ser\u00e1 renderizada pela pr\u00f3pria aplica\u00e7\u00e3o.<\/p>\n

Agora que n\u00f3s definimos como queremos conectar as camadas precisamos decidir se queremos popups, e qual o conte\u00fado que gostar\u00edamos de ter apresentado nele. Clicando em “Edit” abre a janela do editor de pop-up. Ela est\u00e1 inicialmente em branco, mas clicando em “Add all atributes” ir\u00e1 preench\u00ea-lo com a tag [field_name] para cada campo da camada.<\/p>\n

\"webapp7\"<\/p>\n

No nosso caso, vamos ter um pop-up que mostra o nome do fluxo para as \u00e1reas inundadas, sem pop-up para as parcelas, e a camada de precipita\u00e7\u00e3o total ter\u00e1 um pop-up que mostra a precipita\u00e7\u00e3o m\u00ednima e m\u00e1xima para essa \u00e1rea.<\/p>\n

O pr\u00f3ximo passo \u00e9 a aba “Widgets” onde vemos um grande n\u00famero de controles, ferramentas e widgets para nossa escolha. A sele\u00e7\u00e3o de um widget ir\u00e1 adicion\u00e1-la ao aplicativo, enquanto o bot\u00e3o direito sobre um widget vai lhe dar as op\u00e7\u00f5es de configura\u00e7\u00e3o do mesmo.<\/p>\n

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

H\u00e1 obviamente muitas op\u00e7\u00f5es nesta tela. Para efeitos desta postagem vamos usar apenas os controles padr\u00e3o e configurar a lista de camadas (Layer List) para permitir que o usu\u00e1rio mude a opacidade das mesmas.<\/p>\n

\"webapp9\"<\/p>\n

Vamos adicionar um “About Painel” para o aplicativo e editar o conte\u00fado para que os usu\u00e1rios saibam mais sobre o que eles est\u00e3o visualizando.<\/p>\n

\"webapp10-826x1024\"<\/p>\n

Uma vez que tenha configurado os controles e widgets vamos para a aba “Deploy”. Esta aba \u00e9 usada para configurar as conex\u00f5es com PostGIS e GeoServer. No nosso caso, n\u00e3o estamos publicando nossos dados em qualquer PostGIS ou GeoServer, por isso podemos ignorar e ir para aba “Settings”.<\/p>\n

\"webapp11-943x1024\"<\/p>\n

A p\u00e1gina de configura\u00e7\u00f5es (Settings) nos d\u00e1 a oportunidade de definir como queremos lidar com o Extent do mapa, n\u00edveis de zoom, e estilo dos layers. Para a nossa aplica\u00e7\u00e3o, vamos aceitar todos os padr\u00f5es.<\/p>\n

Ap\u00f3s terminar de configurar nossa aplica\u00e7\u00e3o vamos visualizar o aplicativo (Preview) e ver como ficou.<\/p>\n

\"webapp13\"<\/p>\n

Nossa aplica\u00e7\u00e3o de exemplo est\u00e1 pronta! Se quisermos fazer quaisquer mudan\u00e7as podemos voltar e alterar qualquer uma das configura\u00e7\u00f5es para atender \u00e0s nossas necessidades e pr\u00e9-visualizar novamente. Uma vez que o aplicativo est\u00e1 configurado e pronto para ser publicado, clique em “Create App”. O construtor da webapp ir\u00e1 pedir-lhe um local para salvar os arquivos, criar seu aplicativo, e perguntar\u00e1 se voc\u00ea gostaria de v\u00ea-lo.<\/p>\n

N\u00f3s temos uma aplica\u00e7\u00e3o conclu\u00edda pronto para uso, executada com apenas alguns cliques do mouse e preenchimento de algumas telas. Em nenhum momento durante este processo foi necess\u00e1rio codifica\u00e7\u00e3o.<\/p>\n

O projeto “2013 Boulder County Flood Viewer” pode ser visto completo em http:\/\/wilson.boundlessps.com:8080\/BoulderCountyFloods2013\/<\/a><\/p>\n

Esta publica\u00e7\u00e3o \u00e9 uma tradu\u00e7\u00e3o livre do post “Building an OpenLayers 3 Web App Without Writing Code” publicado pela Boundless.<\/p>\n

Fonte: Boundless<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

No \u00faltimo post, iniciamos a cria\u00e7\u00e3o da nossa webapp a partir de um projeto do QGIS. Agora, precisamos decidir como ser\u00e3o armazenados os dados para nosso aplicativo. Escolhendo a op\u00e7\u00e3o “Connect to this layer using” s\u00e3o apresentados uma s\u00e9rie de… Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":5105,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,132,258],"tags":[223,250,260],"class_list":["post-5103","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\/5103","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=5103"}],"version-history":[{"count":17,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5103\/revisions"}],"predecessor-version":[{"id":5132,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5103\/revisions\/5132"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/5105"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=5103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=5103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=5103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}