Function addHeatMap

ヒートマップを追加する — 詳細な使用例

任意のデータポイントに基づく密度ヒートマップを地図上に描画します。 HeatMapCondition には座標と重み（強度）を持つポイントデータを渡します。 複数の HeatMapCondition を addHeatMap で追加して重ね合わせることも可能です。 削除は対応する HeatMapCondition インスタンスを removeHeatMap に渡します。

Warning

• removeHeatMap は追加時と同一インスタンスを渡す必要があります。変数として保持してください。
• データポイント数が多いとパフォーマンスに影響します。必要に応じて間引きを検討してください。

Example: GeoJSON + colorMap + コールバックでヒートマップを表示する

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

const geoJson = await fetch('/data/heatmap.geojson').then((r) => r.json());

const colorMap = new Map<number, GIA.value.Color>([
  [0, GIA.value.Color.fromColorCodeSixHex('#00FF00') ?? GIA.value.Color.green()],
  [6, GIA.value.Color.fromColorCodeSixHex('#FF0000') ?? GIA.value.Color.red()],
]);

const condition = new GIA.value.HeatMapCondition({
  geoJson,
  colorMap,
  maxWeight: 100,
  weightCallback: (feature) => Number(feature.properties?.weight ?? 0),
  opacityCallback: (zoomLevel) => (zoomLevel >= 15 ? 0.9 : 0.6),
  radiusCallback: (weight) => Math.max(10, Math.min(60, weight * 2)),
});

map.addHeatMap(condition);

// 後から削除
map.removeHeatMap(condition);
Copy

Example: UI入力で colorMap を組み立てる

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

const thresholds = [0, 6, 12];
const colors = ['#00FF00', '#FFFF00', '#FF0000'];
const alphas = [0.3, 0.7, 1.0];

const colorMap = new Map<number, GIA.value.Color>();
for (let i = 0; i < thresholds.length; i++) {
  const color = GIA.value.Color.fromColorCodeSixHex(colors[i], alphas[i]);
  if (color) {
    colorMap.set(thresholds[i], color);
  }
}

const condition = new GIA.value.HeatMapCondition({
  geoJson,
  colorMap,
  weightCallback: (feature) => Number(feature.properties?.value ?? 0),
});

map.addHeatMap(condition);
Copy

See

• addHeatMap
• removeHeatMap