{"id":8761,"date":"2020-04-13T07:30:38","date_gmt":"2020-04-13T10:30:38","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=8761"},"modified":"2020-04-07T11:44:25","modified_gmt":"2020-04-07T14:44:25","slug":"publicar-dados-do-postgis-com-pg-tileserv","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2020\/04\/13\/publicar-dados-do-postgis-com-pg-tileserv\/","title":{"rendered":"Publicar dados do PostGIS com pg_tileserv"},"content":{"rendered":"<p>Nos \u00faltimos posts falamos bastante sobre <a href=\"https:\/\/en.wikipedia.org\/wiki\/Vector_tiles\" rel=\"noopener noreferrer\" target=\"_blank\">vector tiles<\/a>, que mapas belos e responsivos s\u00e3o melhor constru\u00eddos usando essa tecnologia e que o PostgreSQL com PostGIS podem produzir vector tiles &#8220;<a href=\"https:\/\/postgis.net\/docs\/ST_AsMVT.html\" rel=\"noopener noreferrer\" target=\"_blank\"><em>on-the-fly<\/em><\/a>&#8220;.  <\/p>\n<p>No entanto, para usar vector tiles em um mapa bonito e responsivo, voc\u00ea precisa acessar esses tiles atrav\u00e9s do protocolo HTTP e solicit\u00e1-los usando uma URL no <a href=\"https:\/\/en.wikipedia.org\/wiki\/Tiled_web_map\" rel=\"noopener noreferrer\" target=\"_blank\">formato XYZ<\/a>. <\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/architecture_spatial_tile.png\" alt=\"\" width=\"528\" height=\"609\" class=\"aligncenter size-full wp-image-8762\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/architecture_spatial_tile.png 528w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/architecture_spatial_tile-260x300.png 260w\" sizes=\"auto, (max-width: 528px) 100vw, 528px\" \/><br \/>\n<\/center><\/p>\n<p>\u00c9 poss\u00edvel voc\u00ea escrever seu pr\u00f3prio wrapper HTTP para o gerador de vector tiles do PostGIS, mas voc\u00ea n\u00e3o precisa, pois a Crunchy Data j\u00e1 fez isso por voc\u00ea.  <\/p>\n<p>O <a href=\"https:\/\/github.com\/CrunchyData\/pg_tileserv\" rel=\"noopener noreferrer\" target=\"_blank\">pg_tileserv<\/a> \u00e9 um servidor de vector tiles leve, criado especificamente para publicar tiles de um banco de dados PostgreSQL\/PostGIS, que possui os seguintes recursos:<\/p>\n<ul>\n<li>Escrito em <a href=\"https:\/\/golang.org\/\" rel=\"noopener noreferrer\" target=\"_blank\">Go<\/a> para permitir a implanta\u00e7\u00e3o simples de bin\u00e1rios sem cadeias de depend\u00eancia complexas ou problemas de vers\u00e3o de biblioteca.  <\/li>\n<li>Padr\u00f5es prontos para execu\u00e7\u00e3o, para que a implanta\u00e7\u00e3o b\u00e1sica exija apenas definir uma sequ\u00eancia de configura\u00e7\u00f5es do banco de dados e executar o programa.<\/li>\n<li>Interface web simples para explorar os servi\u00e7os de tiles publicados e visualizar os servi\u00e7os como mapas.<\/li>\n<li>Filtragem de atributos em tempo real para remover as colunas que voc\u00ea n\u00e3o deseja recuperar do servidor, para tiles menores e mais r\u00e1pidos.<\/li>\n<li>Gera\u00e7\u00e3o de tiles com base em fun\u00e7\u00f5es, para que voc\u00ea possa gerar tiles a partir de qualquer fun\u00e7\u00e3o que capte as coordenadas XYZ e produza tiles MVT.<\/li>\n<\/ul>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/tiles_serv_map_01.png\" alt=\"\" width=\"687\" height=\"460\" class=\"aligncenter size-full wp-image-8763\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/tiles_serv_map_01.png 687w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/tiles_serv_map_01-300x201.png 300w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/tiles_serv_map_01-600x402.png 600w\" sizes=\"auto, (max-width: 687px) 100vw, 687px\" \/><br \/>\n<\/center><\/p>\n<p>Deseja ver o pg_tileserv em a\u00e7\u00e3o? Aqui est\u00e1 uma demonstra\u00e7\u00e3o em cinco etapas! (A maioria das etapas envolve apenas a obten\u00e7\u00e3o de alguns dados espaciais em um banco de dados: se voc\u00ea j\u00e1 possui um banco de dados, pule para a etapa 3 e insira suas pr\u00f3prias informa\u00e7\u00f5es de conex\u00e3o com o banco de dados).  <\/p>\n<p>1. Crie um banco de dados e ative o PostGIS.<\/p>\n<pre>\r\ncreatedb postgisftw\r\npsql -d postgisftw -c 'create extension postgis'\r\n<\/pre>\n<p>2. Fa\u00e7a o download de alguns dados espaciais e carregue-os no PostGIS.<\/p>\n<pre>\r\ncurl -L -o https:\/\/www.naturalearthdata.com\/http\/\/www.naturalearthdata.com\/download\/50m\/cultural\/ne_50m_admin_0_countries.zip\r\nunzip ne_50m_admin_0_countries.zip\r\nshp2pgsql -s 4326 -D -I ne_50m_admin_0_countries | psql -d postgisftw\r\n<\/pre>\n<p>3. Baixe e descompacte o bin\u00e1rio pg_tileserv para sua plataforma:<\/p>\n<ul>\n<li><a href=\"https:\/\/postgisftw.s3.amazonaws.com\/pg_tileserv_latest_linux.zip\" rel=\"noopener noreferrer\" target=\"_blank\">Linux<\/a><\/li>\n<li><a href=\"https:\/\/postgisftw.s3.amazonaws.com\/pg_tileserv_latest_windows.zip\" rel=\"noopener noreferrer\" target=\"_blank\">Windows<\/a><\/li>\n<li><a href=\"https:\/\/postgisftw.s3.amazonaws.com\/pg_tileserv_latest_osx.zip\" rel=\"noopener noreferrer\" target=\"_blank\">Mac OS<\/a><\/li>\n<\/ul>\n<p>4. Defina a vari\u00e1vel de ambiente DATABASE_URL para apontar para seu banco de dados e inicie o servi\u00e7o. <\/p>\n<pre>\r\nexport DATABASE_URL=postgresql:\/\/postgres@localhost:5432\/postgisftw\r\n.\/pg_tileserv --debug\r\n<\/pre>\n<p>5. Acesse pelo seu navegador a URL da interface web do servi\u00e7o.<\/p>\n<pre>\r\nhttp:\/\/localhost:7800\r\n<\/pre>\n<p>6. Agora explore os dados.<\/p>\n<p>O servi\u00e7o inclui uma interface visualiz\u00e1vel e uma API baseada em JSON. O ponto de partida da API JSON \u00e9:<\/p>\n<pre>\r\nhttp:\/\/localhost:7800\/index.json\r\n<\/pre>\n<p>Voc\u00ea pode ver exemplos de mapas configurados usando a API JSON, atrav\u00e9s da interface web:<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/tiles_serv_map_02.png\" alt=\"\" width=\"728\" height=\"334\" class=\"aligncenter size-full wp-image-8764\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/tiles_serv_map_02.png 728w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/tiles_serv_map_02-300x138.png 300w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/tiles_serv_map_02-600x275.png 600w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><br \/>\n<\/center><\/p>\n<p>Usando os dados carregados neste exemplo, a constru\u00e7\u00e3o de um mapa na web que visualiza os tiles \u00e9 t\u00e3o simples quanto apontar para a URL de origem da tile. Um mapa na web pode ser t\u00e3o pequeno quanto estes exemplos ( <a href=\"https:\/\/github.com\/CrunchyData\/pg_tileserv\/tree\/master\/examples\/leaflet\" rel=\"noopener noreferrer\" target=\"_blank\">Leaflet<\/a>, <a href=\"https:\/\/github.com\/CrunchyData\/pg_tileserv\/tree\/master\/examples\/openlayers\" rel=\"noopener noreferrer\" target=\"_blank\">Openlayers<\/a>, <a href=\"https:\/\/github.com\/CrunchyData\/pg_tileserv\/tree\/master\/examples\/mapbox-gl-js\" rel=\"noopener noreferrer\" target=\"_blank\">Mapbox GL JS<\/a>):  <\/p>\n<pre>\r\n&lt;html&nbsp;lang=\"en\"&gt;\r\n&lt;head&gt;\r\n&lt;meta&nbsp;charset=\"utf-8\"&gt;\r\n&lt;title&gt;Vector&nbsp;Tiles&nbsp;in&nbsp;Leaflet&lt;\/title&gt;\r\n\r\n&lt;!--&nbsp;CSS&nbsp;for&nbsp;Leaflet&nbsp;map&nbsp;&nbsp;--&gt;\r\n&lt;link&nbsp;rel=\"stylesheet\"&nbsp;href=\"https:\/\/unpkg.com\/leaflet@1.5.1\/dist\/leaflet.css\"\r\nintegrity=\"sha512-xwE\/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==\"\r\ncrossorigin=\"\"&nbsp;\/&gt;\r\n\r\n&lt;!--&nbsp;JS&nbsp;for&nbsp;Leaflet&nbsp;map&nbsp;&nbsp;--&gt;\r\n&lt;script&nbsp;src=\"https:\/\/unpkg.com\/leaflet@1.5.1\/dist\/leaflet.js\"\r\nintegrity=\"sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8\/oTtHPx9\/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==\"\r\ncrossorigin=\"\"&gt;&lt;\/script&gt;\r\n\r\n&lt;!--&nbsp;Leaflet&nbsp;plugin&nbsp;for&nbsp;vector&nbsp;tiles&nbsp;support&nbsp;--&gt;\r\n&lt;script&nbsp;type=\"text\/javascript\"&nbsp;&nbsp;src=\"https:\/\/unpkg.com\/leaflet.vectorgrid@1.2.0\"&gt;&lt;\/script&gt;\r\n\r\n&lt;!--&nbsp;Set&nbsp;up&nbsp;a&nbsp;full-screen&nbsp;map&nbsp;--&gt;\r\n&lt;style&gt;\r\nhtml,&nbsp;body,&nbsp;#map&nbsp;{&nbsp;height:&nbsp;100%;&nbsp;width:&nbsp;100%;&nbsp;}\r\nbody&nbsp;{&nbsp;padding:&nbsp;0;&nbsp;margin:&nbsp;0;&nbsp;}\r\n#map&nbsp;{&nbsp;z-index:&nbsp;1;&nbsp;}\r\n&lt;\/style&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;!--&nbsp;Put&nbsp;the&nbsp;map&nbsp;in&nbsp;this&nbsp;element&nbsp;--&gt;\r\n&lt;div&nbsp;id=\"map\"&gt;&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\n\/\/&nbsp;Leaflet&nbsp;map&nbsp;object\r\nvar&nbsp;map&nbsp;=&nbsp;L.map('map').setView([0,&nbsp;0],&nbsp;2);\r\n\r\n\/\/&nbsp;Add&nbsp;a&nbsp;base&nbsp;map&nbsp;layer&nbsp;to&nbsp;the&nbsp;map\r\nvar&nbsp;baseUrl&nbsp;=&nbsp;\"https:\/\/maps.wikimedia.org\/osm-intl\/{z}\/{x}\/{y}.png\";\r\nvar&nbsp;baseLayer&nbsp;=&nbsp;L.tileLayer(baseUrl).addTo(map);\r\n\r\n\/\/&nbsp;Add&nbsp;the&nbsp;tile&nbsp;layer&nbsp;to&nbsp;the&nbsp;map\r\n\/\/&nbsp;https:\/\/www.naturalearthdata.com\/http\/\/www.naturalearthdata.com\/download\/50m\/cultural\/ne_50m_admin_0_countries.zip\r\nvar&nbsp;vectorServer&nbsp;=&nbsp;\"http:\/\/localhost:7800\/\";\r\nvar&nbsp;vectorLayerId&nbsp;=&nbsp;\"public.ne_50m_admin_0_countries\";\r\nvar&nbsp;vectorUrl&nbsp;=&nbsp;vectorServer&nbsp;+&nbsp;vectorLayerId&nbsp;+&nbsp;\"\/{z}\/{x}\/{y}.pbf\";\r\nvar&nbsp;vectorTileStyling&nbsp;=&nbsp;{};\r\n\/\/&nbsp;Rendering&nbsp;options\r\nvectorTileStyling[vectorLayerId]&nbsp;=&nbsp;{\r\n\"fill\":&nbsp;true,\r\n\"fillColor\":&nbsp;\"green\",\r\n\"fillOpacity\":&nbsp;0.1,\r\n\"color\":&nbsp;\"green\",\r\n\"opacity\":&nbsp;0.7,\r\n\"weight\":&nbsp;2\r\n};\r\nvar&nbsp;vectorTileOptions&nbsp;=&nbsp;{\r\n\"rendererFactory\":&nbsp;L.canvas.tile,\r\n\"vectorTileLayerStyles\":&nbsp;vectorTileStyling\r\n};\r\nvar&nbsp;vectorLayer&nbsp;=&nbsp;L.vectorGrid.protobuf(vectorUrl,&nbsp;vectorTileOptions).addTo(map);\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>O c\u00f3digo acima, vai gerar um mapa assim:<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/map_tile_serv.png\" alt=\"\" width=\"748\" height=\"461\" class=\"aligncenter size-full wp-image-8767\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/map_tile_serv.png 748w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/map_tile_serv-300x185.png 300w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2020\/03\/map_tile_serv-600x370.png 600w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><br \/>\n<\/center><\/p>\n<p>Fonte: <a href=\"https:\/\/info.crunchydata.com\/blog\/crunchy-spatial-tile-serving\" rel=\"noopener noreferrer\" target=\"_blank\">Crunchy Data Blog<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nos \u00faltimos posts falamos bastante sobre vector tiles, que mapas belos e responsivos s\u00e3o melhor constru\u00eddos usando essa tecnologia e que o PostgreSQL com PostGIS podem produzir vector tiles &#8220;on-the-fly&#8220;. No entanto, para usar vector tiles em um mapa bonito&#8230; <a class=\"more-link\" href=\"https:\/\/www.fernandoquadro.com.br\/html\/2020\/04\/13\/publicar-dados-do-postgis-com-pg-tileserv\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":275,"featured_media":8769,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[212,346],"class_list":["post-8761","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","tag-postgis","tag-vector-tiles"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8761","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=8761"}],"version-history":[{"count":9,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8761\/revisions"}],"predecessor-version":[{"id":8781,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8761\/revisions\/8781"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/8769"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=8761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=8761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=8761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}