1.1.3 • Published 4 months ago
codevasf-map v1.1.3
codevasf-map
Componentes React + OpenLayers para desenvolvimento de projetos WEB da CODEVASF.
Recursos
-- react com typescript
-- sass
-- classNames
-- openLayersComponentes
╚> Map: Cria o objeto Map do OL.
-->name: <sting> Seta um nome para o mapa. Necessário pra usar alguns eventos.
-->center: [<number>,<number>] Ponto central inicial do mapa.
-->zoom: <number> Zoom inicial do mapa.
-->minZoom: <number> Zoom mínimo permitido pelo mapa.
-->maxZoom <number> Zoom máximo permitido pelo mapa.
-->projection: <"EPSG:31983" | Sistema de Projeção utilizado no mapa.
"EPSG:31984" |
"EPSG:4674" |
"EPSG:4326">
╚> Controls: Agrupa os controles do mapa. (Ajuda a organizar o código)
--Title: Adiciona um título ao mapa.
--Scale: Mostra uma escala gráfica no mapa.
--Attributions: Permite visualizar as informações de atribuições na 'source' das camadas.
--Legend: Adiciona legenda ao mapa, onde é possivel alterar o estado das camadas.
-->collapsable <boolean> Habilita o botão de colapsar.
-->collapseImage <string> Caminho para a image de fundo do botão de colapsar.
-->collapsePositionButton <'top_right' | 'top_left'> Posição do botão para colapsar.
--DragAndDrop: Adiciona a interação de DragAndDrop arquivos KML's ao mapa.
-->collapsable <boolean> Habilita o botão de colapsar.
-->collapseImage <string> Caminho para a image de fundo do botão de colapsar.
-->collapsePositionButton <'top_right' | 'top_left'> Posição do botão para colapsar.
-->showControl <boolean> Exibe/Oculta o controle.
-->showFeaturesProperties <boolean> Habilita um popup que mostra as propriedades da feição, quando o mouse repousa sobre esta.
--Toolbar: Adiciona uma toolbar ao mapa. 'Tools' podem ser filhos deste componente.
--Tool: Adiciona uma ferramenta a 'Toolbar'. 'Tools' são "buttons" e aceitam suas propriedads HTML.
-->active: <boolean> Indica que a ferramenta está ativa.
É possivel controlar a posição dos controles através do atributo 'className' com CSS ou tailwind.
╚> Events: Agrupa os eventos externos que interagem com o mapa.
--AddFeatures: Adiciona um 'listener' ao mapa, que ao ouvir um evento do tipo 'AddFeatureEvent' adiciona as feições fornecidas.
--AddFeaturesEvent: Evento que quando disparado adiciona feições ao mapa, caso este possua o evento 'AddFeatures'.
-->features: <Feature[]> Feições a serem adicionadas.
-->layerTitle?: <string> Titulo da camada que será criada.
-->zoomTo?: <boolean> Ao adicionar, dá zoom nas feições adicionadas.
--AddLayer: Adiciona um 'listener' ao mapa, que ao ouvir um evento do tipo 'AddLayerEvent' adiciona a camada fornecida.
--AddLayerEvent: Evento que quando disparado adiciona uma camada ao mapa, caso este possua o evento 'AddLayer'.
-->layer: <CustomLayer> Camada a ser adicionada.
-->mapName: <string> ID do mapa que a camada será adicionada.
-->zoomTo?: <boolean> Ao adicionar, dá zoom na camada adicionadas.
--FitToFeatures: Adiciona um 'listener' ao mapa, que ao ouvir um evento do tipo 'FitToFeatureEvent' executa zoom nas feições fornecidas.
--FitToFeaturesEvent: Evento que quando disparado faz com que o mapa centre nas feições fornecidas, caso este possua o evento
'FitToFeatures'.
-->features: <Feature[]> Feições a serem exibidas.
--RemoveFeatures: Adiciona um 'listener' ao mapa, que ao ouvir um evento do tipo 'RemoveFeaturesEvent' remove as feições fornecidas da
camada fornecida.
--RemoveFeaturesEvent: Evento que quando disparado remove as feições fornecidas da camada presente no mapa, caso este possua o evento
'Removefeature'.
-->layerTitle: <string> Título da camada para remover feições.
-->features: <Feature[]> Feições a serem removidas.
--RemoveLayer: Adiciona um 'listener' ao mapa, que ao ouvir um evento do tipo 'RemoveLayerEvent' remove todas as camada com o
titulo fornecido.
--RemoveLayerEvent: Evento que quando disparado remove todas as camadas com o título fornecido, necessário que o mapa tenha o evento
'RemoveLayer'.
-->layerTitle: <string> Título das camadas que serão removidas.
╚> TileLayers: Agrupa as camadas de base. (Ajuda a organizar o código)
-- OpenStreetLayer: Adiciona uma camada OSM ao mapa.
--> standard: <boolean> Define que a camada será exibida inicialmente.
--> order: <number> Define a ordem da camada na legenda.
--> zIndex: <number> Define a ordem de exibição da camada.
Camadas com valores mais baixos são sobrepostas.
-- GoogleLayer: Adiciona uma camada do Google ao mapa.
Necessário API do Google para funcionar, o valor da API deve estar guardada na variável NEXT_PUBLIC_API_KEY ou API_KEY.
--> mapType?: <'hybrid' | 'roadmap' | 'satellite' | 'terrain'>
--> standard: <boolean> Define que a camada será exibida inicialmente.
--> order: <number> Define a ordem da camada na legenda.
--> zIndex: <number> Define a ordem de exibição da camada.
Camadas com valores mais baixos são sobrepostas.
╚> VectorLayers: Agrupa as camadas vetoriais. (Ajuda a organizar o código)
-- Layer: Adiciona uma camada vetorial ao mapa.
-->layer: <CustomLayer> Layer que servirá de base para a camada.
Caso omitida, será adicionada a padrão.
-->fit: <boolean> Enquadra a camada no mapa após seu carregamento.
-->attributions: <string | string[]> Adiciona fontes a camada, são exibidas com o control "Attributions".
-->data: <object> Dados a serem exibidos no mapa, no formato GeoJSON.
-->title: <string> Adiciona um titulo a camada, visivel na legenda.
-->minZoom: <number> Zoom mínimo que a camada será exibida.
-->maxZoom <number> Zoom máximo que a camada será exibida.
-->zIndex <number> Define a ordem de exibição da camada.
Camadas com valores mais baixos são sobrepostas.
-->geometry: <'Point' | Geometria das feições da camada.
'LineString' | Não altera a exibição, apenas utilizada pra definir o ícone que aparecerá na legenda.
'Polygon' |
undefined>
╚> AttributesTable: Exibe um popup com informações sobre as feições. É possível dar zoom em feições específicas, através de
filtros e botões.
-->popup: <Window> Se fornecido, vincula todos os eventos a esta janela.
-->mapName: <string> Requerido para manipulação de eventos de interação entre a tabela e o mapa.
-->layer: <CustomLayer> Camada do map que terá as informações exibidas.
-->fields: <FieldType[]> Lista de campos que serão exibidos como colunas. Há várias opções de customização.
Caso não seja fornecido, todos os campos existentes serão exibidos.
-->options:
-allowDelete: <boolean> Permite apagar feições.
-allowDownload: <boolean> Permite baixar a camada como um arquivo KML.
-apiURL: <string> URL que permite salvar as edições para o banco de dados na API da CODEVASF.
-filters <boolean> Adiciona ferramentas de filtro a tabela.
-header: <boolean> Exibe ou não o cabeçãrio da tabela.
-multipleEdit: <boolean> Permite alterar atributos de multiplas feições.
╚> style:
--Style: Disponibiliza o estilo da camada para os elementos-filhos.
-->visible: <boolean> Define se a camada será exibidade por padrão.
--Stroke: Altera a linha da camada.
Utilizar as propriedades de ['FlatStroke do OL'](https://openlayers.org/en/latest/apidoc/module-ol_style_flat.html#~FlatStroke).
--Fill: Altera o preenchimento da camada.
Utilizar as propriedades de ['FlatFill do OL'](https://openlayers.org/en/latest/apidoc/module-ol_style_flat.html#~FlatFill).
--Icon: Faz o estilo da camada ser um Ícone.
Utilizar as propriedades de ['FlatIcon do OL'](https://openlayers.org/en/latest/apidoc/module-ol_style_flat.html#~FlatIcon).
--FeatureLabel: Adiciona rótulos as feições de um estilo.
-->expression: <string> Template para criar os rótulos. Para utilizar valores presentes nas feições utilize o template
'{propriedade}'. P.ex: a expressão '{municipio}' exibirá 'valor_propriedade_municipio', para as feições que possuirem a prorpriedade 'municipio'.
OBS: Utilizar as propriedades de ['FlatText do OL'](https://openlayers.org/en/latest/apidoc/module-ol_style_flat.html#~FlatText).
É possível adicionar uma padrão pra todas as categorias, colocando o elemento 'FeatureLabel' como filho de 'CategorizedStyle'.
--CategorizedStyle: Cria um estilo categorizado para a camada. Necessário adicionar elementos "Category" para estilizar.
-->collapsed: <boolean> Define se o item na legenda começara ou não colapsado.
-->visible: <boolean> Define se a camada será exibidade por padrão.
-->field: <string> Campo que irá categorizar a camada.
P.ex: Categorizar Municípios pelo "field" nome.
--Category: Cria uma categoria para um estilo categorizado.
--->label: <string> Rotulo da categoria que aparecerá na legenda.
Caso não seja fornecido, o valor usado será o 'value'.
--->geometry: <'Point' | Tipo de ícone que aparecerá na legenda.
'LineString' | Caso não seja fornecido será usado a geometria da camada.
'Polygon' |
undefined>
--->value: Valor de filtro das feições.
O filtro utiliza a propriedade "field" de "CategorizedStyle".
--->value = 'NO_CATEGORY' Exibe e estiliza as feições que não foram categorizadas.
OBS: 'Stroke', 'Fill' e 'FeatureLabel' também podem ser utilizados como filhossde 'Category'.
╚> interactions:
--Interactions: Agrupa as interações das camadas vetoriais. (Ajuda a organizar o código).
--Hover: Seleciona a feição a qual o mouse está parado.
--Click: Seleciona uma feição ao clicar nela.
--->zoomToFeature: <boolean> Dá zoom na feição selecionada.
--SelectedInfoControl: Exibe um controle com conteúdo gerado pela 'factory'.
-->collapsable <boolean> Habilita o botão de colapsar.
-->collapseImage <string> Caminho para a image de fundo do botão de colapsar.
-->collapsePositionButton <'top_right' | 'top_left'> Posição do botão para colapsar.
-->factory: (<Feature>) => ReactNode Função que recebe uma feição e retorna o contéudo do 'control'.
--SelectControl: Adiciona uma barra com um "select" para a interação pai deste elemento.
--->fieldValue: <string> Campo da feição o qual as opçoes do "select" serão prenchidas, as opções terão todos
valores distintos deste campo.
--->expression: <string?> Template para criar os textos das opções. Para utilizar valores presentes nas feições utilize o template
'{propriedade}'. P.ex: a expressão '{municipio}' exibirá 'valor_propriedade_municipio', para as feições que possuirem a prorpriedade 'municipio'.
--->label: <string?> Rótulo que aparecerá antes do 'select' neste 'control'.
--->labelClassName: <string> Classname CSS para a label.
--->collapsable: <boolean> Adicona um botão para colapsar o 'control'.
OBS: 'SimpleStyle' e 'CategorizedStyle' também podem ser utilizados como filhos de 'Hover' e 'Click'.
╚> events:
--LayerProgressEvent: Evento para ouvir o progresso de carregamento de uma camada.
-->layerTitle: <string> Título da camada que emitiu o evento.
-->progress <number> Progresso do carregamento.
--LayerStatusEvent: Evento para ouvir o status de carregamento de uma camada.
-->layerTitle: <string> Título da camada que emitiu o evento.
-->status "loading" | Status da camada.
"complete |
"error"
-- URLDataLayer: Extensão de "Layer". Usa dados adquiridos de uma URL:
--> url: <string> URL para aquisição dos dados.
Deve conter o cabeçário 'Content-Type' com os valores:
>application/json: para dados GeoJSON.
>application/vnd.google-earth.kml+xml: para dados KML;
--> urlInit: <RequestInit> Opções para a função 'fetch'.
-- APIDataLayer: Extensão de "Layer". Usa dados adquiridos de uma URL:
--> database: <string> Tabela do banco de dados presente na API da CODEVASF.
--> urlInit: <RequestInit> Opções para a função 'fetch'.
--> groupField: <string> Campo para adquirir as versões dos dados do banco de dados.
P.ex: A área de atuação está presente no banco de dados na tabela 'municipios',
suas versões são consideradas utilizando o coluna "codigo".
Consulte a API para obter mais informações.