O Guia Simples de Mapas Angulares

BY admin
|

O folheto é um dos principais quadros cartográficos baseados em Javascript. Ele é amplamente utilizado em toda a indústria para adicionar mapas interativos a sites e aplicativos.

No entanto, pode ser complicado incluir em aplicativos Angular.io. Não joga exatamente bem com Angular.io ou Typescript. Depois que eu tive a aventura de migrar um site baseado em mapas para Angular 8 ficou claro para mim que não havia uma referência realmente boa para esta tarefa. Estes posts são a minha tentativa de documentar as aprendizagens. (ATUALIZAÇÃO: Embora este artigo tenha sido escrito para o Angular 8 – as aplicações e métodos ainda estão a funcionar no Angular 11).

Este vai ser um post com várias partes :

  • O básico (este post),
  • Adicionando Controles,
  • Funções & Controles Dinâmicos,
  • Controles Personalizados, e

    • >

  • Ir para PWA – trabalhadores de serviço e mais

    • >

>

O objectivo desta série é que você será capaz de criar um Mapa de Folhetos num projecto baseado em Angular-CLI sem complicações, confusão e becos sem saída.

Acontece que, apesar de adicionar o Leaflet ao Angular.io não ser significativamente difícil, é muito “trabalhoso” uma vez que o Leaflet não é particularmente amigável ao Angular (ou Typescript). O Folheto usa uma estrutura global L variável e .extend métodos que confundem o TS. Ele também processa um volume de eventos que trariam as aplicações angulares a seus joelhos se fossem colocadas através da detecção de mudanças.

Felizmente, há um bom ponto de partida em @asymmetrik/ngx-leaflet. Isto fornece uma boa configuração para mapas básicos. também vem com um par de bons tutoriais para mapas básicos (aqui e aqui) mas eles parecem ter perdido o interesse antes de chegarem às coisas mais difíceis.

Próximo Início

Como pela documentação, você precisa instalar :

npm install leaflet
npm install @types/leaflet
npm install @asymmetrik/ngx-leaflet

e adicionar as importações ao app.module.ts.

Neste ponto – você pode praticamente adicionar um mapa simples ao aplicativo, então você pode pensar sobre o que foi a confusão – mas estamos chegando a isso.

CSS Complicações

Primeiro, precisamos falar sobre o CSS. Ngx-leaflet corre o folheto fora do próprio Angular – o que eu entendo ser a melhor maneira de evitar os eventos do Folheto causando múltiplos eventos de mudança no Angular.

No entanto, provavelmente por causa disso, o Folheto não se encaixa no sistema de encapsulamento do Angular.io CSS e todas as referências do CSS têm que estar no nível global.

Isso geralmente significa que você adiciona o CSS em angular.json da seguinte forma

{
...
"styles": ,
...
}

ou em styles.css:

@import "./node_modules/leaflet/dist/leaflet.css"

Isso também é verdade para as folhas de estilos de cada controle, o que se torna desgastante já que, em Leaflet, cada controle tem seu próprio CSS. Descobri que o melhor foi adicionar o CSS do folheto a angular.json e o CSS do controle individual a styles.css principalmente para melhor legibilidade.

Note que, em ambos os casos, o folheto.css deve ser processado antes do outro CSS em styles.css. Caso contrário, o CSS para os controles não será eficaz.

Complicações do compilador

É também aqui que começamos a encontrar uma das primeiras complicações do compilador.

Aplicações baseadas em folhetos criados como este funcionam para ng build e funcionam com "aot": true mas parecem falhar mal para o padrãong build --prod configuração.

Parece estar em torno da otimização e eu acho que talvez até de trepidação. Após alguma experimentação, descobri que ng build --prod funciona de forma confiável desde que "buildOptimizer": false esteja em angular.json.

Não Seja Apanhado em L

A maior parte dos tutoriais e documentação dir-lhe-á que precisa de trazer a variável global L para o typescript usando a seguinte importação :

import * as L from 'leaflet'

Isso é verdade se quiser usar o código JS existente directamente no TS, mas descobri que desde que carregue @types/leaflet pode importar os typedefs pelo nome de 'leaflet' (e.g. import {Map} from 'leaflet' e tudo funciona como esperado. Isto torna o seu código TS muito mais legível e, bem, TS-ish!

A Simple Map

So. Vamos criar o nosso mapa. No exemplo abaixo, estou criando um mapa OpenStreetMap (já que é nisso que meu aplicativo funciona) como um componente separado. Neste nível, isso pode parecer um trabalho extra, mas veremos mais tarde, ele nos permite configurar um componente de mapa com recursos adicionais que podem ser reutilizados em vários lugares no fluxo da aplicação.

Este componente tem como padrão uma camada OSM e uma visão global nas opções – embora as opções sejam configuradas como @Inputs() para que os padrões possam ser substituídos pelo componente pai.

O componente mapa também emite eventos quando o mapa está pronto para que outras partes do aplicativo possam acessar o mapa, e após um evento de zoom com o novo nível de zoom. Você também pode emitir outros eventos tais como mover e layer events – mas isto é o que o meu aplicativo precisava e eu acho que ele demonstra o princípio. Vamos usar os eventos de mapa e zoom nas próximas seções.

O mapa é adicionado ao dom usando a diretiva ngx-leaflet no componente HTML.

Finalmente, o componente é usado adicionando o seguinte ao HTML pai:

<app-osm-map
="options"
(map$)="receiveMap($event)"
(zoom$)="receiveZoom($event)"
></app-osm-map>

Ler Isto Próximo