Ficando Confortável com a JavaScript API 4.0

Noah Sager

<\/HEAD>Agora que a ArcGIS API for JavaScript 4.0 foi lançada<\/A><\/STRONG> há algumas semanas, esta é uma excelente oportunidade para explorar algumas das novas sintaxes e funcionalidades. Este blog irá passar por um exemplo de aplicação 3D focando no widget Search. Você pode acompanhar o código de exemplo do repositório Esri Developer Support no GitHub<\/A><\/STRONG>, e executar o exemplo hospedado aqui: Veja ao Vivo<\/A><\/STRONG>.

Em termos de funcionalidade, o app exibe um mapa 3D com quatro widgets: Search, Zoom, Compass e Attribution. Por padrão, a View inclui os três últimos widgets, conforme descrito na documentação<\/A><\/STRONG>. Se você não está familiarizado com as mudanças do 4.x, todos os apps de mapeamento contêm um mapa e uma view. O mapa contém os dados, e a view contém as informações de visualização desses dados. Em outras palavras, o mapa é o sujeito, e a view é a câmera; completa com filtros, modos e configurações. Todos os apps 2D terão MapViews, e apps 3D terão SceneViews (nota: o termo 'scene' indica três dimensões no ArcGIS). O mesmo se aplica para mapas do ArcGIS Online e Portal for ArcGIS: um WebMap é 2D, e um WebScene é 3D.

<\/A>

Mapa 2D + Cena 3D<\/P><\/DIV>

Você pode inserir uma localização no widget Search e selecionar um resultado das sugestões suspensas ou pressionar Enter no teclado para ir ao primeiro local da lista. A view irá dar zoom nessa localização e colocar um símbolo de marcador de imagem no mapa. Se você abrir as Ferramentas de Desenvolvedor no navegador web, verá algumas mensagens úteis no console indicando o progresso do widget Search.

No código, há muitos comentários úteis descrevendo a funcionalidade, com links para referências para encontrar mais informações. Os construtores Map e SceneView podem ser novos, mas são muito diretos. O que quero focar aqui são duas coisas: o

SearchViewModel<\/A><\/STRONG> (começando na linha 88), e o view.ui<\/A><\/STRONG> (começando na linha 117).

Uma das características incríveis do 4.0 é a separação do estilo e da lógica de negócio. Isso significa que os widgets têm uma view e um ViewModel. A view é o próprio widget e lida com a exibição do widget, enquanto o ViewModel lida com as propriedades e configurações. Devo mencionar que não precisamos usar o ViewModel se não quisermos, já que as propriedades do ViewModel também estão conectadas à view do widget. Isso foi feito para fins de simplicidade. Como exemplo, vamos olhar o widget Search no código:

<\/A>

Widget Search e SearchViewModel<\/P><\/DIV>

O construtor real do widget foi usado para nomear o widget e definir a visibilidade como true (o padrão já é true). O SearchViewModel lida com todas as configurações que foram definidas para personalizar a experiência do usuário e a interface da maneira que eu precisava (veja os comentários no exemplo). O que é interessante sobre esse sistema ViewModel é que, por estar separado do construtor do widget, agora é muito mais fácil compartilhar lógica de negócio entre widgets e bases de código. Aqui está mais informação sobre o

SearchViewModel<\/A><\/STRONG>.

O segundo aspecto interessante do 4.0 que vou discutir aqui é como adicionamos o widget Search ao app. Vamos olhar o trecho de código do 4.0 e do 3.x. Atualmente, podemos adicionar o widget diretamente à interface do usuário da view sem criar um elemento div separado. Este é um fluxo de trabalho eficiente (e ouso dizer elegante).

<\/A>

Adicionar Widget Search na versão 4.0<\/P><\/DIV>

Nas versões 3.x, precisamos criar um elemento div, referenciar essa div quando o widget for criado, e referenciá-la novamente dentro da tag body do HTML.

<\ / A >< P style= "color : #888 ; font-size :12 px ; margin :5 px ; " > Adicionar Widget Search na versão 3.x <\ / P ><\ / DIV >< BR \ / >< BR \ / >Para mais informações sobre como adicionar widgets à view, você pode consultar esta documentação <\ / A ><\ / STRONG >.< BR \ / >< BR \ / >Em resumo, a ArcGIS API for JavaScript é um produto poderoso que aproveita o poder do GIS diretamente no seu navegador web. Se você tem trabalhado com versões anteriores da API, ler o  Guia de Transição para a versão 4.x <\ / A ><\ / STRONG >pode ajudar você a começar. E se você é totalmente novo, pode começar com o Guia Discover da versão 4.x <\ / A ><\ / STRONG >. Há muito mais por vir enquanto continuamos adicionando funcionalidades e melhorias incríveis à JavaScript API 4.x. Feliz codificação!

---

Noah S. - Líder de Prontidão SDK<\ / EM >



<\ / BODY ><\ / HTML >