Function addAnnotationMarkerCondition

注記マーカーのコンディションを追加する — 詳細な使用例

地図タイル上に重ねてカスタム注記を描画します。 1つの AnnotationMarkerCondition に追加できるマーカーは 最大999個 です。 複数の Condition を addAnnotationMarkerCondition で追加することで999個以上に対応できます。 削除は Condition 単位で removeAnnotationMarkerCondition を呼び出します。

Warning

• 1つの Condition に追加できるマーカー上限は 999個 です。それ以上は複数の Condition に分割してください。
• removeAnnotationMarkerCondition は同一インスタンスを渡す必要があります。変数として保持しておいてください。
• マーカーはベクター描画のため、ズームレベルに応じてスムーズに拡縮します。

Example: IconTableと連携した AnnotationMarkerCondition を構成する

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

const iconTable = map.getIconTableImage();
const iconHeader = map.getIconTableHeader();
if (!iconTable || !iconHeader) {
  throw new Error('IconTableが未ロードです');
}

// Condition を変数に保持（削除時に同一インスタンスが必要）
const condition = new GIA.value.AnnotationMarkerCondition({
  distance: 32,
  isHiddenByBuilding: false,
  textureMapping: {
    texture: iconTable,
    iconHeader,
  },
  badge: {
    fontSize: 14,
    offset: new GIA.value.Point(16, 50),
  },
  clickListener: (_, element) => {
    console.log('cluster size:', element.children.length);
    console.log('代表marker名:', element.marker.name);
  },
  mouseEnterListener: (_, element) => {
    console.log('hover marker:', element.marker.name);
  },
});

const markerTokyo = new GIA.object.AnnotationMarker({
  position: new GIA.value.LatLng(35.6812, 139.7671),
  name: 'poi_station_pcmap',
  scale: 2.0,
  label: {
    content: '東京駅',
  },
});

const markerShinjuku = new GIA.object.AnnotationMarker({
  position: new GIA.value.LatLng(35.6894, 139.6917),
  name: 'poi_station_pcmap',
  scale: 2.0,
  label: {
    content: '新宿駅',
  },
});

condition.addAnnotationMarkers([markerTokyo, markerShinjuku]);
map.addAnnotationMarkerCondition(condition);

// 削除する場合は同じインスタンスを渡す
condition.removeAnnotationMarkers([markerTokyo, markerShinjuku]);
map.removeAnnotationMarkerCondition(condition);
Copy

Example: 999個を超えるマーカーを複数 Condition に分割して登録する

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

const iconTable = map.getIconTableImage();
const iconHeader = map.getIconTableHeader();
if (!iconTable || !iconHeader) {
  throw new Error('IconTableが未ロードです');
}

const allMarkers = generateLargeAnnotationMarkers(); // AnnotationMarker[]
const chunkSize = 999;

for (let i = 0; i < allMarkers.length; i += chunkSize) {
  const chunk = allMarkers.slice(i, i + chunkSize);
  const condition = new GIA.value.AnnotationMarkerCondition({
    distance: 32,
    textureMapping: {
      texture: iconTable,
      iconHeader,
    },
  });
  condition.addAnnotationMarkers(chunk);
  map.addAnnotationMarkerCondition(condition);
}
Copy

See

• addAnnotationMarkerCondition
• removeAnnotationMarkerCondition