Function showShadow

建物の影を表示する — 詳細な使用例

3D建物モデルや地形に対して影を描画します。 showShadow / hideShadow のトグルで表示・非表示を切り替え、 setDateTime で任意の時刻の影を描画できます。 スライダUI（10分刻み）と組み合わせることで、時刻をインタラクティブに操作できます。

Warning

• 影表示は3D建物が描画されるズームレベル（概ね15以上）でのみ有効です。
• パフォーマンスへの影響があるため、必要な場合のみ有効にしてください。
• スライダの値とDate変換: hours = Math.floor(sliderNum / 6)、minutes = Math.floor((sliderNum % 6) * 10)

Example: チェックボックスで影の表示を切り替える

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

const checkbox = document.getElementById('shadow-toggle') as HTMLInputElement;
checkbox.addEventListener('change', () => {
  if (checkbox.checked) {
    map.setTilt(45);
    map.setZoomLevel(18);
    map.showShadow();
  } else {
    map.hideShadow();
  }
});
Copy

Example: 10分刻みスライダで日陰の時刻を操作する

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

// スライダ値 → Date 変換（1ステップ = 10分）
const convNumToDate = (sliderNum: number): Date => {
  const now = new Date();
  const hours = Math.floor(sliderNum / 6);
  const minutes = Math.floor((sliderNum % 6) * 10);
  return new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, 0);
};

// 現在時刻 → スライダ値（10分単位に丸め）
const convDateToNum = (now: Date): number => {
  const hours = now.getHours();
  const minutes = Math.floor(now.getMinutes() / 10) * 10;
  return hours * 6 + minutes / 10;
};

// スライダ（min:0 = 0:00、max:144 = 24:00、1step = 10分）
const slider = document.createElement('input');
slider.type = 'range';
slider.min = '0';
slider.max = '144';

// 初期値：現在時刻を10分単位に丸めた値
const initialNum = convDateToNum(new Date());
slider.value = `${initialNum}`;
map.setDateTime(convNumToDate(initialNum));

// スライダ操作時：mousemove と change の両方で更新
const onSliderTouched = () => {
  const sliderNum = parseInt(slider.value);
  const hours = Math.floor(sliderNum / 6);
  const minutes = Math.floor((sliderNum % 6) * 10);
  console.log(`選択時刻: ${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`);
  map.setDateTime(convNumToDate(sliderNum));
};
slider.addEventListener('mousemove', onSliderTouched);
slider.addEventListener('change', onSliderTouched);

map.showShadow();
Copy

See

• showShadow
• hideShadow