如何使用Leaflet在Angular中构建地图，第3部分：弹出服务

介绍

Leaflet 支持 弹出窗口。单击地图上的标记或指定区域时，将出现包含文本的弹出窗口。这提供了一种在地图上显示附加信息的方法。

注意： 这是关于使用 Angular 和 Leaflet 的 4 部分系列的第 3 部分。

在本教程中，您将学习如何使用服务将弹出窗口添加到地图以管理弹出逻辑。

先决条件

要完成本教程，您需要：

本教程直接建立在上一部分中的安装和步骤之上。

第 1 步 - 创建弹出服务

此时，您应该在 Angular 应用程序中实现了 Leaflet。

使用终端窗口导航到项目目录。然后，运行以下命令以生成新服务：

npx @angular/cli generate service popup --skip-tests

这将创建一个新文件：popup.service.ts。

接下来，您将在 app.module.ts 中添加此新服务作为提供程序。

在代码编辑器中打开 app.module.ts 并进行以下更改：

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { HttpClientModule } from '@angular/common/http';
import { MarkerService } from './marker.service';
import { PopupService } from './popup.service';

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

@NgModule({
  declarations: [
    AppComponent,
    MapComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    MarkerService,
    PopupService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

您的应用程序现在支持您的新 PopupService。

第 2 步 - 显示弹出窗口

在代码编辑器中打开新创建的 popup.service.ts。并声明一个 makeCapitalPopup 函数：

src/app/popup.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class PopUpService {
  constructor() { }

  makeCapitalPopup(data: any): string { }
}

此函数将创建弹出窗口，其中包含来自第 2 部分中使用的 GeoJSON 文件的数据。

添加大写的 name、state 和 population：

src/app/popup.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class PopUpService {
  constructor() { }

  makeCapitalPopup(data: any): string {
    return `` +
      `<div>Capital: ${ data.name }</div>` +
      `<div>State: ${ data.state }</div>` +
      `<div>Population: ${ data.population }</div>`
  }
}

然后，您需要重新访问 MarkerService 并导入 PopupService：

src/app/marker.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet';
import { PopupService } from './popup.service';

并注入 PopupService：

src/app/marker.service.ts

constructor(
  private http: HttpClient,
  private popupService: PopupService
) { }

通过将服务添加到 app.modules.ts 中的 providers 节，您将服务创建为整个应用程序的单例提供程序，因此 Angular 不会抱怨依赖关系。

在 MarkerService 文件中，添加 bindPopup() 方法：

src/app/marker.service.ts

makeCapitalCircleMarkers(map: L.map): void {
  this.http.get(this.capitals).subscribe((res: any) => {
    const maxVal = Math.max(...res.features.map(x => x.properties.population), 0);

    for (const c of res.features) {
      const lat = c.geometry.coordinates[0];
      const lon = c.geometry.coordinates[1];
      const circle = L.circleMarker([lon, lat], {
        radius: MarkerService.ScaledRadius(c.properties.population, maxVal)
      });

      circle.bindPopup(this.popupService.makeCapitalPopup(c.properties));

      circle.addTo(map);
    }
  });
}

保存您的更改。然后，停止您的应用程序并重新启动它。在 Web 浏览器 (localhost:4200) 中打开应用程序并与其中一个标记进行交互：

您现在有一个支持弹出窗口的地图。

结论

在这篇文章中，您创建了一个构建弹出窗口的弹出服务。您学习了如何使用 L.bindPopup 将弹出窗口附加到标记。

继续阅读本系列的第 4 部分关于使用 Angular 和 Leaflet 。