{"id":5423,"date":"2016-05-23T07:10:47","date_gmt":"2016-05-23T10:10:47","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=5423"},"modified":"2016-08-12T16:33:57","modified_gmt":"2016-08-12T19:33:57","slug":"introducao-ao-openlayers-3-raster","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2016\/05\/23\/introducao-ao-openlayers-3-raster\/","title":{"rendered":"Introdu\u00e7\u00e3o ao OpenLayers 3: Raster"},"content":{"rendered":"

Nas se\u00e7\u00f5es anteriores, n\u00f3s exibimos camadas com base no padr\u00e3o WMS. Quando falamos em mapeamento on-line, \u00e9 importante ressaltar que ele foi amplamente popularizado pela disponibilidade de servi\u00e7os de mapas propriet\u00e1rios. O OpenLayers fornece tipos de camadas que trabalham com esses servi\u00e7os propriet\u00e1rios atrav\u00e9s da sua API.<\/p>\n

Nesta se\u00e7\u00e3o, vamos construir a partir do exemplo desenvolvido na se\u00e7\u00e3o anterior uma camada usando o Bing. Para ver como utilizar o Google Maps com o OpenLayers 3, basta clicar nesse link<\/a>. <\/p>\n

1. Bing<\/p>\n

Vamos adicionar uma camada Bing. Para isso em seu arquivo map.html, encontre onde est\u00e1 a chamada para a camada do OSM e substitua a refer\u00eancia pela classe ol.source.BingMaps conforme demonstrado abaixo:<\/p>\n

source: new ol.source.BingMaps({\r\n  imagerySet: 'Road',\r\n  key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'\r\n})<\/pre>\n
Salve as altera\u00e7\u00f5es e recarregue o arquivo map.html no seu browser: @servidor@\/map.html<\/p>\n
A API do Bing requer que voc\u00ea registre uma chave para usar com seu aplicativo. O exemplo aqui usa uma chave que voc\u00ea n\u00e3o deve usar na produ\u00e7\u00e3o. Para usar a camada do Bing na produ\u00e7\u00e3o, registre sua chave em https:\/\/www.bingmapsportal.com\/<\/a>.<\/p>\n
\"proprietary1\"<\/p>\n
Ap\u00f3s alterar seu arquivo map.html ele deve ser algo parecido com isto:<\/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      .ol-attribution a {\r\n        color: black;\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\" class=\"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            source: new ol.source.BingMaps({\r\n              imagerySet: 'Road',\r\n              key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'\r\n            })\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      });\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/pre>\n
No pr\u00f3ximo post<\/a> voc\u00ea ver\u00e1 como criar camadas a partir de vetores e qual a sua utilidade pr\u00e1tica. <\/p>\n","protected":false},"excerpt":{"rendered":"
Nas se\u00e7\u00f5es anteriores, n\u00f3s exibimos camadas com base no padr\u00e3o WMS. Quando falamos em mapeamento on-line, \u00e9 importante ressaltar que ele foi amplamente popularizado pela disponibilidade de servi\u00e7os de mapas propriet\u00e1rios. O OpenLayers fornece tipos de camadas que trabalham com… Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":5425,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,132],"tags":[223,250],"class_list":["post-5423","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\/5423","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=5423"}],"version-history":[{"count":17,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5423\/revisions"}],"predecessor-version":[{"id":6219,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5423\/revisions\/6219"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/5425"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=5423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=5423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=5423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}