Ir para conteúdo principal Pular para conteúdo complementar
Recursos da Qlik

Criando um mapa com uma camada de plano de fundo de imagem

Você pode usar imagens como mapas-base personalizados em visualizações de mapa. Você pode querer exibir dados sobre uma planta baixa.

Esse gráfico de mapa de exemplo exibe uma planta de escritório com uma camada de ponto. Cada bolha é posicionada sobre a mesa de um funcionário. A média semanal de problemas de clientes tratados por dia pelo funcionário determina o tamanho e a cor de cada bolha.

Exemplo de mapa com plano de fundo com a imagem da planta baixa, com uma camada de ponto mostrando os funcionários dimensionados pelo número de problemas de clientes que eles resolveram

Exemplo de mapa com plano de fundo com a imagem da planta baixa, com uma camada de ponto mostrando os funcionários dimensionados pelo número de problemas de clientes que eles resolveram

Este exemplo oculta a escala padrão. As imagens não possuem uma escala de tamanho consistente. O tamanho da imagem em uma camada de plano de fundo de mapa também depende das coordenadas que o usuário define para os cantos da imagem.

Conjunto de dados

Este exemplo usa duas tabelas e uma imagem de plano de fundo.

Como eu construí isso

Nota informativaURLs que contêm solicitações de recursos para recursos externos devem ter suas origens na lista de permissões na Content Security Policy, caso contrário, o recurso não será carregado. Os recursos do WMS devem ter diretivas image-src e connect-src em listas de permissões.

Consulte também: Gerenciando a Content Security Policy

Antes de iniciar

Antes de iniciar, a origem a seguir deve ser adicionada à lista de permissões da Content Security Policy: https://help.qlik.com. Essa origem precisa ser incluída com a seguinte Directive: image-src. Isso é feito no centro de atividades de Administração por um administrador de locatários.

Para obter mais informações sobre como adicionar entradas da Content Security Policy, consulte Criando uma entrada de CSP.

Construindo o mapa

Faça o seguinte:

  1. Adicione as fontes de dados ao seu aplicativo e associe as tabelas usando os campos EmployeeNumber em cada tabela.
  2. Em uma pasta, adicione um gráfico de mapa.
  3. Clique em Abrir propriedades avançadas.

  4. Em Configurações do mapa, faça o seguinte:

    • Altere Mapa-base para Nenhum.
    • Altere Projeção para Definida pelo usuário (graus).

  5. Em Aparência > Apresentação, faça o seguinte:

    • Alterne a Barra de escala para Desativado.
    • Defina Limitar níveis de zoom para Personalizado e defina o zoom como Zoom 7x - zoom 8x.

  6. Adicione uma camada de plano de fundo ao gráfico de mapa e, em Dados, faça o seguinte:

    • Em Formato, selecione Imagem.
    • Defina a URL como https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_map-image-background-example.png.
    • Defina o Canto superior esquerdo como 2,5 para Superior (latitude) e -4,1 para Esquerda (longitude).
    • Defina o Canto inferior direito como -2,5 para Inferior (latitude) e 4,1 para Direita (longitude).
    Nota informativa

    Neste ponto do exemplo, a imagem ainda não aparece. Depois de adicionar uma camada de pontos com a próxima etapa, o mapa é atualizado com a escala e a posição da imagem corretas.

  7. Adicione uma camada de ponto ao gráfico de mapa e faça o seguinte:

    • Em Dados, adicione Funcionário como o campo.
    • Em Local, selecione Campos de latitude e longitude. Defina Latitude como o campo Latitude e Longitude como o campo Longitude.
    • Em Tamanho e forma, defina Tamanho por como Avg(CustomerIssues).

    • Em Cores, faça o seguinte:

      • Defina Cores como Personalizado e aplique cores Por medida.
      • Selecione Avg(CustomerIssues) como a medida.
      • Selecione Classes divergentes como o esquema de cores.

Para obter a mesma aparência da imagem no topo da página, defina o tema do aplicativo como Sense Classic.

Esta página ajudou?

Se você encontrar algum problema com esta página ou seu conteúdo - um erro de digitação, uma etapa ausente ou um erro técnico - informe-nos como podemos melhorar!

Deixe seu feedback aqui