オープンソースのベクトル地図ライブラリ Mapbox GL JS のデバッグがしたいので調べました。

Mapbox なにそれ?

  • Google Maps JavaScript API みたいなもん
  • こういうの → Display a map / Mapbox
  • 要は地図を表示・操作するためのオープンソース JavaScript ライブラリ
  • 類似のライブラリとして OpenLayers, leaflet などがある
  • 上記との違いは「ベクトルタイル」を「WebGL」で描画するものであるということ
  • “GL” とは WebGL を差しており、姉妹ライブラリとして Mapbox GL Native がある(こちらはモバイルやデスクトップの “ネイティブ” アプリ用であり、OpenGL を使用している)。

つまり、 Google Maps JavaScript API 以外の方法で、Google Maps のようなベクトル地図レンダリングをしたければ、Mapbox GL JS を使うのが現在の事実上唯一の方法である。

何をしらべたいの?(あるいは何を調べてないの?)

  • ライブラリの使い方は調べてない(ってか Google Maps とそんなに変わらないはず)
  • Mapbox GL JS の(非同期な)地図データ取得の仕組み
  • Mapbox GL JS の高速な描画の仕組み

今回は、その足がかりとして、Mapbox GL JS のデバッグ環境を作ります。

調べたわたしは

  • JavaScript 力はあんまりない
  • WebGL やったことない
  • OpenGL もない
  • Mapbox GL Native のソースを追ってみたが C++14 が分からずあきらめた

大丈夫か・・・?

デバッグ環境を作る

用意するもの(というか私の環境)

  • https://github.com/mapbox/mapbox-gl-js のローカルクローン
  • macOS
  • Xcode(入ってた)
  • homebrew
  • yarn とかいうやつ(homebrew で入れる)
  • node.js(v4.0以上)
  • Visual Studio Code (デバッグするのに使う。VSCodeと略すかも)
  • Debugger for Chrome (Visual Studio Code の拡張機能)

すでに「yarn って何?」というレベルです・・・。

デバッグ環境を作る手順1(mapboxのセットアップ)

https://github.com/mapbox/mapbox-gl-js/blob/master/CONTRIBUTING.md に丁寧に書いてあることの写しだけど。

  1. Xcode Command Line Tools を入れる(入ってた。けど一度 Xcode を起動て License に agree しないといけなかった)
  2. brew install node で node をインストール(以前 anyenv/ndenv で入れてあったので余裕)
  3. brew install yarn で yarn というやつを入れる
  4. cd mapbox-gl-js でクローンしたリポジトリに移動して、 yarn install で何かをインストールする(何?)
  5. https://www.mapbox.com/studio/account/tokens/ で、 Mapbox の API キーを生成する。Mapbox アカウントがなければ同じく作る
  6. Serving the Debug Page にあるように MAPBOX_ACCESS_TOKEN=pk.iEkc36fR… yarn run start-debug を実行する

んでブラウザで http://localhost:9966/debug にアクセスすると、地図が表示されるはずである。

この状態で、 Chrome のデベロッパーツールでデバッグできるけど、効率上げるために Visual Studio Code を使う。その手順が以下。

デバッグ環境を作る手順2(VSCodeのセットアップ)

を参考に。

  1. VSCode で mapbox-gl-js のフォルダを開く
  2. メニュー → デバッグ → 構成の追加 とすると .vscode/launch.json が生成されるので、下記の launch.json のように記述する
  3. 前述の MAPBOX_ACCESS_TOKEN=pk.iEkc36fR… yarn run start-debug をしたまま、VSCode のメニュー → デバッグ → デバッグの開始(F5 でもおk)すると、新しいタブに地図が表示される。
// launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:9966/debug/",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

試しにデバッグしてみる

src/render/draw_line.js の 14行目あたりにブレークポイントを置いてみる(F9 で)。F5 でデバッグ開始する。

地図が表示される過程でブレークポイントで一時停止し、その箇所の「変数」「ウオッチ」「コールスタック」などが見られる。下図は、 drawLine 関数の coords 変数の中身を表示しているところ。描画するラインの頂点が確認できる。

ちなみに、この drawLine 関数をスキップ(すぐに return)すると、次図のようにラインが描画されない地図になる。

「デバッグするまで」としてはこんな感じで。

mapbox
JavaScript
geo

published

Ads

Read more!

amay077

Microsoft MVP(Xamarin). フルリモートワーカー. Geospatial Mobile app developer. Love C#.

amay077 amay077