1.<\/strong> O que \u00e9 o OpenLayers? 2.<\/strong> M\u00f3dulo I: B\u00e1sico<\/p>\n Iremos come\u00e7ar com um exemplo b\u00e1sico. Para isso voc\u00ea deve criar uma pasta no seu diret\u00f3rio de documentos do Apache com o nome de ol_workshop<\/strong><\/em>, feito isso crie um arquivo chamado 1-basico.html<\/strong><\/em> e copie o c\u00f3digo abaixo: <\/p>\n Ap\u00f3s salvar o arquivo, abra-o no browser e voc\u00ea dever\u00e1 ver o mapa dos Estados Unidos:<\/p>\n O script acima \u00e9 executado obedecendo seis passos que ser\u00e3o detalhados abaixo:<\/p>\n 3.<\/strong> Passo 1: Carregando a biblioteca OpenLayers<\/p>\n A URL “http:\/\/openlayers.org\/api\/OpenLayers.js<\/em>” aponta para o local do arquivo JavaScript que ser\u00e1 carregado. Como o OpenLayers \u00e9 OpenSource, voc\u00ea tem a possibiliade de utilizar plugins como o Firebug, e depurar o c\u00f3digo Javascript diretamente no seu navegador.<\/p>\n 4.<\/strong> Passo 2: O Mapa do DOM<\/p>\n O DIV \u00e9 um elemento que estamos utilizando para a marca\u00e7\u00e3o do nosso mapa. Mais tarde, usaremos o id do div para a cria\u00e7\u00e3o do mapa.<\/p>\n 5.<\/strong> Passo 3: O Objeto Map<\/p>\n Mapas no OpenLayers s\u00e3o representados pela classe Map. Cada objeto map representa um mapa na p\u00e1gina. No exemplo acima foi criado um novo mapa utilizando o construtor da classe Map, o OpenLayers.Map <\/em>com a palavra chave new<\/em>. <\/p>\n Neste c\u00f3digo, n\u00f3s passamos no construtor um argumento para identicadar o elemento que estamos usando, que definimos no DIV. O construtor pode opcionalmente receber como segundo par\u00e2metro um objeto contento mais par\u00e2metros para facilitar na configura\u00e7\u00e3o do seu mapa.<\/p>\n Para maiores informa\u00e7\u00f5es, a documenta\u00e7\u00e3o da classe Map pode ser encontrada na p\u00e1gina da Documenta\u00e7\u00e3o do OpenLayers<\/a>, em ingl\u00eas.<\/p>\n 6.<\/strong> Passo 4: Criando uma camada<\/p>\n O OpenLayers organiza o seu mapa em diversas camadas (layers). Neste c\u00f3digo \u00e9 constru\u00edda uma camada e adicionada ao mapa. <\/p>\n 7.<\/strong> Passo 5: Posi\u00e7\u00e3o do Mapa<\/p>\n Este c\u00f3digo informa ao mapa ajustar o zoom para a sua extens\u00e3o m\u00e1xima , que por padr\u00e3o \u00e9 de todo o mundo. \u00c9 poss\u00edvel definir uma extens\u00e3o passando um par\u00e2metro ao construtor do Mapa.<\/p>\n Para saber mais detalhes sobre os m\u00e9todos de zoom, leia a documenta\u00e7\u00e3o<\/a>.<\/p>\n 8.<\/strong> Passo 6: Carregando o Mapa<\/p>\n O c\u00f3digo acima, ser\u00e1 executado quando a p\u00e1gina for criada, e ent\u00e3o criar\u00e1 o mapa.<\/p>\n","protected":false},"excerpt":{"rendered":" Estou come\u00e7ando hoje uma s\u00e9rie de posts sobre o OpenLayers, com o intuito de criar uma documenta\u00e7\u00e3o b\u00e1sica sobre ele em portugu\u00eas tendo em vista que praticamente ela n\u00e3o existe. Todo o material que vou publicar nessa s\u00e9rie, \u00e9 com… Continue Reading →<\/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-1177","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\/1177","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=1177"}],"version-history":[{"count":21,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/1177\/revisions"}],"predecessor-version":[{"id":1462,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/1177\/revisions\/1462"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=1177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=1177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=1177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\u00c9 uma API Javascript que fornece funcionalidades para criar mapas na web oferecendo as fun\u00e7\u00f5es b\u00e1sicas para disponibilizar seus dados espaciais.<\/p>\n
\n![\"openlayers_intro_01_1\"](\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_intro_01_1.png\" "\\"openlayers_intro_01_1\\"")
\n<\/center><\/p>\n
\n![\"\"](\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/basics_1.png\" "\\"\\"")
\n<\/center><\/p>\n![\"\"](\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_intro_02.png\" "\\"\\"")
<\/p>\n![\"\"](\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_intro_03.png\" "\\"\\"")
<\/p>\n![\"\"](\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_intro_04.png\" "\\"\\"")
<\/p>\n![\"\"](\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_intro_05.png\" "\\"\\"")
<\/p>\n![\"\"](\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_intro_06.png\" "\\"\\"")
<\/p>\n![\"\"](\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2008\/12\/openlayers_intro_07.png\" "\\"\\"")
<\/p>\n