Labo288

プログラミングのこと、GISのこと、パソコンのこと、趣味のこと

Mapbox GL JS用のラッパーライブラリを作ってみた話

はじめに

ベクタータイルやWebGLによる高速描画など、WebGISで今最もアツいのはMapbox GL JSに違いありませんが、私はLeaflet.jsが好きです。 なぜならAPIが非常にシンプルだからです。例えばGeoJSONレイヤーを追加したければ、Leaflet.jsでは以下のように書けます。

L.geoJSON(geojson) //geojsonはGeoJSON形式のオブジェクト

一方Mapbox GL JSでは以下のようになります。

map.addSource('sourceid', {
    'type': 'geojson',
    'data': geojson //geojsonはGeoJSON形式のオブジェクト
});
map.addLayer({
    'id': 'layerid',
    'type': 'fill', //polygonのみに対応
    'source': 'sourceid',
    'layout': {},
    'paint': {
        'fill-color': '#aa0099',
        'fill-opacity': 0.8
    }
});

このように、sourceを追加したうえでスタイルを設定したlayerを追加しなければならず冗長です。 またLeaflet.jsはGeoJSONの種類(ポリゴン、ライン、ポイント)を問わずに同じように追加できますが、Mapbox GL JSでは種類ごとに設定出来るスタイルが限られているため書き分ける必要があり、尚更冗長です。

そんなわけで本記事では、Mapbox GL JSのAPIに簡単にアクセスするためにラッパーライブラリを作った件について書きます。 なお基本的に自分用に作ったもので、まだ開発途中のものになります。

MbglWrapper

github.com

ポイント

リポジトリ内のREADME.mdのとおりですが、要点は以下のとおりです。

宣言

mapboxgl.Mapを与えてラッパーを初期化します。

let map = new mapboxgl.Map({
    container: 'mapPane',
    //empty style
    style: {
        'version':8,
        'sources':{},
        'layers':[]
    }
});

//wrapper init
let mbglWrapper = new MbglWrapper(map)

以下のとおりGeoJSONを追加できます。 スタイルを定義しない場合、自動的にデフォルトのスタイルを設定します。 ポリゴンでもラインでもポイントでも問題ありません。

mbglWrapper.add(geojson) //geojsonはGeoJSON形式のオブジェクト

またラスタータイルも以下のとおり追加できます。

let options = {
    'tileSize':256,
    'attribution':'© OpenStreetMap contributors',
    'minzoom':0,
    'maxzoom':14
}
mbglWrapper.add('https://tile.openstreetmap.jp/{z}/{x}/{y}.png', options)