Leafletを使用してAngularでマップを作成する方法、パート1:マップの生成
序章
Leaflet は、マップを作成するためのJavaScriptライブラリです。 それは素晴らしい機能が満載されており、非常にモバイルフレンドリーです。
注:これは、AngularとLeafletの使用に関する4部構成のシリーズのパート1です。
このライブラリを使用して、クリックアンドドラッグによるズームインとズームアウトおよびパンをサポートするマップを表示できます。
このチュートリアルでは、LeafletをAngularアプリに統合する方法を学習します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- AngularプロジェクトのセットアップおよびAngularコンポーネントの使用にある程度精通していると有益な場合があります。
このチュートリアルは、ノードv15.12.0、npm
v7.7.4、angular
v11.2.7、およびleaflet
v1.7.1で検証されました。
ステップ1—プロジェクトの設定
@ angle / cli を使用して、新しいAngularプロジェクトを作成できます。
ターミナルウィンドウで、次のコマンドを使用します。
- npx @angular/cli new angular-leaflet-example --style=css --routing=false --skip-tests
これにより、スタイルが「CSS」(「Sass」、「Less」、「Stylus」ではなく)に設定され、ルーティングがなく、テストがスキップされる新しいAngularプロジェクトが構成されます。
新しく作成されたプロジェクトディレクトリに移動します。
- cd angular-leaflet-example
プロジェクトフォルダから、次のコマンドを実行してleaflet
をインストールします。
- npm install leaflet@1.7.1
このスキャフォールディングを設定すると、マップコンポーネントでの作業を開始できます。
ステップ2—マップコンポーネントを作成する
これで、カスタムマップコンポーネントを作成できます。
- npx @angular/cli generate component map --skip-tests
このコマンドは、map.component.css
、map.component.html
、およびmap.component.ts
の4つの新しいファイルを生成します。 また、この新しいコンポーネントを使用するようにapp.module.ts
ファイルを更新します。
次に、map.component.ts
を開き、コンテンツを次のコード行に置き換えます。
<div class="map-container">
<div class="map-frame">
<div id="map"></div>
</div>
</div>
次に、map.component.css
を開き、コンテンツを次のコード行に置き換えます。
.map-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 30px;
}
.map-frame {
border: 2px solid black;
height: 100%;
}
#map {
height: 100%;
}
マークアップとスタイルのこの組み合わせにより、.map-container
のクラスで最も外側のdiv
が作成され、画面上の使用可能なスペースを占めるようにマップが配置されます。
また、IDが#map
のdiv
も作成されます。 ここでクラスの代わりにidを使用することは重要です。これは、Leafletがマップを配置するためにid
が渡されることを想定しているためです。
次に、map.component.ts
を開き、Leafletパッケージをインポートします。
import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
constructor() { }
ngOnInit(): void { }
}
マップdiv
は、マップを参照するために参照する前に、DOMに存在する必要があります。 これは、AfterViewInit
ライフサイクルフックの間に可能です。 コンポーネントを拡張してAfterViewInit
を実装し、ngAfterViewInit()
関数をコンポーネントに追加します。
import { Component, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements AfterViewInit {
constructor() { }
ngAfterViewInit(): void { }
}
initMap()
という別のプライベート関数を作成して、すべてのマップの初期化を分離しましょう。
この関数では、新しい Leafletmapオブジェクトを作成する必要があります。 APIを使用すると、APIでオプションを定義することもできます。
このチュートリアルでは、マップの中心と開始ズーム値を設定します。
中心は、39.828175°N98.579500°Wに位置する隣接する米国の地理的中心になります。
Leafletが使用する10進座標系は、本初子午線の西側が負の数になると想定しているため、実際の中心座標は[ 39.8282, -98.5795 ]
になります。
また、ズームレベルは3に設定されます。
マップオブジェクトの変数を宣言し、マップを作成して、ngAfterViewinit
から呼び出します。
import { Component, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements AfterViewInit {
private map;
private initMap(): void {
this.map = L.map('map', {
center: [ 39.8282, -98.5795 ],
zoom: 3
});
}
constructor() { }
ngAfterViewInit(): void {
this.initMap();
}
}
次に、app.component.html
を開き、生成されたコンテンツを新しいコンポーネントに置き換えます。
<app-map></app-map>
そして、アプリケーションを実行します。
- npm start
次に、Webブラウザ(localhost:4200
)でアプリケーションを開きます。
アプリケーションは空のdivを表示し、マップがありません。
Leafletを使用すると、データをLayersとして視覚化できます。 地図を描くときに思い浮かぶ種類のデータは「タイル」と呼ばれます。 新しいタイルレイヤーを作成して、マップに追加する必要があります。
新しいタイルレイヤーを作成するには、最初にタイルサーバーのURLを渡す必要があります。
そこには多くのタイルサーバープロバイダーがありますが、このチュートリアルではOpenStreetMapタイルサーバーを利用します。
マップオブジェクトと同様に、タイルレイヤーもカスタマイズ可能なオプションを受け入れます。
このチュートリアルでは、最大ズームレベルと最小ズームレベルを設定します。 また、地図データの帰属情報も提供します。
map.component.ts
ファイルに再度アクセスし、タイルレイヤーをマップに追加します。
import { Component, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements AfterViewInit {
private map;
private initMap(): void {
this.map = L.map('map', {
center: [ 39.8282, -98.5795 ],
zoom: 3
});
const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
minZoom: 3,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
tiles.addTo(this.map);
}
constructor() { }
ngAfterViewInit(): void {
this.initMap();
}
}
このコードは、最大ズームを18に設定し、最小ズームを3に設定し、タイルの属性テキストを設定します。
次に、Webブラウザ(localhost:4200
)でアプリケーションを開きます。
タイルは読み込まれていますが、正しく配置されていないようです。 ビルドにリーフレットスタイルシートを含める必要があります。
angular.json
ファイルを開き、leaflet.css
を追加します。
{
// ...
"projects": {
"angular-leaflet-example": {
// ...
"architect": {
"build": {
// ...
"options": {
// ...
"styles": [
"./node_modules/leaflet/dist/leaflet.css",
"src/styles.css"
],
// ..
},
// ...
},
// ...
}
}},
"defaultProject": "angular-leaflet-example"
}
現在npm start
を実行している場合は、プロセスを停止して再起動し、ベーススタイルシートを更新する必要があります。
最後に、Webブラウザ(localhost:4200
)でアプリケーションを開きます。
これで、ズームとドラッグをサポートするマップができました。
結論
このチュートリアルでは、AngularアプリケーションでLeafletを使用する方法を学びました。
Leafletの高度な使用法に関するインスピレーションについては、公式サイトの例を参照することを検討してください。
AngularとLeafletの使用に関するこのシリーズのパート2に進みます。