Início / coding / Perguntas / 79554840
Accepted
user24538254
Asked: 2025-04-04 16:31:50 +0800 CST

Implementando MapLibre GL em um aplicativo Angular

  • 772

Estou tentando seguir este tutorial ( https://maplibre.org/ngx-maplibre-gl/API/ ) para implementar o MapLibre GL em um aplicativo Angular, mas não consigo.

Não entendi como implementar este código do tutorial:

import { Component } from '@angular/core';
import { MapComponent } from '@maplibre/ngx-maplibre-gl';

@NgModule({
  template: `
    <mgl-map
      [style]="'https://demotiles.maplibre.org/style.json'"
      [zoom]="[9]"
      [center]="[-74.5, 40]"
    >
    </mgl-map>
  `,
  styles: [
    `
      mgl-map {
        height: 100%;
        width: 100%;
      }
    `,
  ],
  imports: [MapComponent],
})
export class AppComponent {}

Adaptando-o a um componente como

import { Component } from '@angular/core';

@Component({
  selector: 'app-tabs',
  template: `
    <mgl-map
      [style]="'https://demotiles.maplibre.org/style.json'"
      [zoom]="[9]"
      [center]="[-74.5, 40]"
    >
    </mgl-map>
  `,
  styles: [
    `
      mgl-map {
        height: 100%;
        width: 100%;
      }
    `,
  ],
  standalone: false
})
export class MapPage {
  constructor() {}
}

só mostra uma tela preta.

Eu não entendo como o código do tutorial deveria funcionar, porque se eu apenas implementar o código do tutorial diretamente, meu compilador diz que o literal do objeto pode especificar apenas propriedades conhecidas, e 'template' não existe no tipo 'NgModule' .

Você consegue fazer o código do tutorial funcionar? Como?

Muito obrigado pela sua ajuda🙂

angular

1 respostas

  1. Best Answer

    Os passos são bem diretos. A única coisa que pode causar problemas como esse é ter a importação no lugar errado. Abaixo estão dois exemplos funcionais de standalonee modularpara referência de código.

    Primeiro eu instalei.

    npm install @maplibre/ngx-maplibre-gl maplibre-gl
yarn add @maplibre/ngx-maplibre-gl maplibre-gl

    Em seguida, adicionei as duas propriedades abaixo tsconfig.json.

    "compilerOptions": {
    ...
    "strictNullChecks": false,
    "skipLibCheck": true,
}

    Em seguida, adicionei a folha de estilo em angular.json:

    "styles": [
  ...,
  "./node_modules/maplibre-gl/dist/maplibre-gl.css"
],

    Uma coisa é que quando o componente é criado, ele terá altura e largura zero, o que fará com que o mapa fique oculto. Então, precisamos adicionar o SCSS abaixo ao app.component.scssnosso stylesarray.

    mgl-map {
  height: 100%;
  width: 100%;
}

:host {
  display: block;
  height: 500px;
  width: 100vh;
}

    Finalmente adicionei a importação no componente do aplicativo.

    Abordagem autônoma:

    Adicionamos o componente e a importação ao componente do aplicativo.

    import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { MapComponent } from '@maplibre/ngx-maplibre-gl';

@Component({
  selector: 'app-root',
  template: `
    <mgl-map
      [style]="'https://demotiles.maplibre.org/style.json'"
      [zoom]="[9]"
      [center]="[-74.5, 40]"
    >npm
    </mgl-map>
  `,
  styles: [
    `
    :host {
      display: block;
      height:500px;
      width:100vh;
    }
      mgl-map {
        height: 100%;
        width: 100%;
      }
    `,
  ],
  imports: [MapComponent],
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

    Demonstração do Stackblitz

    Método modular:

    Adicionamos a importação ao app.module importsarray. Então usamos o componente no componente do aplicativo.

    aplicativo.módulo.ts

    import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { MapComponent } from '@maplibre/ngx-maplibre-gl';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent],
  imports: [CommonModule, BrowserModule, MapComponent],
})
export class AppModule {}

    aplicativo.componente.html

    <mgl-map
  [style]="'https://demotiles.maplibre.org/style.json'"
  [zoom]="[9]"
  [center]="[-74.5, 40]"
>
</mgl-map>

    Demonstração do Stackblitz

    • 1

relate perguntas