{"id":1179,"date":"2008-12-23T10:00:42","date_gmt":"2008-12-23T13:00:42","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=1179"},"modified":"2008-12-23T10:00:42","modified_gmt":"2008-12-23T13:00:42","slug":"introducao-ao-openlayers-parte-2","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2008\/12\/23\/introducao-ao-openlayers-parte-2\/","title":{"rendered":"Introdu\u00e7\u00e3o ao OpenLayers: Layers"},"content":{"rendered":"<p>Come\u00e7amos ontem uma s\u00e9rie de posts sobre o OpenLayers, onde iremos abordar as funcionalidades dispon\u00edveis nesse framework. Ontem come\u00e7amos pelo b\u00e1sico, apresentando a estrutura de um mapa e suas camadas, hoje trataremos mais a fundo as propriedades das camadas (layers).<\/p>\n<p><strong>1.<\/strong> M\u00f3dulo 2: Camadas<\/p>\n<p>Cada mapa no OpenLayers poder ter uma ou mais camadas. A camada cont\u00e9m toda a informa\u00e7\u00e3o espacial que o usu\u00e1rio visualiza no mapa.<\/p>\n<p>Existem diferentes tipos de camadas. Algumas camadas podem ser solicitadas como &#8220;tiles&#8221;, ou seja, peda\u00e7os que ir\u00e3o compor o mapa. Temos dois exemplo para isto os layers utilizados atrav\u00e9s do protocolo WMS (<em>Web Map Service<\/em>), e tamb\u00e9m os layers propriet\u00e1rios como os do Google e Yahoo. Outro forma \u00e9 carregar os dados da camada, para isso \u00e9 poss\u00edvel utilizar o padr\u00e3o WFS (<em>Web Feature Service<\/em>), que retorna todas as informa\u00e7\u00f5es dispon\u00edveis.<\/p>\n<p><strong>2.<\/strong> Camadas WMS<\/p>\n<p>O arquivo <em>1-basico.html<\/em> criado no m\u00f3dulo anterior usa uma camada WMS. WMS \u00e9 um acr\u00f4nimo para Web Map Service. Ele \u00e9 um protocolo definido pela OGC (Open Geospatial Consortium) para comunica\u00e7\u00e3o de dados espaciais renderizados como imagem.<\/p>\n<p>Uma camada WMS \u00e9 criado no OpenLayers atrav\u00e9s de quatro par\u00e2metros, sendo que o \u00faltimo \u00e9 opcional.<\/p>\n<ul>\n<li>  name &nbsp;&nbsp;&nbsp; {String} Nome da camada\n<li>url &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\t{String} URL do servi\u00e7o WMS (e.g.  http:\/\/wms.jpl.nasa.gov\/wms.cgi)\n    <\/li>\n<li>params \t{Object} Um objeto com informa\u00e7\u00f5es para o m\u00e9todo GetMap\n    <\/li>\n<li>options\t{Ojbect} Op\u00e7\u00f5es extra de configura\u00e7\u00e3o\n  <\/li>\n<\/li>\n<\/ul>\n<p>Mais informa\u00e7\u00f5es sobre a classe WMS Layers podem ser obtidas na <a href=\"http:\/\/dev.openlayers.org\/apidocs\/files\/OpenLayers\/Layer\/WMS-js.html\" target=\"_blank\">documenta\u00e7\u00e3o online<\/a>. Voc\u00ea pode tamb\u00e9m realizar algumas modifica\u00e7\u00f5es no seu exemplo trocando as camadas para isso voc\u00ea pode acessar o site <a href=\"http:\/\/wms-sites.com\/\" target=\"_blank\">WMS Site<\/a>, e escolher as layers que deseja visualizar no seu mapa. Use o arquivo <em>1-basico.html <\/em>para isso, ou crie um novo.<\/p>\n<p><strong>3.<\/strong> Camadas Comerciais<\/p>\n<p>Al\u00e9m das camadas que s\u00e3o de acesso p\u00fablico, voc\u00ea pode tamb\u00e9m adicionar ao seu mapa camadas comerciais. O OpenLayers d\u00e1 suporte as camadas do Google Maps, Yahoo Maps, Virtual Earth e MultiMap.<\/p>\n<p>Veja o exemplo abaixo, como ficaria a adi\u00e7\u00e3o de uma camada do Google Maps no seu mapa (Clique na imagem para v\u00ea-la no tamanho real).<\/p>\n<p><a href=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_camadas_01.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_camadas_01.png\" alt=\"Clique para ver no tamanho real\" title=\"Clique para ver no tamanho real\" width=\"500\" height=\"410\" class=\"alignnone size-full wp-image-1452\" border=0 srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_camadas_01.png 738w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_camadas_01-300x246.png 300w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_camadas_01-600x492.png 600w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p><strong>4.<\/strong> Camadas WFS<\/p>\n<p>Nesta se\u00e7\u00e3o criaremos camadas WFS. WFS \u00e9 um acr\u00f4nimo para Web Feature Server, um padr\u00e3o da OGC. Ao inv\u00e9s do WFS retornar imagens ele retorna dados serializ\u00e1veis, no padr\u00e3o GML, dos vetores. Camadas solicitadas por WFS no OpenLayers s\u00e3o transformadas em pontos, linhas, pol\u00edgonos no seu navegador. Veja na imagem abaixo como ficaria um mapa com uma camada WFS: <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_camadas_02.png\" alt=\"Camada WFS\" title=\"Camada WFS\" width=\"477\" height=\"602\" class=\"alignnone size-full wp-image-1456\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_camadas_02.png 477w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_camadas_02-237x300.png 237w\" sizes=\"auto, (max-width: 477px) 100vw, 477px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Come\u00e7amos ontem uma s\u00e9rie de posts sobre o OpenLayers, onde iremos abordar as funcionalidades dispon\u00edveis nesse framework. Ontem come\u00e7amos pelo b\u00e1sico, apresentando a estrutura de um mapa e suas camadas, hoje trataremos mais a fundo as propriedades das camadas (layers)&#8230;. <a class=\"more-link\" href=\"https:\/\/www.fernandoquadro.com.br\/html\/2008\/12\/23\/introducao-ao-openlayers-parte-2\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":275,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[132,30],"tags":[144],"class_list":["post-1179","post","type-post","status-publish","format-standard","hentry","category-openlayers","category-tutorial","tag-introducao-openlayers"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/1179","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=1179"}],"version-history":[{"count":16,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/1179\/revisions"}],"predecessor-version":[{"id":1461,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/1179\/revisions\/1461"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=1179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=1179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=1179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}