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
ポイント
リポジトリ内の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)