Esquema de Camada

Índice

• Estrutura de Camadas na Tela
• Visualização de Detalhes do Polígono
• Ações no Clique do Polígono
• Configurações de Cores
• Parâmetros do Objeto da Camada
• Exemplos de Configuração de Camada

Este documento descreve a estrutura e funcionalidade do sistema de camadas de mapa no mecanismo de construção de layout. As camadas de mapa são organizadas para exibir dados geoespaciais, suportar interações do usuário e fornecer visualizações personalizáveis.

Estrutura de Camadas na Tela

A interface do mapa organiza camadas em grupos, que contêm camadas individuais e uma legenda exibindo cores associadas. Cada grupo serve como um container para camadas relacionadas, permitindo que usuários alternem a visibilidade ou interajam com conjuntos de dados específicos. Camadas dentro de um grupo podem ser configuradas independentemente para visibilidade, níveis de zoom e estilo.

• Grupos: Coleções lógicas de camadas, ex: "Áreas Públicas" ou "Macrozoneamento".
• Camadas: Conjuntos de dados geoespaciais individuais, como "Águas Correntes ou Dormentes" ou "Lotes".
• Legenda: Exibe mapeamentos de cores para camadas, refletindo cores estáticas ou baseadas em propriedades dinâmicas.

Visualização de Detalhes do Polígono

O sistema permite exibir detalhes de um ou mais polígonos selecionados no mapa quando necessário. Para habilitar essa funcionalidade, a camada deve ser configurada com a ação de clique SelectFeature, sem requerer parâmetros adicionais em clickAction:

{
  "clickAction": {
    "action": "SelectFeature"
  }
}

Essa configuração indica que a camada é selecionável, permitindo que o sistema processe a seleção e exiba informações detalhadas do polígono conforme definido no viewTemplate. Para mais detalhes sobre ações de clique, veja a seção Ações no Clique do Polígono. O mecanismo de renderização para essas informações é detalhado na Documentação do viewTemplate.

Ações no Clique do Polígono

A ação de clique em um polígono é configurável via propriedade clickAction no esquema JSON da camada. O sistema suporta três ações principais, descritas na tabela abaixo, permitindo desde seleção de polígono até navegação para visualizações específicas.

Para mais informações sobre renderização de detalhes com openFeature, veja a Documentação do viewTemplate.

Configurações de Cores

Camadas suportam customização de cores para polígonos baseada em suas propriedades, permitindo que cores sejam aplicadas ao preenchimento, linha ou texto de um polígono. Configurações podem ser estáticas ou dinâmicas, e o preenchimento pode incluir padrões visuais para diferenciar áreas no mapa.

Padrões de Preenchimento

Usuários podem definir padrões de preenchimento para polígonos, especificados no campo pattern do array colors. As opções disponíveis são:

• full: Preenchimento sólido, sem padrão.
• dots: Padrão de pontos dispersos.
• hatch-1x: Padrão de linhas paralelas.
• hatch-cross: Padrão de linhas cruzadas.

Tipos de Cores

Cores podem ser aplicadas a diferentes elementos do polígono, especificados pelas propriedades getFillColorPropName, getLineColorPropName e getTextColorPropName. O tipo de cor é implicitamente definido por essas propriedades, correspondendo a:

• fill: Cor de preenchimento do polígono.
• line: Cor de contorno do polígono.
• text: Cor do texto exibido no polígono.

Na ausência de getLineColorPropName ou getTextColorPropName, o sistema padroniza para a cor definida por getFillColorPropName tanto para linha quanto para texto. O tipo padrão para qualquer cor é sempre fill, garantindo que o preenchimento seja colorido mesmo sem configurações específicas para linha ou texto.

Uso das Propriedades label e value

A propriedade label é usada principalmente para exibir descrições na legenda quando uma camada tem múltiplas cores. O sistema usa o campo value para mapear uma propriedade do polígono para a cor correspondente, enquanto label define o texto mostrado na legenda. Se o valor de comparação (usado para mapeamento de cor) for o mesmo que o valor de exibição da legenda, o usuário pode definir apenas a propriedade label, omitindo value. A propriedade value é necessária apenas quando há uma divergência entre o valor de comparação e o texto da legenda.

Por exemplo:

• Uma propriedade de polígono pode ter valores como AI-16 ou AI, mas a legenda pode exibir Area of Influence ou Area of Influence (2016).

• Se o valor de comparação e o texto da legenda forem os mesmos (ex: AI), apenas label é necessário.

• Exemplo com valores distintos:

  {
    "colors": [
      {
        "color": [136, 144, 173, 240],
        "pattern": "full",
        "label": "Area of Influence",
        "value": "AI"
      },
      {
        "color": [201, 186, 119, 240],
        "pattern": "hatch-1x",
        "label": "Area of Influence (2016)",
        "value": "AI-16"
      }
    ]
  }

• Exemplo com valores idênticos:

  {
    "colors": [
      {
        "color": [136, 144, 173, 240],
        "pattern": "full",
        "label": "Area of Influence"
      }
    ]
  }

• Cores Estáticas: Uma única cor aplicada uniformemente, ex: a camada "Running or Dormant Waters" usa:

  {
    "colors": [
      {
        "color": [56, 85, 204, 240],
        "label": "default",
        "pattern": "full"
      }
    ]
  }

• Cores Dinâmicas: Cores atribuídas com base em propriedades do polígono, ex: a camada "Axes" mapeia cores para a propriedade nm_perimetro_divisao_pde:

  {
    "getFillColorPropName": "nm_perimetro_divisao_pde",
    "getLineColorPropName": "nm_perimetro_divisao_pde",
    "colors": [
      {
        "color": [136, 144, 173, 240],
        "pattern": "full",
        "label": "Area of Influence",
        "value": "AI"
      },
      {
        "color": [201, 186, 119, 240],
        "pattern": "hatch-1x",
        "label": "Area of Influence (2016)",
        "value": "AI-16"
      }
    ]
  }

Parâmetros do Objeto da Camada

O objeto JSON que define uma camada contém vários parâmetros que controlam sua funcionalidade, aparência e comportamento. A tabela abaixo lista todos os parâmetros observados nos exemplos de camada, juntamente com suas descrições e exemplos.

Detalhes das Propriedades em properties

O objeto properties pode conter várias configurações adicionais, dependendo da camada. Exemplos comuns incluem:

Para mais informações sobre essas propriedades, veja a documentação do Deck.gl.

Detalhes do Array colors

O array colors define as configurações de cor e padrão, com os seguintes campos:

Exemplos de Configuração de Camada

Camada Simples (Cor Estática)

{
  "id": "aguas_correntes_ou_dormentes",
  "name": "Running or Dormant Waters",
  "origin": "https://geoserver.slui.dev/geoserver/slui/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=slui:aguas_correntes_ou_dormentes&maxFeatures=10000&outputFormat=json&srsName=EPSG:4326",
  "isActive": true,
  "type": "GeoJsonLayer",
  "isVisible": false,
  "minZoom": null,
  "getTextColorPropName": null,
  "getFillColorPropName": null,
  "getLineColorPropName": null,
  "groupId": "areas_publicas",
  "colors": [
    {
      "color": [56, 85, 204, 240],
      "label": "default",
      "pattern": "full"
    }
  ]
}

Camada com Cores Dinâmicas

{
  "id": "eixos",
  "name": "Axes",
  "origin": "https://geoserver.slui.dev/geoserver/slui/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=slui:eixos&maxFeatures=10000&outputFormat=json&srsName=EPSG:4326",
  "isActive": true,
  "type": "GeoJsonLayer",
  "isVisible": false,
  "minZoom": null,
  "getTextColorPropName": "nm_perimetro_divisao_pde",
  "getFillColorPropName": "nm_perimetro_divisao_pde",
  "getLineColorPropName": "nm_perimetro_divisao_pde",
  "groupId": "macrozoneamento",
  "clickAction": { "action": "setZoom", "zoom": 15 },
  "colors": [
    {
      "color": [136, 144, 173, 240],
      "pattern": "full",
      "label": "Area of Influence",
      "value": "AI"
    },
    {
      "color": [201, 186, 119, 240],
      "pattern": "hatch-1x",
      "label": "Area of Influence (2016)",
      "value": "AI-16"
    }
  ]
}

Camada com Carregamento Dinâmico e Seleção

{
  "id": "lotes",
  "name": "Lots",
  "origin": "https://geoserver.slui.dev/geoserver/slui/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=slui:view_lote_cidadao&maxFeatures=10000&outputFormat=json&srsName=EPSG:4326",
  "isActive": true,
  "type": "Stream",
  "isVisible": true,
  "minZoom": 17,
  "getTextColorPropName": null,
  "getFillColorPropName": null,
  "getLineColorPropName": null,
  "clickAction": { "action": "SelectFeature" },
  "groupId": "geral",
  "properties": {
    "stroked": false,
    "filled": true,
    "pointType": "circle+text",
    "pickable": true,
    "extruded": true,
    "wireframe": true,
    "getLineWidth": 20,
    "getPointRadius": 0,
    "getTextSize": 12,
    "autoHighlight": true,
    "highlightColor": [252, 252, 255, 150],
    "getElevation": "(allotment) => { const { qt_area_construida, qt_area_terreno } = allotment?.properties || {}; if (!qt_area_construida || !qt_area_terreno) return 0; return (qt_area_construida / qt_area_terreno) * 2 * 3; }"
  },
  "colors": [
    {
      "color": [57, 118, 29, 175],
      "label": "default",
      "pattern": "full"
    }
  ]
}

Camada com Ação openFeature

{
  "id": "monumentos",
  "name": "Monuments",
  "origin": "https://geoserver.slui.dev/geoserver/slui/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=slui:monumentos&maxFeatures=10000&outputFormat=json&srsName=EPSG:4326",
  "isActive": true,
  "type": "GeoJsonLayer",
  "isVisible": true,
  "minZoom": 14,
  "getTextColorPropName": null,
  "getFillColorPropName": null,
  "getLineColorPropName": null,
  "clickAction": { "action": "openFeature", "template": "root" },
  "groupId": "patrimonio",
  "properties": {
    "stroked": true,
    "filled": true,
    "pointType": "circle",
    "pickable": true,
    "getLineWidth": 10,
    "getPointRadius": 5,
    "getTextSize": 10,
    "autoHighlight": true,
    "highlightColor": [255, 255, 0, 200]
  },
  "colors": [
    {
      "color": [200, 50, 50, 200],
      "label": "default",
      "pattern": "dots"
    }
  ]
}

Camada com tipo CustomWMSLayer

{
  "id": "aguas_correntes_estimadas",
  "name": "Águas Correntes Estimadas",
  "origin":
    "https://geoserver.slui.dev/geoserver/slui/wms?LAYERS=slui%3Aaguas_correntes_estimadas&FORMAT=image%2Fjpeg&TRANSPARENT=true",
  "isActive": true,
  "type": "CustomWMSLayer",
  "isVisible": false,
  "minZoom": null,
  "getTextColorPropName": null,
  "getFillColorPropName": null,
  "getLineColorPropName": null,
  "groupId": "areas_publicas",
  "colors": [
    {
      "color": [65, 120, 216, 240],
      "label": "default",
    },
  ],
},