Angular とleaflet-ant-path で進行方向を可視化する

はじめに

Angular と leaflet (OpenStreet Map) で Geo Tracker を作る で移動する度にマーカーをうつアプリケーションを作成しました。
マーカーにカーソルを合わせることで時間情報がポップアップするのでどちらに移動したのかわからないことはありませんが、やはり視覚的に表現したいところです。

今回はleaflet-ant-pathというライブラリを利用して進行方向を可視化します。

github.com

f:id:nananao_dev:20190908162957p:plain
angular leaflet-ant-path

leaflet-ant-path のinstall

npmでインストールします。
特にcss等の読み込みを別途行う必要はなさそうでした。

$ npm i --save leaflet-ant-path

Angular とleaflet-ant-path で進行方向を可視化する

L.polyline の代わりに antPath と書くだけです。
最高だぜ。

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import { antPath } from 'leaflet-ant-path';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  map:any;

  ngOnInit() {
    this.map = L.map('map').setView([43.068661, 141.350755], 8);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);
    // Makerを配置
    L.marker([0, 0]).bindPopup('<b>Hello!!</b>').addTo(this.map);
  
    // leaflet-ant-pathで進行方向を可視化
    antPath([[43.068661, 141.350755], [42.768651, 141.750955]], {color: '#FF0000', weight: 5, opacity: 0.6}).addTo(this.map);
    antPath([[43.668661, 140.250755], [42.368651, 141.150955]], {color: '#0000FF', weight: 5, opacity: 0.6, reverse: true,}).addTo(this.map);

    // L.polylineであれば以下のように書く
    // L.polyline([[43.068661, 141.350755], [42.768651, 141.750955]], {color: '#FF0000', weight: 5, opacity: 0.6}).addTo(this.map);

  }
}

stackblitzを貼っておきます。
蟻が歩いてる感じ(?)で進行方向が可視化されています。

stackblitz.com

まとめ

Angular とleaflet-ant-path で進行方向を可視化する方法をまとめました。