{"id":5354,"date":"2016-05-18T07:54:25","date_gmt":"2016-05-18T10:54:25","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=5354"},"modified":"2016-08-12T16:41:31","modified_gmt":"2016-08-12T19:41:31","slug":"introducao-ao-openlayers-3-basico","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2016\/05\/18\/introducao-ao-openlayers-3-basico\/","title":{"rendered":"Introdu\u00e7\u00e3o ao OpenLayers 3: B\u00e1sico"},"content":{"rendered":"

Estamos iniciando hoje uma s\u00e9rie de posts que destina-se a dar uma vis\u00e3o geral sobre o OpenLayers 3 (OL3)<\/a> como uma solu\u00e7\u00e3o de mapeamento web. Os exemplos que ser\u00e3o apresentados sup\u00f5e que voc\u00ea tem um servidor HTTP em execu\u00e7\u00e3o localmente.<\/p>\n

Os posts ser\u00e3o divididos em m\u00f3dulos, e cada m\u00f3dulo tem por base as li\u00e7\u00f5es aprendidas nos m\u00f3dulos anteriores e \u00e9 projetado para construir de forma iterativa a base de conhecimento do leitor.<\/p>\n

No OpenLayers, um mapa \u00e9 um conjunto de camadas e controles para lidar com a intera\u00e7\u00e3o do usu\u00e1rio. Um mapa \u00e9 gerado com tr\u00eas ingredientes b\u00e1sicos: marca\u00e7\u00e3o, declara\u00e7\u00f5es de estilo e inicializa\u00e7\u00e3o.<\/p>\n

Vamos dar uma olhada em um exemplo totalmente funcional de um mapa com OpenLayers 3:<\/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    <title>OpenLayers 3 example<\/title>\r\n    <script src=\"ol3\/ol.js\" type=\"text\/javascript\"><\/script>\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:<\/p>\n
1. Baixe o arquivo resources.zip<\/a> e salve-o na raiz do seu servidor web.
\n2. Copie o texto acima em um novo arquivo chamado map.html , e guarde-o na raiz da pasta que voc\u00ea fez o download.
\n3. Abra o mapa em seu navegador: @servidor_url@\/map.html<\/p>\n
\"map1\"<\/p>\n
Ap\u00f3s criado com sucesso o nosso primeiro mapa, n\u00f3s vamos olhar para cada uma dessas partes com um pouco mais de detalhes.<\/p>\n
1. Markup<\/p>\n
A marca\u00e7\u00e3o para o mapa no exemplo anterior gera um \u00fanico elemento do documento:<\/p>\n
<div id=\"map\" ><\/ div><\/code><\/p>\n
Este elemento <div><\/strong> ir\u00e1 servir como cont\u00eainer para o nosso mapa. Neste caso, n\u00f3s damos ao elemento um ID para que possamos referenci\u00e1-lo como o destino de nosso mapa.<\/p>\n
2. Estilo<\/p>\n
OpenLayers vem com um estilo padr\u00e3o que especifica como os elementos relacionados com o mapa devem ser representados. N\u00f3s inclu\u00edmos esse estilo na p\u00e1gina map.html quando inserimos a seguinte linha de c\u00f3digo: <\/p>\n
<link rel = \"stylesheet\" href = \"OL3 \/ ol.css\" type = \"text \/ css\"><\/pre>\n
O OpenLayers n\u00e3o faz quaisquer suposi\u00e7\u00f5es sobre o tamanho de seu mapa. Devido a isso, seguindo o estilo padr\u00e3o, precisamos incluir pelo menos uma declara\u00e7\u00e3o de estilo para dar ao mapa um tamanho.<\/p>\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<\/pre>\n
Neste caso, estamos especificando a largura (512px) e a altura (256px). As declara\u00e7\u00f5es de estilo est\u00e3o inclu\u00eddas no elemento <head> do nosso documento. Na maioria dos casos, as declara\u00e7\u00f5es de estilo relacionados com o mapa ser\u00e1 uma parte de um arquivo de estilos (CSS).<\/p>\n
3. Inicializa\u00e7\u00e3o<\/p>\n
O pr\u00f3ximo passo na gera\u00e7\u00e3o de seu mapa \u00e9 incluir o c\u00f3digo de inicializa\u00e7\u00e3o. No nosso caso, n\u00f3s inclu\u00edmos um elemento <script><\/strong> na parte inferior do nosso documento <body><\/strong> para fazer o trabalho, veja:<\/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.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><\/pre>\n
Devemos ressaltar que a ordem dos passos \u00e9 importante. Antes do nosso script ser executado, a biblioteca OpenLayers deve ser carregada. No nosso exemplo, a biblioteca OpenLayers \u00e9 carregada no elemento  da seguinte forma: <script src = “OL3 \/ ol.js”> <\/ script><\/strong>.<\/p>\n
Da mesma forma, o nosso c\u00f3digo de inicializa\u00e7\u00e3o do mapa (acima) n\u00e3o pode ser executado at\u00e9 que o elemento map, seja lido. Ao incluir o c\u00f3digo de inicializa\u00e7\u00e3o no final do documento <body>, garantimos que a biblioteca \u00e9 carregada antes da chamada do elemento map, fazendo que com que esteja pronta antes de gerar o nosso mapa.<\/p>\n
Vamos olhar com detalhes o que o script de inicializa\u00e7\u00e3o do mapa est\u00e1 fazendo. Nosso script cria um nova inst\u00e2ncia do objeto ol.Map com algumas op\u00e7\u00f5es de configura\u00e7\u00e3o: target: ‘map’<\/strong><\/p>\n
Neste caso, passamos o valor “map” como alvo para o construtor do mapa. <\/p>\n
Abaixo vemos a configura\u00e7\u00e3o das camadas, que cria uma camada a ser exibida no nosso mapa:<\/p>\n
layers: [\r\n  new ol.layer.Tile({\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
N\u00e3o se preocupe com a sintaxe aqui, pois a cria\u00e7\u00e3o de camadas ser\u00e1 abordada em outro m\u00f3dulo. O importante \u00e9 entender que o nosso mapa \u00e9 um conjunto de camadas, e para ver um mapa, precisamos incluir pelo menos uma camada.<\/p>\n
O passo final \u00e9 a defini\u00e7\u00e3o do modo de exibi\u00e7\u00e3o. N\u00f3s precisamos especificar uma proje\u00e7\u00e3o, um ponto central e um n\u00edvel de zoom. N\u00f3s tamb\u00e9m iremos especificar um valor para o par\u00e2metro maxResolution<\/strong> para nos certificarmos de que n\u00e3o ser\u00e3o enviadas solicita\u00e7\u00f5es fora do nosso Bounding Box<\/em>, que o GeoWebCache<\/em> n\u00e3o possa manipular.<\/p>\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})<\/pre>\n
Voc\u00ea concluiu com sucesso o seu primeiro mapa! No pr\u00f3ximo post falaremos<\/a> com mais detalhes sobre camadas.<\/p>\n","protected":false},"excerpt":{"rendered":"
Estamos iniciando hoje uma s\u00e9rie de posts que destina-se a dar uma vis\u00e3o geral sobre o OpenLayers 3 (OL3) como uma solu\u00e7\u00e3o de mapeamento web. Os exemplos que ser\u00e3o apresentados sup\u00f5e que voc\u00ea tem um servidor HTTP em execu\u00e7\u00e3o localmente…. Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":5355,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,132,80,25,6],"tags":[223,250],"class_list":["post-5354","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","category-openlayers","category-programacao","category-software","category-tecnologia","tag-gis","tag-openlayers"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5354","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=5354"}],"version-history":[{"count":33,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5354\/revisions"}],"predecessor-version":[{"id":6224,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5354\/revisions\/6224"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/5355"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=5354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=5354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=5354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}