はじめに
明けましておめでとうございます。
今年1本目の記事です。
昨年にリリースされた Mapbox の Mapbox GL JS v2 についてようやく触ることができましたので、簡単ではありますが紹介したいと思います。
Mapbox GL JS はウェブブラウザでベクトル地図を表示するための JavaScript ライブラリで、v2 によるバージョンアップによってレンダリングがより高速になっています。また、新規機能として、空の色をコントロールできる Sky API やCamera API の機能強化によりさまざまな視点から 3Dマップを見ることができたりなど機能が追加されています。その他、リアルな 3Dマップが作成可能になったりしています。
詳細は以下のサイトも参照してください。 docs.mapbox.com note.com
API などは基本的には v1 と同じで v1 の機能もそのまま使用することができました。今回は、v2 を使用して、Esri のベクターマップを背景地図として表示し、Mapillary の 以下のレイヤーも追加してみました。
// Add Mapillary sequence layer.
https://www.mapillary.com/developer/tiles-documentation/#sequence-layer
以下は、Mapbox GL JS v2 を使用した地図のイメージです。
Esri の背景地図
Esri の背景地図として幾つか種類がありますが、今回は、以下の地形図を使用しました。こちらの背景地図も Mapbox と同じベクタータイルの仕様なので、Mapbox GL JS で使用することができました。以前に v1 でも確認したことがあったのですが、v2 でも同様に使用することができました。高速化されたことで v1 よりも v2 の方がレンダリングが早く感じました。
https://www.arcgis.com/home/item.html?id=93bb36e2babc4948a299c272ebd035d9www.arcgis.com
コードは、以下の通りで、Esri のベクタータイルの style から Mapbox GL JS で表示するために必要な設定をしています。
const styleUrl = "https://cdn.arcgis.com/sharing/rest/content/items/ac73fd348deb4b6ead553817f7ae2fca/resources/styles/root.json";
// first fetch the esri style file
// https://www.mapbox.com/mapbox-gl-js/style-spec
fetch(styleUrl)
.then(response => {
return response.json()
.then(style => {
// next fetch metadata for the raw tiles
const metadataUrl = style.sources.esri.url;
fetch(metadataUrl)
.then(response => {
return response.json()
.then(metadata => {
const ready = format(style, metadata, styleUrl);
const map = new mapboxgl.Map({
container: 'map', // container id
style: ready,
center: [139.839478, 35.652832], // starting position [lng, lat]
zoom: 9, // starting zoom
pitch: 60,
hash: true,
customAttribution: "© <a href=\"https://www.arcgis.com/home/item.html?id=93bb36e2babc4948a299c272ebd035d9\">地形図</a> contributors, map layer by Esri"
});
map.addControl(new mapboxgl.NavigationControl());
})
})
})
function format (style, metadata, styleUrl) {
// ArcGIS Pro published vector services dont prepend tile or tileMap urls with a /
style.sources.esri = {
type: 'vector',
scheme: 'xyz',
format: (metadata.tileInfo && metadata.tileInfo.format) || 'pbf',
index: metadata.tileMap ? style.sources.esri.url + '/' + metadata.tileMap : null,
//maxzoom: 15,
tiles: [
style.sources.esri.url + '/' + metadata.tiles[0]
],
name: metadata.name
};
return style;
}
そして、以下のコードで Mapillary のレイヤーを追加しました。こちらは、Mapbox GL JS のサンプルコードをそのまま使用しました。
map.on('load', function () { map.addSource('mapillary', { 'type': 'vector', 'tiles': [ 'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt' ] }); map.addLayer({ 'id': 'mapillary', 'type': 'line', 'source': 'mapillary', 'source-layer': 'mapillary-sequences', 'layout': { 'line-cap': 'round', 'line-join': 'round' }, 'paint': { 'line-opacity': 0.6, 'line-color': 'rgb(53, 175, 109)', 'line-width': 2 } }); })
さいごに
v2 でも v1 と変わらない作法で使用することができました。また、サンプルも豊富に公開されていますので、やりたいことのテーマに合わせて簡単に使用することができました。また、Esri の World Hillshade も WMTS サービスとして公開されており、こちらも v2 の raster tile のサンプルを参考にして使用することができました。Mapbox GL JS の v2 で Mapbox のサービスも素晴らしいのですが、それ以外のサード パティのサービスも使用することができるのは良いですね！
v2 の新機能の Sky API や Camera API も面白そうなので機会があればそちらも使用してみたいと思います。
