これでvalhallaサーバーの準備が整いました。このセクションでは、mapbox-gl-valhallaプラグインをマップに追加していきます。これで valhalla Isochrone API を簡単に使用できるようになります。
npm i @watergis/mapbox-gl-valhalla --save
import { MapboxValhallaControl} from "@watergis/mapbox-gl-valhalla";
import '@watergis/mapbox-gl-valhalla/css/styles.css';
import mapboxgl from 'mapbox-gl';
const map = new mapboxgl.Map();
map.addControl(new MapboxValhallaControl(
'http://localhost:8002',
{
Contours: [
{
time: 3,
distance: 1,
color: 'ff0000',
},
{
time: 5,
distance: 2,
color: 'ffff00',
},
{
time: 10,
distance: 3,
color: '0000ff',
},
]
}
), 'top-right');
等時線マップ
等距離線マップ
これで、Mapbox GLアプリケーションにIsochrone機能が追加されました。