Fala galera!
Em meu TCC (Trabalho de Conclusão de Curso) minha equipe e eu fizemos uma aplicação que necessitava de interação com um mapa. E depois de muitas pesquisas cheguei a uma API (Application programming Interface) que foi ideal para o que precisávamos.
O ArcGis JavaScript da empresa Esri, além de ter uma documentação super completa e com vários códigos de exemplo, é muito simples de trabalhar.
O ArcGis JavaScript da empresa Esri, além de ter uma documentação super completa e com vários códigos de exemplo, é muito simples de trabalhar.
Neste post pretendo passar à vocês um pouco do conhecimento que possuo desta maravilhosa API e assim codificarmos um mapa de exemplo (pretendo futuramente fazer um mapa que utilizará mais recursos disponíveis). A princípio, vamos fazer um mapa "base" nada além do que somente abrir um mapa na tela.
Para iniciarmos nossa codificação, precisamos montar uma estrutura básica de fonte html, conforme abaixo:
Agora adicione o script e a tag dentro do <head>. O script carrega a API ArcGis JavaScript e quando houver uma atualização da API, será necessário alterar o número correspondente a versão. A folha de estilo (stylesheet) contém estilos específicos para componentes e widgets Esri.
Será preciso adicionar um segundo script, desta forma, não será necessário utilizar uma URL se referenciando ao módulo correspondente do ArcGis. O código JavaScript será adicionado dentro dele.
A função require especifica qual módulo utilizaremos no mapa, neste caso, será o módulo ["esri/map"], por conta disso, será definido no parâmetro da função (function) a classe Map que cria um local e uma estrutura DOM para adicionar as camadas, gráficos, informações de janela e outros controles.
Esta classe é responsável por adicionar o mapa à página. Além dessa classe, a API disponibiliza várias outros módulos com classes e objetos que possuem diferentes objetivos. Consulte aqui a lista completa.
O parâmetro do require "dojo/domReady!" é um plugin que vai esperar até que o carregamento do DOM tenha encerrado, ou seja, somente após o carregamento de todos os módulos - em nosso caso "esri/map" - o domReady será executado e a página carregada por completo. É indicado que o domReady seja sempre o último do vetor no qual se encontra. Mais detalhes aqui.
Após definirmos quais módulos utilizaremos, vamos a parte mais interessante, o mapa. Dentro do script você deixar seu código igual a este:
Vamos precisar de um objeto (map) que será responsável por todas configurações do mapa que utilizaremos. A string no primeiro parâmetro da classe Map (mapDiv) é o nome dado à div, onde o mapa será apresentado na página.
O segundo parâmetro é um vetor (semelhante a um arquivo JSON) que possui o atributo e seu valor correspondente, todos separados por vírgula.
O atributo center é um vetor com duas posições, onde definimos a longitude e a latitude do mapa. Estas coordenadas serão utilizadas como ponto inicial no carregamento do mapa.
O atributo zoom é a aproximação do mapa, ou seja, a distância de visualização. Quanto menor, menor o zoom. O atributo basemap é o tipo do mapa a ser mostrado na página. Além do street, temos outras opções como: satellite, hybrid, topo, gray, oceans, osm e national-geographic.
Após ter definido os atributos corretos e adicionado o código javascript completo, é hora de adicionar o mapa à página. Não poderia ser mais simples, basta adicionar a tag <div> ao corpo dá página e definir sua id com o mesmo nome do parâmetro da classe Map (mapDiv). Se for preciso, você pode utilizar o id para fazer a sua formatação em CSS para deixar o mapa em tela cheia ou em um local específico da página. Bom galera, por enquanto vou terminar esse tutorial por aqui e deixarei como uma pequena introdução a um próximo mapa com mais funções e características específicas.
O código completo está em nosso repositório no GitHub.
Até mais! ;)
Nenhum comentário:
Postar um comentário