Mapbox-GL.js用に用意したglyphのpbfを活用出来ないか調べている話 Part2 #JavaScript

メリークリスマスイブ
MIERUNEアドベントカレンダーの12月24日分の記事です
Part1はこちら
https://qiita.com/northprint/items/b5c48a02b9ae83a4d0a7
前回、うまくいかなかったので、引き続きチャレンジ中です

取得できたBitmapを表示してみる

色々調べていたのですが、どうやら1チャンネルのデータになっているようで、これを4チャンネルのデータに変換してあげる必要があることまでたどり着きまして、以下のような関数を用いることで画像の出力はできました
dataに、Part1で取得したbitmapを指定してあげます
（mapboxだとtestに書いてありました）
https://github.com/mapbox/mapbox-gl-js/blob/main/test/integration/lib/render.js#L192

function displayBitmap(width, height, data) {

  let pixel = width * height;

  // 4チャンネルのデータを生成
  const arrayData = new Uint8ClampedArray(pixel * 4);
  for (let i = 0; i < pixel; i++) {
    arrayData[4 * i + 3] = data[i];
  }

  // canvasに描画
  var canvas = document.getElementById('target');
  const ctx = canvas.getContext('2d');

  let imageData = new ImageData(arrayData, width, height);
  ctx.putImageData(imageData, 0, 0);

}

画像は出せたのですが、文字？とは言い難い、よくわからない画像が出力されます

と、ここまできて、全ての事が載っている記事を見つけました
https://observablehq.com/@jjhembd/mapbox-glyph-pbfs

こちらの記事を踏襲し、この記事を更新していきます