Function setIlluminationCondition

イルミネーション情報の表示条件を設定する — 詳細な使用例

IlluminationConditionInitOptions の source でイルミネーション形状を定義し、 marker.creationCallback でスポットごとの GLMarker を生成します。 condition に undefined を渡すか引数省略でクリアできます。

---

Illumination描画に必要な要素（必須）

1. 頂点生成callback（method: 'vertex'）
   • surrounds / anchors / signs.callbacks のいずれかで () => IlluminationVertexSpec[] を返す
2. 画像素材
   • relays の image
   • signs.images の image
   • （任意）marker.creationCallback 内のピン画像

source の構造

フィールド	説明
surrounds	周辺を漂う点群（callback + method）
anchors	地物に沿う点群（callback + method）
relays	辺上に配置する画像素材（image + method）
signs.callbacks	代表地点に置く点群（key→callback）
signs.images	代表地点に置く画像素材（key→image）

Warning

• setIlluminationCondition は一度に一条件のみ有効です。再設定で上書きされます。
• callback の戻り値が空配列だと、その要素は描画されません。
• 画像パスが不正な場合、該当素材のみ表示されません（他は表示され得ます）。

Example: 頂点生成callback + 画像素材 + marker生成を揃えた最小構成

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

const TOKYO = new GIA.value.LatLng(35.67289, 139.72958);
const SKY_COLOR = new GIA.value.Color(0.2, 0.2, 0.2, 1.0);
const FOG_COLOR = new GIA.value.Color(0.4, 0.4, 0.4, 1.0);
const FILTER_COLOR = new GIA.value.Color(0, 0, 0, 0.6);

// 1) 頂点生成callback（必須）
const surroundCallback = (): GIA.types.IlluminationVertexSpec[] => {
  const specs: GIA.types.IlluminationVertexSpec[] = [];
  for (let i = 0; i < 64; i++) {
    specs.push({
      position: {
        x: 32 * Math.random() * Math.cos(i),
        y: 32 * Math.random() * Math.sin(i),
        z: 0.05 * i + 1.0,
      },
    });
  }
  return specs;
};

const options: GIA.types.IlluminationConditionInitOptions = {
  source: {
    surrounds: [{ callback: surroundCallback, method: 'vertex' }],

    // 2) 画像素材（必須）
    relays: [
      { image: '/asset/illumination/relay_001.png', method: 'instance' },
      { image: '/asset/illumination/relay_002.png', method: 'instance' },
    ],

    signs: {
      callbacks: new Map([
        ['tree', { callback: surroundCallback, method: 'vertex' }],
      ]),
      images: new Map([
        ['ferris_wheel', { image: '/asset/illumination/sign_ferris_wheel.png', method: 'vertex' }],
      ]),
    },
  },

  marker: {
    creationCallback: (position, properties) => {
      const info = new GIA.value.GLMarkerIconInfo({
        icon: '/asset/illumination/pin.png',
        size: new GIA.value.Size(30, 20),
      });

      const marker = new GIA.object.GLMarker({
        position,
        info,
        label: {
          content: properties.nameShorten,
          offset: new GIA.value.Point(24, 4),
          style: {
            fontSize: '12px',
            fontWeight: 'bold',
            color: '#FFFFFF',
            backgroundColor: '#88888888',
          },
        },
        labelZoomRange: new GIA.value.ZoomRange(14, 24),
      });

      marker.addEventListener('click', () => {
        alert(`${properties.name}\n${properties.periodDate}`);
      });

      return marker;
    },
    shiftZ: 60,
  },
};

// 有効化
map.setSkyColor(SKY_COLOR);
map.setFogColor(FOG_COLOR);
map.setColorFilterColor(FILTER_COLOR);
map.setIlluminationCondition(new GIA.value.IlluminationCondition(options));
map.moveTo(TOKYO, map.getZoomLevel(), false);
map.setTilt(45);
map.setZoomLevel(13, true);

// 無効化
map.setIlluminationCondition();
map.setColorFilterColor(new GIA.value.Color(0, 0, 0, 0));
Copy

See

setIlluminationCondition