Function setColorFilterColor

地図の色調整（カラーフィルター・空の色・霧の色）を設定する — 詳細な使用例

地図の見た目を色調フィルター・空・霧の3要素でカスタマイズします。

メソッド	用途
setColorFilterColor(color)	地図全体にカラーフィルター（RGBA色重ね）を適用
getColorFilterColor()	現在のカラーフィルター色を取得
setSkyColor(color)	3Dビューの空の色を設定
setFogColor(color)	3Dビューの霧（遠景フォグ）の色を設定

カラーフィルター

• アルファ値（透明度）付きの Color を渡します。
• 夜間モード・アクセシビリティ対応・特定用途向けの配色で使います。
• リセット（フィルターなし）は完全透明な色を指定します: Color.fromColorCodeEightHex('00000000')

空の色 / 霧の色

• 傾きを持つ3D表示時（setTilt でチルトを設定した状態）に影響します。
• 夜間・朝焼け・霧のある環境など、演出目的で使用します。

Warning

• 地図全体のカラーテーマを変更したい場合は setPaletteName の利用を優先してください。

Example: 夜間モード風の青みカラーフィルターを適用する

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

const color = GIA.value.Color.fromColorCodeSixHex('#1A2A5A', 0.4);
map.setColorFilterColor(color ?? GIA.value.Color.clear());

// 現在値確認
const current = map.getColorFilterColor();
console.log(current);

// リセット
map.setColorFilterColor(GIA.value.Color.clear());
Copy

Example: カラーフィルターの適用/解除ボタンを実装する

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

const colorInput = document.querySelector('input[name="map-color-filter-color"]') as HTMLInputElement;
const alphaInput = document.querySelector('input[name="map-color-filter-alpha"]') as HTMLInputElement;

document.querySelector('#map-color-filter-apply')?.addEventListener('click', () => {
  const alpha = parseFloat(alphaInput.value);
  const color = GIA.value.Color.fromColorCodeSixHex(colorInput.value, alpha);
  map.setColorFilterColor(color ?? GIA.value.Color.clear());
});

document.querySelector('#map-color-filter-clear')?.addEventListener('click', () => {
  map.setColorFilterColor(GIA.value.Color.clear());
});
Copy

Example: 3D傾き表示で夕焼け風の空と霧を設定する

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

map.setTilt(45);
map.setSkyColor(GIA.value.Color.fromColorCodeSixHex('FF7043'));   // 夕焼けオレンジ
map.setFogColor(GIA.value.Color.fromColorCodeSixHex('FFCCBC'));   // 霞んだ遠景
Copy

See

• setColorFilterColor
• getColorFilterColor
• setSkyColor
• setFogColor