{"id":5389,"date":"2016-05-19T07:30:42","date_gmt":"2016-05-19T10:30:42","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=5389"},"modified":"2016-08-12T16:39:59","modified_gmt":"2016-08-12T19:39:59","slug":"introducao-ao-openlayers-3-layers","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2016\/05\/19\/introducao-ao-openlayers-3-layers\/","title":{"rendered":"Introdu\u00e7\u00e3o ao OpenLayers 3: Layers"},"content":{"rendered":"

No \u00faltimo post <\/a>voc\u00ea teve uma vis\u00e3o inicial sobre o OpenLayers 3, neste post iremos iniciar o assunto camadas (Layers). <\/p>\n

Quando voc\u00ea adiciona uma camada ao seu mapa, os dados solicitados podem ser matriciais (raster) ou vetoriais. Voc\u00ea pode pensar em dados raster como informa\u00e7\u00f5es prestadas atrav\u00e9s de imagens de sat\u00e9lite, e vetorial como informa\u00e7\u00f5es estruturadas que podem ser processadas para exibi\u00e7\u00e3o no navegador.<\/p>\n

H\u00e1 muitos tipos de servi\u00e7os que fornecem dados raster. Esta se\u00e7\u00e3o vai lidar apenas com os que est\u00e3o em conformidade com a especifica\u00e7\u00e3o OGC Web Map Service (WMS).<\/p>\n

Vamos come\u00e7ar com um exemplo de mapa completamento e vamos modificar as camadas para que voc\u00ea possa obter uma compreens\u00e3o de como elas funcionam.<\/p>\n

D\u00ea uma olhada no seguinte c\u00f3digo que j\u00e1 utilizamos no \u00faltimo post:<\/p>\n

<!doctype html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <link rel=\"stylesheet\" href=\"ol3\/ol.css\" type=\"text\/css\">\r\n    <style>\r\n      #map {\r\n        height: 256px;\r\n        width: 512px;\r\n      }\r\n    <\/style>\r\n    <script src=\"ol3\/ol.js\" type=\"text\/javascript\"><\/script>\r\n    <title>OpenLayers 3 example<\/title>\r\n  <\/head>\r\n  <body>\r\n    <h1>My Map<\/h1>\r\n    <div id=\"map\"><\/div>\r\n    <script type=\"text\/javascript\">\r\n      var map = new ol.Map({\r\n        target: 'map',\r\n        layers: [\r\n          new ol.layer.Tile({\r\n            title: \"Global Imagery\",\r\n            source: new ol.source.TileWMS({\r\n              url: 'http:\/\/maps.opengeo.org\/geowebcache\/service\/wms',\r\n              params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}\r\n            })\r\n          })\r\n        ],\r\n        view: new ol.View({\r\n          projection: 'EPSG:4326',\r\n          center: [0, 0],\r\n          zoom: 0,\r\n          maxResolution: 0.703125\r\n        })\r\n      });\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/pre>\n
Agora vamos detalhar os m\u00e9todos utilizados na cria\u00e7\u00e3o da camada do c\u00f3digo acima:<\/p>\n
1. A classe ol.layer.Tile<\/p>\n
Atrav\u00e9s do construtor da classe ol.layer.Tile obtemos um objeto do tipo olx.layer.TileOptions<\/a>. Neste caso estamos fornecendo as informa\u00e7\u00f5es atrav\u00e9s da classe ol.source.TileWMS. Um t\u00edtulo leg\u00edvel para a camada pode ser fornecida com atrav\u00e9s do par\u00e2metro “title”, mas basicamente qualquer descri\u00e7\u00e3o pode ser utilizada como t\u00edtulo. No OpenLayers 3 h\u00e1 uma separa\u00e7\u00e3o entre as camadas e fontes (sources), enquanto que no OpenLayers 2 tudo fazia parte da camada.<\/p>\n
A classe ol.layer.Tile representa uma grade de imagens, e a ol.layer.Image representa uma \u00fanica imagem. Dependendo do tipo de camada, voc\u00ea deve usar uma fonte (source) diferente (ol.source.TileWMS ou ol.source.ImageWMS).<\/p>\n
2. A classe ol.source.TileWMS<\/p>\n
No construtor da classe ol.source.TileWMS<\/a> estamos passando dois argumentos, um \u00e9 o url do servi\u00e7o WMS, e o outro \u00e9 o params um objeto que possui os nomes de par\u00e2metros e seus valores. <\/p>\n
\"wms1\"<\/p>\n
A vers\u00e3o 1.3.0 do WMS \u00e9 a utilizada como padr\u00e3o no OpenLayers, caso seja necess\u00e1rio fornecer uma vers\u00e3o anterior, \u00e9 poss\u00edvel indic\u00e1-la no argumento params.<\/p>\n
layers: [\r\n  new ol.layer.Tile({\r\n    title: \"Global Imagery\",\r\n    source: new ol.source.TileWMS({\r\n      url: 'http:\/\/maps.opengeo.org\/geowebcache\/service\/wms',\r\n      params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}\r\n    })\r\n  })\r\n]<\/pre>\n
Este mesmo servi\u00e7o WMS oferece uma camada denominada “OpenStreetMap”. Altere o valor do par\u00e2metro LAYERS de “bluemarble” para “OpenStreetMap”. Seu c\u00f3digo da classe ol.layer.Tile deve ficar parecido com o c\u00f3digo abaixo:<\/p>\n
new ol.layer.Tile({\r\n  title: \"Global Imagery\",\r\n  source: new ol.source.TileWMS({\r\n    url: 'http:\/\/maps.opengeo.org\/geowebcache\/service\/wms',\r\n    params: {LAYERS: 'openstreetmap', VERSION: '1.1.1'}\r\n  })\r\n})<\/pre>\n
No pr\u00f3ximo post<\/a> trataremos sobre camadas utilizando a prerrogativa do cache, para uma melhor performance do seu mapa.<\/p>\n","protected":false},"excerpt":{"rendered":"
No \u00faltimo post voc\u00ea teve uma vis\u00e3o inicial sobre o OpenLayers 3, neste post iremos iniciar o assunto camadas (Layers). Quando voc\u00ea adiciona uma camada ao seu mapa, os dados solicitados podem ser matriciais (raster) ou vetoriais. Voc\u00ea pode pensar… Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":5391,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,132,25,6],"tags":[223,250],"class_list":["post-5389","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","category-openlayers","category-software","category-tecnologia","tag-gis","tag-openlayers"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5389","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=5389"}],"version-history":[{"count":15,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5389\/revisions"}],"predecessor-version":[{"id":6223,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5389\/revisions\/6223"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/5391"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=5389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=5389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=5389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}