LoginSignup
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-12-24

メリークリスマスイブ
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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0