Leafletを使用してAngularでマップを作成する方法、パート3：ポップアップサービス

序章

リーフレットはポップアップをサポートします。 マップ上のマーカーまたは指定された領域をクリックすると、テキストを含むポップアップが表示されます。 これは、地図上に追加情報を表示する方法を提供します。

このチュートリアルでは、サービスを使用してポップアップロジックを管理し、マップにポップアップを追加する方法を学習します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

• このチュートリアルは、前のパーツのインストールと手順に直接基づいています。

ステップ1—ポップアップサービスを作成する

この時点で、AngularアプリケーションにLeafletの実装が機能しているはずです。

ターミナルウィンドウを使用して、プロジェクトディレクトリに移動します。 次に、次のコマンドを実行して、新しいサービスを生成します。

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

これにより、新しいファイルが作成されます。 popup.service.ts.

次に、この新しいサービスをプロバイダーとして追加します app.module.ts.

開ける 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 関数：

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

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

  makeCapitalPopup(data: any): string { }
}

この関数は、パート2で使用されたGeoJSONファイルからのデータを含むポップアップを作成します。

首都を追加する name, state、 と population:

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:

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

そして、注入します PopupService:

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

にサービスを追加することにより providers 内のスタンザ app.modules.ts、アプリケーション全体に対するシングルトンプロバイダーとしてサービスを作成しているため、Angularは依存関係について文句を言うことはありません。

まだ中に MarkerService ファイル、追加 bindPopup() 方法：

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）そしてマーカーの1つと相互作用します：

これで、ポップアップをサポートするマップができました。

結論

この投稿では、ポップアップを作成するポップアップサービスを作成しました。 マーカーにポップアップを添付する方法を学びました L.bindPopup.

AngularとLeafletの使用に関するこのシリーズのパート4に進みます。