Às vezes é muito difícil medir alguma coisa com os métodos antigos, e neste post irei mostrar como criar a sua primeira aplicação web utilizando um mapa 2D para fazer medições de um ponto a outro, com a ajuda do meu colega Trainee, Matheus Henrique Bertuci.

É recomendado que você guarde este código que vamos gerar, pois vamos utilizá-lo em mais um artigo seguinte, que irá conter as informações sobre como trocar o mapa base e desenhar formas no mapa.

Criando uma Página HTML

A primeira coisa a ser feita, é criar um arquivo de nome ‘medicao.html’ em um editor de texto de sua preferência. Essa será a sua página padrão que mostrará o mapa junto com as ferramentas utilizadas nesse artigo e nos próximos da trilha.

Depois que seu arquivo estiver criado, adicione o seguinte código:

Desenvolvendo com a API

Para fazer o uso dos recursos de desenvolvedores do ArcGIS, é preciso criar uma conta no site ArcGIS Developers. A inscrição é gratuita e você terá acesso a vários de nossos recursos.

Dentro da tag , abaixo do fechamento da tag “/style”, entre “< >“, do arquivo HTML criado acima, adicione as referências para o CSS e para a API Javascript do ArcGIS.

Criando e exibindo o mapa

Instancie um novo mapa (Map) e defina a propriedade de mapa base como ‘hybrid’. Instancie um visualizador de mapa (MapView) e defina as propriedades container, mapa, zoom e centro, conforme o código abaixo:

O mapa base criado foi o de Híbrido de Imagens, mas acessando a documentação do Mapa, você pode configurar o basemap de acordo com suas preferências.

Sua aplicação traz como centro do mapa a cidade de São José dos Campos, em São Paulo. Caso queira fazer a visualização em outra localidade, troque as coordenadas de Latitude e Longitude para a do local desejado.

Adicionando o Widget de Medição

Agora, adicione um widget de régua de medição. Este widget permite que você, desenvolvedor, configure a interface de usuário para melhor atender a seus requisitos específicos. 

Você pode adicionar quaisquer ferramentas de medições que necessitam e estilizá-la como quiser.

Isso significa que o desenvolvimento com o widget ‘Measurement’ envolve mais do que apenas criar uma instância do widget e adicioná-la à visualização.

Aqui está um trecho de código mostrando como adicionar no ‘require’ o módulo Measurement, juntamente na função:

No final da função principal, instancie o Measurement e adicione o widget no canto inferior direito da tela:

Veja o código completo abaixo:

Abra o arquivo ‘medicao.html’ criado em um navegador, e veja o resultado. Inicie a medição clicando em um ponto no mapa, e quando desejar parar de medir, dê duplo clique no último ponto. Na parte inferior direita apresenta a unidade de medida (você pode escolher qual) e a distância calculada. Clique em Noma Medição para fazer uma nova medição.

Você chegou ao final da parte 1 da nossa criação de uma aplicação web. Continue conosco que logo mais sairá a parte 2, que trataremos sobre a troca do mapa base e a inclusão da ferramenta de desenho de forma.

Veja o código completo no nosso repositório no GitHub!

Gostou do conteúdo acima? Então clique na imagem abaixo e aprimore seus conhecimentos no Replay do EU Esri 2021!

Fique por dentro de todas as novidades do Portal GEO. Faça grátis sua inscrição!

Você também pode gostar:

Aplicação de Técnicas de Deep Learn e Pytorch para Censo em Plantio Florestal 90 dias

EBook: Os 25 anos de Geoprocessamento da SEDU / PARANACIDADE

INDI Maps – Plataforma de Site Selection para Atração de Investimentos em Minas Gerais

Planejamento urbano com qualidade para os municípios paranaenses


Você gostou desse artigo?

O Portal GEO está sempre trabalhando para trazer novidades, tendências e o que há de melhor em dicas do universo GIS. Clique abaixo e faça sua inscrição gratuita para receber com comodidade todos os nossos artigos, que tenho certeza, vão te apoiar em seu cotidiano profissional e pessoal, te deixando sempre bem informado: