{"id":5442,"date":"2016-05-24T07:45:09","date_gmt":"2016-05-24T10:45:09","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=5442"},"modified":"2016-08-12T16:34:25","modified_gmt":"2016-08-12T19:34:25","slug":"introducao-ao-openlayers-3-vetores","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2016\/05\/24\/introducao-ao-openlayers-3-vetores\/","title":{"rendered":"Introdu\u00e7\u00e3o ao OpenLayers 3: Vetores"},"content":{"rendered":"

Camadas vetoriais no OL3 s\u00e3o representadas pela classe ol.layer.Vector que manipula a exibi\u00e7\u00e3o de dados vetoriais no lado do cliente. Atualmente OpenLayers 3 s\u00f3 suporta renderiza\u00e7\u00e3o vetorial atrav\u00e9s do renderizador do Canvas.<\/p>\n

Vamos voltar ao exemplo WMS para obter um mapa b\u00e1sico do mundo, para isso vamos adicionar alguns recursos em uma camada vetorial.<\/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 abra o arquivo map.html em seu editor de texto e copie o conte\u00fado do exemplo WMS inicial. Salve suas altera\u00e7\u00f5es, confirme e veja como ficou no seu navegador: @servidor@\/map.html<\/p>\n
No seu c\u00f3digo de inicializa\u00e7\u00e3o do mapa adicione outra camada ap\u00f3s camada existente (c\u00f3digo abaixo). Isso ir\u00e1 adicionar uma nova camada de vetorial para o seu mapa, para este exemplo voc\u00ea precisar\u00e1 de um arquivo GeoJSON que voc\u00ea pode criar no QGIS, por exemplo:<\/p>\n
new ol.layer.Vector({\r\n  title: 'Earthquakes',\r\n  source: new ol.source.GeoJSON({\r\n    url: 'data\/layers\/7day-M2.5.json'\r\n  }),\r\n  style: new ol.style.Style({\r\n    image: new ol.style.Circle({\r\n      radius: 3,\r\n      fill: new ol.style.Fill({color: 'white'})\r\n    })\r\n  })\r\n})<\/pre>\n
Veja como ficou o nosso mapa:<\/p>\n
\"vector1\"<\/p>\n
Como os dados contidos no arquivo GeoJSON est\u00e3o em WGS84 (EPSG:4326) e a nossa camada base tamb\u00e9m, n\u00e3o \u00e9 necess\u00e1rio uma reproje\u00e7\u00e3o. No caso em que a proje\u00e7\u00e3o das camadas for diferente, isso significa que voc\u00ea deve especificar a proje\u00e7\u00e3o que deve ser utilizadas no seu mapa.<\/p>\n
No pr\u00f3ximo post<\/a> apresentaremos alguns dos controles dispon\u00edveis no OpenLayers, n\u00e3o perca!<\/p>\n","protected":false},"excerpt":{"rendered":"
Camadas vetoriais no OL3 s\u00e3o representadas pela classe ol.layer.Vector que manipula a exibi\u00e7\u00e3o de dados vetoriais no lado do cliente. Atualmente OpenLayers 3 s\u00f3 suporta renderiza\u00e7\u00e3o vetorial atrav\u00e9s do renderizador do Canvas. Vamos voltar ao exemplo WMS para obter um… Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":5046,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,132,80,25],"tags":[223,250],"class_list":["post-5442","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","category-openlayers","category-programacao","category-software","tag-gis","tag-openlayers"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5442","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=5442"}],"version-history":[{"count":9,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5442\/revisions"}],"predecessor-version":[{"id":6220,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5442\/revisions\/6220"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/5046"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=5442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=5442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=5442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}