{"id":5152,"date":"2016-05-04T07:35:47","date_gmt":"2016-05-04T10:35:47","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=5152"},"modified":"2019-07-16T10:12:37","modified_gmt":"2019-07-16T13:12:37","slug":"publicando-mapa-com-dados-do-openstreetmap-parte-2","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2016\/05\/04\/publicando-mapa-com-dados-do-openstreetmap-parte-2\/","title":{"rendered":"Publicando mapa com dados do OpenStreetMap (Parte 2)"},"content":{"rendered":"

No \u00faltimo post<\/a> baixamos os dados do OpenStreetMap<\/a> e os carregamos no banco de dados PostgreSQL\/PostGIS. Hoje vamos configurar esses dados no GeoServer<\/a> e depois public\u00e1-los atrav\u00e9s de uma aplica\u00e7\u00e3o com OpenLayers 3<\/a>.<\/p>\n

N\u00f3s iremos configurar nossa base de dados, e as defini\u00e7\u00f5es de estilo em um \u00fanico “workspace” para facilitar a gest\u00e3o da informa\u00e7\u00e3o. Entre no GeoServer, e crie um novo workspace com o nome osm<\/strong>.<\/p>\n

\"workspace\"<\/p>\n

Precisamos conectar o GeoServer ao nosso banco de dados PostGIS que cont\u00e9m todas as nossas informa\u00e7\u00f5es, e definir uma nova Store (PostGIS).<\/p>\n

\"datastore\"<\/p>\n

1. Escolha osm <\/strong>como workspace
\n2. Use openstreetmap <\/strong>como o nome da Store
\n3. Adicione os outros par\u00e2metros de conex\u00e3o com o banco de dados<\/p>\n

A constru\u00e7\u00e3o de um produto cartogr\u00e1fico de 25 camadas \u00e9 uma tarefa complexa, ent\u00e3o vamos configurar as camadas e os estilos. Para isso voc\u00ea deve fazer o download do arquivo sld.zip<\/a>, que cont\u00e9m todos os estilos.<\/p>\n

Agora, h\u00e1 duas abordagens para aplicar os estilos, a abordagem manual e uma abordagem autom\u00e1tica. Para este exemplo, utilizaremos o modo manual que se aplica a todos os sistemas operacionais (Windows, Linux e Mac), mas em outro post mostraremos como realizar o processo de forma autom\u00e1tica.<\/p>\n

Para cada arquivo SLD no diret\u00f3rio, voc\u00ea deve realizar os seguintes passos:<\/p>\n

1. V\u00e1 para op\u00e7\u00e3o Styles no menu
\n     1.1 Adicionar um novo estilo, usando o nome do seu arquivo de SLD
\n     1.2 Selecione o workspace osm.
\n     1.3 Carregar ou copiar o conte\u00fado do arquivo SLD no editor.
\n     1.4 Salvar.
\n2. V\u00e1 para op\u00e7\u00e3o Layers no menu
\n     2.1 Adicionar um novo recurso da Store openstreetmap.
\n     2.2 Selecione a tabela que corresponde ao seu arquivo SLD.
\n     2.3 Calcular os limites (Bounding Box).
\n     2.4 V\u00e1 at\u00e9 a aba “Publishing”.
\n     2.5 Escolha como o estilo padr\u00e3o, o novo estilo que voc\u00ea acabou de criar e que tem o mesmo nome da camada.
\n     2.6 Salvar.<\/p>\n

Voc\u00ea deve repetir esse processo para todos os arquivos SLD, e ao final do processo voc\u00ea ter\u00e1 seu estilo e suas camadas configuradas no GeoServer, clique sobre as op\u00e7\u00f5es Style e Layers no menu para ver os resultados.<\/p>\n

\"layers\"<\/p>\n

\"styles\"<\/p>\n

Agora temos 25 camadas, todas muito bem decoradas… mas n\u00e3o queremos 25 camadas, queremos um mapa!<\/p>\n

Agora vamos construir um grupo de camadas, indo na op\u00e7\u00e3o “Layer Group” no menu para criar um grupo de camadas chamado osm<\/strong>, em seguida, siga a imagem abaixo para acrescentar e ordenar as camadas.<\/p>\n

\"layergroup\"<\/p>\n

Agora que todas as camadas, estilos e grupos est\u00e3o configurados voc\u00ea pode ver o resultado! V\u00e1 para op\u00e7\u00e3o “Layer Preview” no menu e encontre a camada osm, provavelmente estar\u00e1 na segunda p\u00e1gina de resultados.<\/p>\n

\"layerpreview\"<\/p>\n

Para abri-lo clique em “Go” ap\u00f3s selecionar a op\u00e7\u00e3o OpenLayers no campo View e voc\u00ea vai ver o resultado do nosso trabalho.<\/p>\n

\"map2\"<\/p>\n

Agora que j\u00e1 conferimos nossas configura\u00e7\u00f5es, vamos criar uma aplica\u00e7\u00e3o utilizando o OpenLayers 3 para que
\npossamos publicar nossas informa\u00e7\u00f5es atrav\u00e9s de uma interface web amig\u00e1vel.<\/p>\n

Abaixo segue um c\u00f3digo para uma simples aplica\u00e7\u00e3o OpenLayers 3 que usa o “Layer Group” osm como um elemento do mapa base.<\/p>\n

\r\n<!doctype html>\r\n<html lang=\"en\">\r\n   <head>\r\n    <link rel=\"stylesheet\" href=\"http:\/\/openlayers.org\/en\/v3.0.0\/css\/ol.css\" type=\"text\/css\">\r\n    <style>\r\n      .map {\r\n        height: 600px;\r\n    width: 100%;\r\n      }\r\n    <\/style>\r\n    <script src=\"http:\/\/openlayers.org\/en\/v3.0.0\/build\/ol.js\" type=\"text\/javascript\"><\/script>\r\n    <title>OpenStreetMap Base<\/title>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"map\" class=\"map\"><\/div>\r\n    <script type=\"text\/javascript\">\r\n      var map = new ol.Map({\r\n        target: 'map',\r\n        \/** Display map in web mercator *\/\r\n        layers: [\r\n          new ol.layer.Tile({\r\n            source: new ol.source.TileWMS({\r\n              \/** Note use of workspace osm in the WMS url *\/\r\n              url: 'http:\/\/localhost:8080\/geoserver\/wms',\r\n              projection: 'EPSG:3857',\r\n              extent: [-20037508.34,-20037508.34,20037508.34,20037508.34],\r\n              params: {\r\n                \/** Workspace spec'ed above means we don't need it here *\/\r\n                'LAYERS': 'osm',\r\n                \/** PNG for street maps, JPG for aerials *\/\r\n                'FORMAT': 'image\/png',\r\n                'TILED' : 'true'\r\n              },\r\n              \/** @type {ol.source.wms.ServerType} *\/\r\n              serverType: 'geoserver'\r\n            })\r\n          })\r\n        ],\r\n    view: new ol.View({\r\n          \/** Coordinates in lon\/lat, easy to understand, transform to web mercator *\/\r\n          center: ol.proj.transform([-123.36310, 48.42484], 'EPSG:4326', 'EPSG:3857'),\r\n          zoom: 14\r\n        })\r\n      });\r\n    <\/script>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
Este post \u00e9 uma tradu\u00e7\u00e3o e adapta\u00e7\u00e3o livre do post “Publishing an OpenStreetMap” publicado no site da Boundless.<\/p>\n
Fonte: Boundless<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
No \u00faltimo post baixamos os dados do OpenStreetMap e os carregamos no banco de dados PostgreSQL\/PostGIS. Hoje vamos configurar esses dados no GeoServer e depois public\u00e1-los atrav\u00e9s de uma aplica\u00e7\u00e3o com OpenLayers 3. N\u00f3s iremos configurar nossa base de dados,… Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":5139,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,24,132],"tags":[208,223,250,166],"class_list":["post-5152","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-geoserver","category-gis","category-openlayers","tag-geoserver","tag-gis","tag-openlayers","tag-openstreetmap"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5152","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=5152"}],"version-history":[{"count":17,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5152\/revisions"}],"predecessor-version":[{"id":8359,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5152\/revisions\/8359"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/5139"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=5152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=5152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=5152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}