Interface.html
13.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<h1>Funcionalidades presentes na Interface</h1>
<p>As funcionalidas da interface referem-se aos recursos implementados no i3GeoSaúde para permitir que os usuário interajam com os mapas de forma facilitada e intuitiva. A seguir detalhamos os principais recursos presentes na interface com usuário. Visão geral dos mapas interativos
<p>Cada instalação do i3GeoSaúde pode conter mapas com diferentes objetivos e desenhos, desenvolvidos conforme as necessidades de seus usuários. Existem três interfaces básicas de mapas que normalmente são utilizadas pelo i3GeoSaúde. Em quaisquer uma delas podem estar presentes os seguintes elementos.
<div class="imagemExemplo">
<img src="imagens/Interface/componentesbasicos.jpg">
<p>Interface com suas funcionalidades.
</div>
<p>
• <span style="font-weight: bold;">Corpo do mapa</span>: área onde as camadas que compõem o mapa são desenhadas. Permite a navegação sobre o mapa, como as operações de aproximação (zoom) ou o deslocamento da abrangência espacial do mapa ("pan"). As operações atuam em um simples “clique” sobre o mapa, em um determinado ponto geográfico, além disso a ferramenta exibe informações básicas sobre os pontos georeferenciados ao capturar o posicionamento do mouse em movimento. Veja abaixo detalhes
sobre o corpo do mapa e as coordenadas geográficas para o ponto clicado sobre o mapa.
<div class="imagemExemplo">
<img src="imagens/Interface/corpomapa_recursos.jpg">
<p>Corpo do mapa e a barra com as coordenadas do ponto geográfico.
</div>
<p>
• <span style="font-weight: bold;">Menu suspenso</span>: barra contendo opções principais da ferramenta i3GeoSaúde, que contém outros submenus que são expandidos para mostrar ítens secundários. Como visto na figura abaixo, as opções permitem abrir diversas funcionalidades e outros aplicativos. Essa barra fica normalmente localizada na parte superior da interface.
<div class="imagemExemplo">
<img src="imagens/Interface/barramenususpenso.jpg" style="width: 684px; height: 36px;" alt="barra de menu suspensa">
<p>Menu suspenso.
</div>
<p>
• <span style="font-weight: bold;">Barra de botões</span>: barra de ícones que permitem acionar determinadas funcionalidades de uso mais frequente. Na barra ficam ícones que permitem operações de interação direta com o mapa, como navegação, posicionamento, zoom, e outros que abrem outras janelas de opções. Como podemos ver na figura, há duas versões disponíveis, que são acionadas pelo controle posicionado à direita da barra: a barra padrão (com onze funções) e a barra estendida, contendo
opções adicionais ao padrão.
<div class="imagemExemplo">
<img src="imagens/Interface/barrabotoes.jpg">
<p>Barra de botões (versão padrão e estendida).
</div>
<p>
• <span style="font-weight: bold;">Barra de navegação</span>: É um tipo especial de barra de botões que apresenta operações de navegação. São úteis para se ter acesso rápido a esse tipo de operação e também em dispositivos móveis, como os “tablets”. Em alguns casos, em função da área de tela disponível, a barra de botões padrão pode não existir, sendo mostrada apenas a barra de navegação.
<p>
• <span style="font-weight: bold;">Janela flutuante</span>: consiste em um elemento gráfico que pode ser movimentado sobre o mapa e que contém opções para o uso de determinada funcionalidade ou que apenas apresenta textos explicativos.
<p>
• <span style="font-weight: bold;">Guias ou abas laterais</span>: as guias são áreas retráteis, podendo estar escondidas ou não. Normalmente contém elementos de maior destaque no mapa como as opções que controlam as camadas, legenda e catálogo de acesso aos dados. Os conteúdos das guias podem ainda ser apresentados de diferentes formas, como as guias do tipo “sanfona” ou acionadas por meio de ícones. A figura seguinte mostra a guia de camadas localizada na lateral direita da interface,
ocm destaque para o controle que exibe e oculta a guia.
<div class="imagemExemplo">
<img src="imagens/Interface/guialateral.jpg">
<p>Guia lateral para operações sobre as camadas (temas).
</div>
<p>
• <span style="font-weight: bold;">Complementos</span>: os complementos ficam localizados em uma barra na parte inferior da interface. Apresenta diferentes informações, como a barra de escala, escala numérica, bandeiras de idiomas, ícones de redes sociais, posição do mouse, etc. A figura apresenta a barra de complementos normalmente encontrada no i3GeoSaúde.
<div class="imagemExemplo">
<img src="imagens/Interface/barracomplementos.jpg">
<p>Barra inferior com funções complementares.
</div>
<p>
• <span style="font-weight: bold;">Árvores</span>: mostram opções organizadas de forma hierárquica e representadas graficamente como uma árvore invertida, onde a raiz fica no topo. A árvore é composta por nós que podem ser expandidos ou não. Os nós que podem ser expandidos apresentam um ícone de “+” ou “-”, indicando o estado atual.
<p>
• <span style="font-weight: bold;">Dobra de página</span>: a dobra é mostrada no canto inferior direito do mapa e permite que o corpo do mapa seja alterado, passando a ser desenhado por meio de um programa alternativo. A dobra permite que você alterne as formas de visualizar o mapa, ao abrir um mapa baseado no Google Maps ou no OpenLayers, alternando entre os dois.
<div class="imagemExemplo">
<img src="imagens/Interface/dobra.jpg">
<p>Controle de dobra de página.
</div>
<h2>Formas de visualização da Interface</h2>
<p>Os componentes de um mapa podem ser posicionados e apresentados de formas variadas. A visualização pode ser gerada com base em diferentes programas, como o OpenLayers, GoogleMaps ou GoogleEarth. Cada um desses programas possui características próprias, que alteram a forma como o usuário interage com o mapa. Na interface OpenLayers, todas as funcionalidades do software podem ser utilizadas e o desenho das camadas do mapa é mais eficiente em relação às outras formas de visualização.
O OpenLayers é a forma padrão de interação do i3GeoSaúde.
<div class="imagemExemplo">
<img src="imagens/Interface/i3GEO%20%20%20OpenLayers.png">
<p>Interface OpenLayers
</div>
<p>A interface Google Maps permite o uso da base cartográfica do Google, possibilitando visualização tanto de ruas quanto imagens de satélite. A barra de navegação é diferente do padrão OpenLayers, e o desenho das camadas do mapa pode ser mais lenta, em razão da necessária conexão à internet para acesso ao Google Maps. A inclusão de toponímia e símbolos pontuais podem ficar comprometidos nessa interface, uma vez que todas as camadas são desenhadas por partes, podendo ocorrer problemas nas
bordas que compõem os quadros do mapa. Um conjunto de botões é mostrado no canto superior direito para permitir a escolha do tipo de mapa (ruas ou imagem de satélite).
<div class="imagemExemplo">
<img src="imagens/Interface/i3GEOGoogleMaps.png">
<p>Interface Google Maps.
</div>
<p>Tanto o OpenLayers quanto o Google Maps apresentam o mapa em um plano 2D. Já a interface GoogleEarth permite que o mapa seja visto na perspectiva 3D. Observe que a barra de botões é colocada em uma janela flutuante, e não existe a possibilidade de uso das guias retráteis, sendo necessário mantê-las fixas. Essa interface utiliza uma barra de navegação mais complexa, uma vez que o globo pode ter pontos de vista diferentes para acomodar a visualização do relevo da superfície do globo.
<div class="imagemExemplo">
<img src="imagens/Interface/I3GEOEarth.jpg">
<p>Interface Google Earth.
</div>
<h2>Outros componentes presentes na Interface</h2>
<p>O menu padrão, contendo as principais funcionalidades do i3GeoSaúde, contém sete ítens.
<div class="imagemExemplo">
<img src="imagens/Interface/barramenususpenso.jpg">
<p>Menu suspenso.
</div>
<p>
• <span style="font-weight: bold;">Admin/Login</span>: Utilizado para fazer autenticação do usuário e ter acesso às funcionalidades de administração, caso o usuário tenha direitos de administrador. •
<p>
<span style="font-weight: bold;">Marcadores</span>: Permite salvar a extensão da vista atual (nível de zoom e localização da vista no mapa) para ser retomada depois.
<p>
• <span style="font-weight: bold;"> Ferramentas</span>: Acesso rápido às ferramentas que atuam sobre as camadas que foram carregadas para visualização no i3GeoSaúde. As mesmas operações podem estar presentes em outros lugares da interface, como na árvore de camadas.
<p>
• <span style="font-weight: bold;">Aplicativos</span>: Links que abrem o mapa com diferentes desenhos e aplicativos que funcionam em apoio ao i3GeoSaúde. Entre eles temos Serviços, Download, Tela remota, Gerador de links e parâmetros de inicialização e Hiperbólica.
<p>
• <span style="font-weight: bold;">Arquivo</span>: Ppções que permitem salvar, recuperar e compartilhar o mapa atual.
<p>
• <span style="font-weight: bold;">Análise</span>: Operações de análise geográfica, descritas em Grades, Distância entre pontos, "N" pontos em polígono, Ponto em polígono/raster, Distribuição de pontos, Centro médio, Dissolve, Geometrias, Entorno (buffer), Agrupa, Centróide, Gráfico e Linha do tempo.
<p>
• <span style="font-weight: bold;">Ajuda</span>: Nesse ítem são mostrados vários links que permitem obter mais informações sobre o i3GeoSaúde. Destacam-se os que indicam a documentação do projeto, e a lista de funções. Essa lista oferece uma visão geral de todas as funções do i3GeoSaúde e links adicionais para obter ajuda sobre cada uma. Quanto à barra de botões, é importante destacar as funcionalidades, pois boa parte da interação e tarefas do usuário com o cartograma ocorre nessa ferramanta.
Para mais obter mais informações sobre as principais tarefas do usuário,
<p>
<span style="text-decoration: underline;"></span><a target="_blank" href="OperacaoSobreMapa.html">veja mais detalhes em "principais operações sobre os mapas"</a>
<div class="imagemExemplo">
<img src="imagens/Interface/Barrademenu.png">
<p>Barra de Botões
</div>
<p>Outro componente frequentemente utilizado pelo usuário, destacamos as guias ou abas laterais. Tais guias contém as opções que controlam as camadas, legenda e catálogo de acesso aos dados. A seguir apresentaremos algumas das opções desse recurso.
<p>
• <span style="font-weight: bold;">Mapa</span>: Ao clicar no ícone <img src="imagens/Interface/figura1.jpg" style="width: 31px; height: 31px;" alt="figura1"> surgirá três árvores principais: Opção de "busca rápida", Propriedades do mapa (<span style="font-weight: bold;">Propriedades</span>), Camadas de fundo (<span style="font-weight: bold;">Camadas de fundo</span>) e <span style="font-weight: bold;">Temas</span>, que permitem maior fluidez de visualização, interação e análise
sobre o mapa.
<div class="imagemExemplo">
<img src="imagens/Interface/GuiaMapa.png">
<p>Guia do Mapa.
</div>
<p>
• <span style="font-weight: bold;">Catálogo</span>: mostra por meio do ícone <img src="imagens/Interface/figura2.jpg" style="width: 32px; height: 29px;" alt="figura2"> opções que permitem adicionar novas camadas ao mapa atual. Essa guia contém uma opção de busca, para localizar dados existentes no catálogo; um bloco de ícones com opções como upload, acesso à WMS, etc.; um ítem com a lista de serviços WMS cadastrados e um item para cada menu disponível (Inclusão de uma camada no
mapa, Inclusão de uma camada baseada em serviços WMS e Localizando dados no catálogo).
<div class="imagemExemplo">
<img src="imagens/Interface/guiacatalogo.png">
<p>Guia de Catálogo.
</div>
<p>
• <span style="font-weight: bold;">Legenda</span>: Ao clicar no ícone <img src="imagens/Interface/figura3.jpg" style="width: 34px; height: 32px;" alt="figura3"> é apresentado os temas.
<div class="imagemExemplo">
<img src="imagens/Interface/guialegenda.png">
<p>Exemplo de temas do Guia de legenda.