リーフレットを使用して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、およびleafletv1.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: '&copy; <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に進みます。