{"id":5759,"date":"2016-06-28T07:30:42","date_gmt":"2016-06-28T10:30:42","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=5759"},"modified":"2016-08-12T14:54:44","modified_gmt":"2016-08-12T17:54:44","slug":"diretiva-para-o-openlayers-3-no-angularjs","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2016\/06\/28\/diretiva-para-o-openlayers-3-no-angularjs\/","title":{"rendered":"Diretiva para o OpenLayers 3 no AngularJS"},"content":{"rendered":"

AngularJS<\/a> \u00e9 um framework JavaScript open-source, mantido pelo Google, que auxilia na execu\u00e7\u00e3o de single-page applications. Seu objetivo \u00e9 aumentar aplicativos que podem ser acessados por um navegador web, foi constru\u00eddo sob o padr\u00e3o model-view-view-model (MVVM), em um esfor\u00e7o para facilitar tanto o desenvolvimento quanto o teste dos aplicativos.<\/p>\n

No AngularJS encontramos as diretivas que permitem ao desenvolvedor especificar tags HTML personalizadas e reus\u00e1veis, que personalizam o comportamento de certos elementos.<\/p>\n

Partindo desse princ\u00edpio David Rubert criou a diretiva angular-openlayers-directive com a inten\u00e7\u00e3o de incorporar mapas geridos pela biblioteca OpenLayers 3<\/a>. <\/p>\n

Veja como \u00e9 f\u00e1cil usar a diretiva:<\/p>\n

1. Primeiro de tudo, carregue o AngularJS e OpenLayers (V3) em seu arquivo HTML.<\/p>\n

2. Depois disso, voc\u00ea deve incluir a depend\u00eancia da openlayers-directiva em seu m\u00f3dulo angular:<\/p>\n

var app = angular.module ( \"demoapp\", [ \"openlayers-directiva\"]);<\/pre>\n
3. O comportamento padr\u00e3o ir\u00e1 mostrar uma camada OpenStreetMap e os controles de zoom e atribui\u00e7\u00f5es, mas voc\u00ea pode personalizar os valores padr\u00e3o para atender \u00e0s suas necessidades. Al\u00e9m disso, voc\u00ea pode definir uma atualiza\u00e7\u00e3o bi-direcional de valores entre o mapa e as vari\u00e1veis \u200b\u200bdo seu controler. Desta forma, voc\u00ea pode interagir facilmente com o mapa. Exemplo:<\/p>\n
angular.extend($scope, {\r\n    center: {\r\n        lat: 51.505,\r\n        lon: -0.09,\r\n        zoom: 8\r\n    }\r\n});<\/pre>\n
4. Finalmente, voc\u00ea deve incluir a diretiva em sua p\u00e1gina HTML, desta forma:<\/p>\n
<openlayers ol-center=\"center\" height=\"480px\" width=\"640px\"><\/openlayers><\/pre>\n
Para conferir informa\u00e7\u00f5es detalhadas e baixar a diretiva voc\u00ea pode acessar o link do GitHub:<\/p>\n
 https:\/\/github.com\/tombatossals\/angular-openlayers-directive<\/a><\/p>\n
Bons estudos!<\/p>\n
Fonte: Spatially Oriented<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"
AngularJS \u00e9 um framework JavaScript open-source, mantido pelo Google, que auxilia na execu\u00e7\u00e3o de single-page applications. Seu objetivo \u00e9 aumentar aplicativos que podem ser acessados por um navegador web, foi constru\u00eddo sob o padr\u00e3o model-view-view-model (MVVM), em um esfor\u00e7o para… Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":5760,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,132],"tags":[269,223,250],"class_list":["post-5759","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","category-openlayers","tag-angularjs","tag-gis","tag-openlayers"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5759","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=5759"}],"version-history":[{"count":9,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5759\/revisions"}],"predecessor-version":[{"id":6208,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/5759\/revisions\/6208"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/5760"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=5759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=5759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=5759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}