The Simple Guide to Angular Leaflet Maps

BY admin
|

Leaflet は、Javascript ベースの主要なマッピングフレームワークの 1 つです。 Web サイトやアプリケーションにインタラクティブなマップを追加するために、業界全体で広く使用されています。

しかし、Angular.io アプリに含めるのは難しいかもしれません。 これは、Angular や Typescript とうまく連携するわけではありません。 Leaflet マップ ベースのサイトを Angular 8 に移行するという冒険をした後、このタスクのための本当に良いリファレンスがないことは明らかでした。 これらの投稿は、私が学んだことを記録する試みです。 (UPDATE: この記事はAngular 8用に書かれましたが、アプリケーションとメソッドはAngular 11でも動作します)。

これは複数パートの投稿になる予定です。

  • 基本（この投稿）、
  • コントロールの追加、
  • 関数 & 動的コントロール、
  • カスタム コントロール。 そして
  • Going PWA – service workers and more

このシリーズの目的は、Angular-CLIベースのプロジェクトで、手間や大騒ぎ、行き詰まりなしにリーフレットマップを作成できるようになることです。

Angular.io に Leaflet を追加することはそれほど難しくありませんが、Leaflet は特に Angular (または Typescript) フレンドリーではないので、非常に「手こずる」ことがわかりました。 LeafletはグローバルなL変数構造と.extend メソッドを使っており、TSを混乱させます。

幸運なことに、@asymmetrik/ngx-leaflet に良い出発点があります。 また、基本的なマッピングのためのいくつかの良いチュートリアル (こことここ) が付属していますが、彼らは難しいことに取り掛かる前に興味を失ってしまったようです。

Getting Started

ドキュメントに従って、あなたは :

npm install leaflet
npm install @types/leaflet
npm install @asymmetrik/ngx-leaflet

と app.module.ts に import を追加するためにインストールする必要があります。

この時点で、アプリに簡単なマップを追加することができるので、この騒ぎは何だったのかと思うかもしれませんが、それはこれからです。 Ngx-leaflet は Angular 自体の外側で leaflet を実行します。これは、Leaflet イベントが Angular で複数の変更イベントを引き起こすのを避けるための最善の方法だと理解しています。

ただし、おそらくこのため、Leaflet は Angular.io CSS Encapsulation System に適合せず、すべての CSS 参照をグローバル レベルにする必要があります。

これは通常、Leaflet CSS を angular.json で次のように追加することを意味します

{
...
"styles": ,
...
}

または styles.css:

@import "./node_modules/leaflet/dist/leaflet.css"

これは各コントロールのスタイル シートにも当てはまり、Leaflet では、すべてのコントロールが独自の CSS を持っているのでうんざりしてしまいます。

どちらの場合でも、leaflet.css は styles.css の他の CSS の前に処理されるべきであることに注意してください。

Compiler Complications

これは、最初のコンパイラーの複雑さの 1 つに遭遇し始める場所でもあります。

このように作成されたリーフレット ベースのアプリケーションは、ng build では動作し "aot": true でも動作しますが、デフォルトng build --prod 構成ではひどく失敗するように思われます。 いくつかの実験の後、"buildOptimizer": false が angular.json にある限り、ng build --prod は確実に機能することがわかりました。

Don’t Get Caught in L

Most of the tutorials and documentation will tell you to bring the global L variable into typescript using the following import :

import * as L from 'leaflet'

This is true if you want to use existing JS code directly in the TS, but I found that as long as you loaded @types/leaflet typedefs by name from 'leaflet' (e.L.

) to import the typescripts from the 'leaflet' (e. 

import * as L from 'leaflet'

).例：import {Map} from 'leaflet'）から名前で型定義をインポートすれば、すべて期待通りに動作することがわかりました。 これにより、あなたの TS コードはより読みやすく、まあ TS らしいものになります！

A Simple Map

では、このようになります。 マップを作りましょう。 以下の例では、OpenStreetMapの地図（私のアプリが動作するのはこれなので）を別のコンポーネントとして作成しています。 このレベルでは、これは余分な作業のように思えるかもしれませんが、後で説明するように、アプリ フローの複数の場所で再利用できる追加機能を備えたマップ コンポーネントをセットアップすることができるようになります。

このコンポーネントは、オプションで OSM レイヤーとグローバル ビューをデフォルトにします – ただし、オプションは @Inputs() として設定されているので、デフォルトを親コンポーネントで上書きすることができます。 移動イベントやレイヤー イベントなど、他のイベントを発行することもできますが、これは私のアプリが必要としていたものであり、原理を実証していると考えています。 次のセクションでマップとズーム イベントを使用します。

マップは、コンポーネント HTML 内の ngx-leaflet ディレクティブを使用して dom に追加されます。