主页 / coding / 问题 / 79554840
Accepted
user24538254
Asked: 2025-04-04 16:31:50 +0800 CST

在 Angular 应用程序中实现 MapLibre GL

  • 772

我正在尝试按照本教程（https://maplibre.org/ngx-maplibre-gl/API/）在 Angular 应用程序中实现 MapLibre GL，但无法成功。

我不知道如何从教程中实现此代码：

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 {}

将其调整为类似

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() {}
}

只显示黑屏。

我完全不明白教程中的代码应该如何工作，因为如果我只是直接实现教程代码，我的编译器会说 对象文字可能只指定已知属性，并且“NgModule”类型中不存在“模板”。

你能让教程中的代码运行吗？怎么做？

非常感谢您的帮助🙂

angular

1 个回答

  1. Best Answer

    步骤非常简单。唯一可能导致此类问题的是将导入放在错误的位置。以下是两个可行示例standalone，modular供代码参考。

    首先我安装。

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

    然后将以下两个属性添加到tsconfig.json。

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

    然后添加样式表angular.json：

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

    有一件事是，当组件被创建时，它的高度和宽度将为零，这将导致地图被隐藏。所以我们需要将下面的 SCSS 添加到app.component.scss或styles数组中。

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

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

    最后将导入添加到应用程序组件中。

    独立方法：

    我们将组件和导入添加到应用程序组件。

    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);

    Stackblitz 演示

    模块化方法：

    我们将导入添加到app.module imports数组中。然后在应用程序组件中使用该组件。

    应用程序.模块.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 {}

    应用程序.组件.html

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

    Stackblitz 演示

    • 1

相关问题