Function getIconTableImage

アイコンテーブルの画像（Canvas）とヘッダー情報を取得する — 詳細な使用例

GLMarker 等で使用するアイコンが格納されたアイコンテーブル（テクスチャアトラス）を Canvas 要素として取得します。デバッグ・プレビュー・スクリーンショット出力に使います。 getIconTableHeader() の mapping を使うと、アイコン名と (x, y) の対応を逆引きできます。

メソッド	用途
getIconTableImage()	アイコンテーブルを HTMLCanvasElement で取得
getIconTableHeader()	アイコンの格納位置情報（IconTableHeader）を取得

Warning

• アイコンがまだロードされていない場合 undefined が返ります。
• getIconTableHeader() は各アイコンの矩形座標を含む情報を返します。
• 大きいアイコンテーブルをUIに出す場合は縮小Canvasに転写して扱うと軽量です。

Example: アイコンテーブル画像をページに表示してデバッグする

import * as GIA from '@ntj/gaia';

const canvas = map.getIconTableImage();
if (canvas) {
  document.body.appendChild(canvas);
}

const header = map.getIconTableHeader();
if (header) {
  console.log('アイコン一覧:', header);
}
Copy

Example: ミニプレビュー上でアイコン名を確認し、クリックでコピーする

import * as GIA from '@ntj/gaia';

const MINI_CANVAS_WIDTH = 200;

function searchIconName(x: number, y: number, iconHeader: GIA.types.AnnotationIconHeader): string | undefined {
  for (const [name, position] of Object.entries(iconHeader.mapping)) {
    const p = position as {x: number; y: number};
    if (p.x === x && p.y === y) {
      return name;
    }
  }
  return undefined;
}

function copyToMiniCanvas(iconTable: HTMLCanvasElement, iconHeader: GIA.types.AnnotationIconHeader): HTMLCanvasElement {
  const canvas = document.createElement('canvas');
  const {iconWidth, iconHeight, chainX, chainY} = iconHeader;

  const sourceWidth = iconWidth * chainX * 2;
  const sourceHeight = iconHeight * chainY * 2;

  const destinationWidth = MINI_CANVAS_WIDTH;
  const destinationHeight = (sourceHeight * destinationWidth) / sourceWidth;

  canvas.width = destinationWidth;
  canvas.height = destinationHeight;

  const context = canvas.getContext('2d');
  if (context) {
    context.drawImage(iconTable, 0, 0, destinationWidth, destinationHeight);
  }
  return canvas;
}

const iconTable = map.getIconTableImage();
const iconHeader = map.getIconTableHeader();
if (!iconTable || !iconHeader) {
  throw new Error('アイコンテーブルが未ロードです');
}

const miniCanvas = copyToMiniCanvas(iconTable, iconHeader);
let hoveredName: string | undefined;

miniCanvas.addEventListener('mousemove', (event) => {
  const {offsetX, offsetY} = event;
  const x = Math.floor((iconHeader.chainX * offsetX) / MINI_CANVAS_WIDTH);
  const y = Math.floor((iconHeader.chainY * offsetY) / miniCanvas.height);
  hoveredName = searchIconName(x, y, iconHeader);
  miniCanvas.title = hoveredName ? `${hoveredName},(x,y)=(${x},${y})` : '';
});

miniCanvas.addEventListener('click', async () => {
  if (!hoveredName) {
    return;
  }
  await navigator.clipboard.writeText(hoveredName);
  console.log('copied:', hoveredName);
});

document.body.appendChild(miniCanvas);
Copy

See

• getIconTableImage
• getIconTableHeader