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
コードエディタで、次の変更を加えます。
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に進みます。