This content originally appeared on DEV Community and was authored by Mateus Bougleux
Com mais de 7 milhões de registros e a necessidade de transformar dados em insights acionáveis, como podemos utilizar tecnologias geoespaciais para criar mapas interativos eficientes? Neste artigo, exploramos como Laravel e MySQL podem enfrentar esse desafio de maneira escalável e eficaz.
O Desafio Inicial
O projeto surgiu com a seguinte demanda: “Temos mais de 7 milhões de registros em uma tabela no MySQL e queremos gerar valor com esses dados.”
A primeira coisa que muitas pessoas pensam é: “Qual linguagem usar para construir a aplicação?” Contudo, frequentemente esquecemos o artefato mais crucial nesse tipo de situação: o banco de dados. Será que ele aguenta a demanda? Preciso migrar? Mudar a estrutura? Será que o MySQL é capaz de lidar com essa carga?
Minha resposta inicial foi: “Provavelmente, o MySQL consegue resolver isso.” Mas antes de mergulhar no desafio do polígono (que é uma história à parte), precisamos entender como o MySQL lidará com os filtros. Quais são os filtros necessários? Quais atributos realmente importam?
A tabela em questão tinha dezenas de atributos, mas poucos eram relevantes para a solução (como de costume). Validamos as possibilidades de preenchimento nos filtros e criamos algumas restrições para afinar as buscas.
Como estamos falando sobre mapa, presumimos que a base da busca vai ser a cidade ou algo mais específico, nesse caso eram os bairros. Sabendo disso, a partir da seleção do estado e da cidade por parte do usuário, podemos buscar todos os bairros da cidade, permitindo o uso de um select2 onde o usuário pudesse escolher a partir de uma estrutura controlada.
Assim, com o bairro preenchido, poderíamos disponibilizar outros filtros, como nomes, categorias, avaliações e outras possíveis características. Isso tornaria as buscas ainda mais precisas, oferecendo aos usuários a capacidade de encontrar exatamente o que procuram, sem comprometer a performance do sistema.
Com essa abordagem, conseguimos criar filtros dinâmicos e bem definidos, permitindo a escrita de queries mais completas e otimizadas. Além disso, com a aplicação de alguns índices adequados, garantimos especificidade nas buscas. Até aqui, o filtro estava resolvido.
Agora, o desafio do polígono. Mas antes disso, vamos falar sobre a aplicação que dá suporte a tudo isso.
A Aplicação
Sabendo da quantidade massiva de registros, mas que apenas uma fração seria renderizada simultaneamente no mapa, a aplicação foi planejada com foco na eficiência. Para isso, escolhi uma stack robusta e flexível que pra mim é (como eu normalmente digo) “Toque me voi”: Laravel e React.
Laravel
O back-end, desenvolvido com Laravel 11, utilizei o Breeze para estruturar rapidamente a base do projeto e permitir foco nas funcionalidades críticas. Além da arquitetura MVC padrão, adicionei camadas de Service e Repository para organizar responsabilidades e facilitar a manutenção do código.
React
No front-end, a aplicação foi totalmente modularizada com React. Componentes bem definidos e o uso de partials garantiram a reutilização de elementos e um fluxo claro de comunicação entre as partes do sistema. Essa organização permitiu que o front-end se comunicasse eficientemente com o back-end através de requisições Axios, garantindo simplicidade e eficiência.
Vale Saber
Embora o projeto fosse inicialmente interno e de baixa demanda, a arquitetura foi projetada para possibilitar escalabilidade futura, como o uso de serviços independentes na AWS com por exemplo, Fargate para a API e CloudFront para o front-end.
Essa arquitetura é possível porque toda a interação acontece via API, e o serviço não mantém estado no lado do servidor, o que facilita a separação de responsabilidades.
Testes
A estabilidade do sistema foi garantida com uma suíte de testes robusta, implementada em Pest, cobrindo 22 endpoints com cerca de 500 testes. Adotar uma abordagem orientada a testes trouxe confiança nos deploys e eficiência na manutenção, mostrando o valor indispensável dessa prática no desenvolvimento de software escalável e confiável.
O core da aplicação
A parte central da aplicação gira em torno do mapa. Para gerenciar essa funcionalidade, utilizei o Leaflet, uma biblioteca leve e poderosa para manipulação de mapas, complementada por alguns pacotes que trouxeram mais eficiência e recursos.
Clusterização de Markers
Uma das principais otimizações foi feita com o pacote react-leaflet-markercluster, que permite agrupar os markers em clusters dinâmicos. Como a aplicação lida com um grande número de pontos no mapa, tentar renderizar todos de uma só vez resultaria em uma degradação significativa de desempenho. Com a clusterização, conseguimos:
- Reduzir a sobrecarga de renderização, agrupando markers próximos.
- Melhorar a experiência do usuário, exibindo os pontos de forma mais limpa e organizada.
- Manter a performance estável, mesmo com milhares de registros.
Desenho de Polígonos
Outro elemento crucial foi o react-leaflet-draw, utilizado para permitir que os usuários desenhem polígonos diretamente no mapa. Esse recurso possibilitou:
- Capturar as coordenadas dos vértices do polígono desenhado.
- Usar essas coordenadas para construir uma query no banco de dados, filtrando os registros com base na interseção dos pontos.
Integração e Usabilidade
Os filtros adicionais, como seleção de estado, cidade e bairro, foram incorporados diretamente no fluxo do mapa. Isso garantiu uma experiência intuitiva, onde o usuário pode refinar sua busca antes ou depois de desenhar o polígono.
Além disso:
- Camadas personalizadas foram configuradas no Leaflet para diferenciar tipos de registros, categorias e outros atributos relevantes.
- O mapa foi otimizado para lidar com lazy loading de pontos, carregando apenas os dados visíveis na área em foco, o que ajuda a reduzir a sobrecarga no cliente e no servidor.
A Tabela e Índices
A tabela utilizada é semelhante a uma tabela de usuários comum, mas com foco no endereço e uma coluna específica para armazenar os pares de coordenadas. Essas coordenadas são armazenadas em uma coluna do tipo POINT, que representa um ponto no espaço em um sistema de coordenadas geográficas ou cartesianas. Além disso, foi adicionado um índice geoespacial para otimizar as consultas.
Como Funciona o Índice Geoespacial
O índice geoespacial é uma estrutura especializada para acelerar consultas relacionadas a dados espaciais, como pontos, linhas e polígonos. No caso do MySQL, o índice espacial é implementado usando R-Tree (Regional Tree) em tabelas do tipo MyISAM ou InnoDB para colunas do tipo POINT, LINESTRING ou POLYGON.
Otimização com o Índice Geoespacial
Armazenamento Estruturado
O índice organiza os dados espaciais de forma hierárquica, dividindo-os em regiões menores que representam partes do espaço. Isso permite localizar rapidamente quais áreas são relevantes para uma consulta específica.Consultas com Funções Espaciais
As funções espaciais do MySQL, como ST_Contains, ST_Within e ST_Intersects, utilizam o índice para identificar quais registros se encontram dentro de uma área específica, como um polígono desenhado no mapa.Exemplo: A função **ST_Contains **verifica se um polígono contém um ponto e utiliza o índice para determinar rapidamente quais pontos estão dentro do polígono.
SELECT id, name, address
FROM users
WHERE ST_Contains(
ST_GeomFromText('POLYGON((...))'),
coordinates
);
-- Esse é um exemplo de escrita para buscar registros dentro de um polígono.
Nessa consulta:
-
ST_GeomFromTextcria o polígono baseado nas coordenadas enviadas pela aplicação. -
ST_Containsusa o índice geoespacial para verificar quais pontos estão dentro do polígono.
Considerações Finais
Ao concluir o projeto, alguns pontos de aprendizado e observações se destacaram. Estes detalhes podem ser úteis para quem trabalha com projetos similares e busca otimizar tanto o desempenho quanto a arquitetura das aplicações.
1. Migração das Coordenadas
As coordenadas previamente existentes estavam em colunas separadas (latitude e longitude), o que inviabilizava o uso direto do índice geoespacial. Para resolver isso:
Foi necessário criar um script que percorresse os registros e os transformasse em uma nova coluna chamada coordinates, do tipo POINT.
Esse processo garantiu a compatibilidade com o índice espacial e viabilizou a utilização das funções geoespaciais do MySQL.
2. Eficiência no JavaScript
Embora o JavaScript seja versátil, a escolha do método de iteração pode impactar a performance dependendo do contexto. Um exemplo prático:
- O uso do array.map é comum por sua sintaxe limpa e funcionalidade, mas pode ser menos performático em comparação com um loop for...in dependendo da situação.
- É importante analisar o caso específico e realizar testes de desempenho para determinar qual abordagem é mais eficiente.
3. Soluções Alternativas para Otimização
Sempre busque formas de melhorar a eficiência e a experiência do usuário. No contexto deste projeto, algumas técnicas foram essenciais:
- Lazy Loading: Carregar os dados apenas quando eles são necessários, como ao aproximar ou mover o mapa, reduziu significativamente a carga na aplicação e no servidor.
- Clusterização: Mostrar grupos de registros em vez de pontos individuais evitou a sobrecarga de renderização e melhorou a experiência de visualização no mapa.
4. Tratamentos e Validações Concretas
Um dos maiores gargalos de performance pode ser causado por retrabalhos desnecessários na busca de dados. Exemplos de boas práticas incluem atualizações localizadas, se um registro precisa ser atualizado (como o status em um relatório), execute o update no banco, e se for retornado sucesso atualize apenas o necessário no front sem buscar todo data set novamente.
Projetos como esse mostram como pequenos detalhes fazem a diferença na performance e escalabilidade de uma aplicação. Investir em otimizações direcionadas, evitar desperdícios de recursos e adotar boas práticas de desenvolvimento garante não apenas um melhor desempenho, mas também uma base sólida para crescer com o projeto.
Último mas não menos importante: Mantenha o foco na entrega.
This content originally appeared on DEV Community and was authored by Mateus Bougleux
Mateus Bougleux | Sciencx (2025-01-29T14:48:17+00:00) Geoespacial no Laravel: Otimizações para Mapas Interativos e Grandes Volumes de Dados. Retrieved from https://www.scien.cx/2025/01/29/geoespacial-no-laravel-otimizacoes-para-mapas-interativos-e-grandes-volumes-de-dados/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.