リーフレットを使用して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 [email protected]
このスキャフォールディングを設定すると、マップコンポーネントでの作業を開始できます。
ステップ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
を開き、コンテンツを次のコード行に置き換えます。
src / app / map / map.component.html
<div class="map-container"> <div class="map-frame"> <div id="map"></div> </div> </div>
次に、map.component.css
を開き、コンテンツを次のコード行に置き換えます。
src / app / map / 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パッケージをインポートします。
src / app / map / map.component.ts
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()
関数をコンポーネントに追加します。
src / app / map / 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 { constructor() { } ngAfterViewInit(): void { } }
initMap()
という別のプライベート関数を作成して、すべてのマップの初期化を分離しましょう。
この関数では、新しい Leafletmapオブジェクトを作成する必要があります。 APIを使用すると、APIでオプションを定義することもできます。
このチュートリアルでは、マップの中心と開始ズーム値を設定します。
中心は、39.828175°N98.579500°Wに位置する隣接する米国の地理的中心になります。
Leafletが使用する10進座標系は、本初子午線の西側が負の数になると想定しているため、実際の中心座標は[ 39.8282, -98.5795 ]
になります。
また、ズームレベルは3に設定されます。
マップオブジェクトの変数を宣言し、マップを作成して、ngAfterViewinit
から呼び出します。
src / app / map / 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 }); } constructor() { } ngAfterViewInit(): void { this.initMap(); } }
次に、app.component.html
を開き、生成されたコンテンツを新しいコンポーネントに置き換えます。
src / app / app.component.html
<app-map></app-map>
そして、アプリケーションを実行します。
npm start
次に、Webブラウザ(localhost:4200
)でアプリケーションを開きます。
アプリケーションは空のdivを表示し、マップがありません。
Leafletを使用すると、データをLayersとして視覚化できます。 地図を描くときに思い浮かぶ種類のデータは「タイル」と呼ばれます。 新しいタイルレイヤーを作成して、マップに追加する必要があります。
新しいタイルレイヤーを作成するには、最初にタイルサーバーのURLを渡す必要があります。
そこには多くのタイルサーバープロバイダーがありますが、このチュートリアルではOpenStreetMapタイルサーバーを利用します。
マップオブジェクトと同様に、タイルレイヤーもカスタマイズ可能なオプションを受け入れます。
このチュートリアルでは、最大ズームレベルと最小ズームレベルを設定します。 また、地図データの帰属情報も提供します。
map.component.ts
ファイルに再度アクセスし、タイルレイヤーをマップに追加します。
src / app / map / 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
を追加します。
angle.json
{ // ... "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に進みます。