deck.glで日本語／絵文字ラベルを表示する

この記事はdeck.gl Advent Calendar 2021 参加記事です。

概要

deck.glには地図上にテキストを表示するためのTextLayerがありますが、デフォルトでは日本語に対応していません。TextLayerで日本語を表示するために必要な設定について説明します。

サンプルコード

ラベルを見やすくするためにベースマップの表示はオプションにしてあります。

解説

WebGLには基本テキストをレンダリングする機能がないためdeck.glはフォントアトラスとよばれるテクスチャを動的に生成し、テキストをテクスチャー画像として表示します。

デフォルトではアルファベットのみがフォントアトラスに登録されているため日本語は表示できません。

そこでcharacterSetプロパティにフォントアトラスを生成する文字を配列として指定する必要があります。

サンプルコードではpoint.geojsonのlabel属性に登録されたテキストを全て取得し、一文字ごとの配列へと変換、重複を削除した上で characterSetプロパティに渡しています。

  //属性値のラベルから必要なキャラクターセットを取得する
  const tmp = pointData.features
    .map((d) => Array.from(d.properties.label)) //ラベル文字列を収集
    .flat();

  //重複を削除
  const charaSet = Array.from(new Set(tmp)) 

  //テキスト表示に必要となるキャラクターセット
  console.log(charaSet);

  //ポイントデータをテキストラベルとして出力
  const textLayer = new TextLayer({
    id: "text-layer",
    data: pointData.features,
    stroked: true,
    filled: true,
    getPosition: (d) => {
      return d.geometry.coordinates;
    },
    //文字の背景色を設定
    background: true,
    backgroundPadding: [8, 8, 8, 8],
    getBackgroundColor: [217, 234, 236],
    //テキスト設定
    getText: (d) => d.properties.label,
    getColor: [116, 76, 76],
    getSize: 32,
    getAngle: 0,
    fontWeight: "bold",
    sizeScale: 0.6,
    characterSet: charaSet //生成したキャラクターセットをdeck.glに渡す
  });

//属性値のラベルから必要なキャラクターセットを取得する

const tmp = pointData.features

.map((d) => Array.from(d.properties.label)) //ラベル文字列を収集

.flat();

//重複を削除

const charaSet = Array.from(new Set(tmp))

//テキスト表示に必要となるキャラクターセット

console.log(charaSet);

//ポイントデータをテキストラベルとして出力

const textLayer = new TextLayer({

id: "text-layer",

data: pointData.features,

stroked: true,

filled: true,

getPosition: (d) => {

return d.geometry.coordinates;

//文字の背景色を設定

background: true,

backgroundPadding: [8, 8, 8, 8],

getBackgroundColor: [217, 234, 236],

//テキスト設定

getText: (d) => d.properties.label,

getColor: [116, 76, 76],

getSize: 32,

getAngle: 0,

fontWeight: "bold",

sizeScale: 0.6,

characterSet: charaSet //生成したキャラクターセットをdeck.glに渡す

});

これで日本語(UTF-8)の文字を表示することができます。

絵文字も characterSetに登録すれば表示することができるので、絵文字マップなどを作ることも可能です。

なお、登録する文字が増えるほど処理が重くなりメモリを圧迫するので注意してください。

概要

サンプルコード

解説

投稿者: shimizu