{"id":5410,"date":"2016-05-20T07:30:23","date_gmt":"2016-05-20T10:30:23","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=5410"},"modified":"2016-08-12T16:35:54","modified_gmt":"2016-08-12T19:35:54","slug":"introducao-ao-openlayers-3-cache","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2016\/05\/20\/introducao-ao-openlayers-3-cache\/","title":{"rendered":"Introdu\u00e7\u00e3o ao OpenLayers 3: Cache"},"content":{"rendered":"

Por padr\u00e3o, uma camada faz requisi\u00e7\u00f5es para imagens com tamanho de 256 x 256 (pixel). A medida que voc\u00ea realiza as opera\u00e7\u00f5es de pan e zoom no seu mapa, mais requisi\u00e7\u00f5es de imagens s\u00e3o executadas para preencher as \u00e1reas que voc\u00ea ainda n\u00e3o visitou. Enquanto o seu navegador ir\u00e1 armazenar em cache algumas imagens solicitadas, bastante trabalho de processamento \u00e9 normalmente necess\u00e1ria para o servidor renderizar imagens dinamicamente.<\/p>\n

Para essas requisi\u00e7\u00f5es \u00e9 poss\u00edvel que o servidor armazene em cache essa requisi\u00e7\u00f5es de imagens e retorne o resultado em cache a pr\u00f3xima vez que voc\u00ea (ou outra pessoa) visita na mesma \u00e1rea – o que resulta em um melhor desempenho do seu mapa.<\/p>\n

1. ol.source.XYZ <\/strong><\/p>\n

A especifica\u00e7\u00e3o Web Map Service (WMS) permite uma grande flexibilidade em termos do que um cliente pode solicitar. Sem restri\u00e7\u00f5es, o que torna o armazenamento em cache dif\u00edcil ou imposs\u00edvel na pr\u00e1tica.<\/p>\n

No extremo oposto, um servi\u00e7o pode oferecer tiles um conjunto fixo de n\u00edveis de zoom e apenas por um determinado extent (Bounding Box). Estes podem ser generalizados como camadas com uma fonte XYZ<\/a> – voc\u00ea pode considerar X e Y para indicar a coluna e linha e Z para representar o n\u00edvel de zoom.<\/p>\n

2. ol.source.OSM<\/strong><\/p>\n

O OpenStreetMap (OSM)<\/a> \u00e9 um esfor\u00e7o para mapear e divulgar dados de mapas dispon\u00edveis gratuitamente para o mundo. O OSM fornece algumas representa\u00e7\u00f5es diferentes de seus dados como conjuntos de tiles em cache. Estas representa\u00e7\u00f5es est\u00e3o em conformidade com a base o modelo XYZ e podem ser utilizadas em um mapa com Openlayers. O ol.source.OSM fornece acesso a essa camada.<\/p>\n

Agora abra o arquivo map.html, utilizado no post anterior<\/a> em um editor de texto e altere o c\u00f3digo de inicializa\u00e7\u00e3o do mapa para se parecer com o seguinte:<\/p>\n

<script>\r\n  var map = new ol.Map({\r\n    target: 'map',\r\n    layers: [\r\n      new ol.layer.Tile({\r\n        source: new ol.source.OSM()\r\n      })\r\n    ],\r\n    view: new ol.View({\r\n      center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'),\r\n      zoom: 9\r\n    }),\r\n    controls: ol.control.defaults({\r\n      attributionOptions: {\r\n        collapsible: false\r\n      }\r\n    })\r\n  });\r\n<\/script><\/pre>\n
No elemento head <\/strong>do mesmo documento, adicione algumas declara\u00e7\u00f5es de estilo para camada.<\/p>\n
<style>\r\n    #map {\r\n        width: 512px;\r\n        height: 256px;\r\n    }\r\n    .ol-attribution a {\r\n        color: black;\r\n    }\r\n<\/style><\/pre>\n
Salve as altera\u00e7\u00f5es e atualize a p\u00e1gina no seu navegador: @servidor@\/map.html<\/p>\n
\"cached1\"<\/p>\n
No pr\u00f3ximo post<\/a> estaremos falando sobre o uso de camadas raster no OpenLayers 3. N\u00e3o perca!<\/p>\n","protected":false},"excerpt":{"rendered":"
Por padr\u00e3o, uma camada faz requisi\u00e7\u00f5es para imagens com tamanho de 256 x 256 (pixel). A medida que voc\u00ea realiza as opera\u00e7\u00f5es de pan e zoom no seu mapa, mais requisi\u00e7\u00f5es de imagens s\u00e3o executadas para preencher as \u00e1reas que… Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":5411,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,132],"tags":[223,250],"class_list":["post-5410","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","category-openlayers","tag-gis","tag-openlayers"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5410","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=5410"}],"version-history":[{"count":12,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5410\/revisions"}],"predecessor-version":[{"id":6221,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5410\/revisions\/6221"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/5411"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=5410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=5410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=5410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}