Leafletを使用してAngularでマップを作成する方法、パート3:ポップアップサービス
序章
リーフレットはポップアップをサポートします。 マップ上のマーカーまたは指定された領域をクリックすると、テキストを含むポップアップが表示されます。 これは、地図上に追加情報を表示する方法を提供します。
注:これは、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
)でアプリケーションを開き、マーカーの1つを操作します。
これで、ポップアップをサポートするマップができました。
結論
この投稿では、ポップアップを作成するポップアップサービスを作成しました。 L.bindPopup
を使用してポップアップをマーカーに添付する方法を学びました。
AngularとLeafletの使用に関するこのシリーズのパート4に進みます。