Function setTrafficMeshCondition

交通情報(mesh版)の表示条件を設定する — 詳細な使用例

mesh形式で渋滞情報・規制情報を地図上に描画します。 VICS規制・定義規制の表示、クリックリスナーによるデータ取得に対応しています。 旧来 API (_TrafficUsage.setTrafficCondition) より高機能で、新規採用はこちらを推奨します。

Warning

• source と icon は必須プロパティです。
• VICS表示を行う場合は uid も必須です。
• クリックイベントを取得するには setTrafficMeshClickListener を併用してください。
• clearTrafficMeshCondition で非表示に戻せます。

Example: TrafficMeshを表示し、クリック時に詳細を表示する

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

const TRAFFIC_ICON_SIZE = 20;
const iconInfo = (icon: string) => {
  return new GIA.value.TrafficMeshIconInfo({
    icon,
    size: new GIA.value.Size(TRAFFIC_ICON_SIZE, TRAFFIC_ICON_SIZE),
  });
};

map.setTrafficMeshCondition(new GIA.value.TrafficMeshCondition({
  source: 'vics',
  uid: 'your-uid',
  vicsReg: true,
  definedReg: true,
  zoomRange: new GIA.value.ZoomRange(10, 22),
  trafficTime: new Date(),
  trafficTimePartsOptions: {},
  icon: {
    CHAIN_REQUIRED: { info: iconInfo('path/to/chain_required.png') },
    ENTRY_CLOSED: { info: iconInfo('path/to/entry_closed.png') },
    TRAFFIC_ACCIDENT: { info: iconInfo('path/to/traffic_accident.png') },
    ROAD_NO_ENTRY: { info: iconInfo('path/to/road_no_entry.png') },
    UNMOVABLE_BEHICLE: { info: iconInfo('path/to/unmovable_vehicle.png') },
    UNDER_CONSTRUCTION: { info: iconInfo('path/to/under_construction.png') },
    UNDER_OPERATION: { info: iconInfo('path/to/under_operation.png') },
    LANE_RESTRICTED: { info: iconInfo('path/to/lane_restricted.png') },
    ROAD_FROZEN: { info: iconInfo('path/to/road_frozen.png') },
    ROAD_CLOSED: { info: iconInfo('path/to/road_closed.png') },
    ONE_WAY_ALTERNATED: { info: iconInfo('path/to/one_way_alternated.png') },
    ROAD_OBSTACLES: { info: iconInfo('path/to/road_obstacles.png') },
  },
}));

map.setTrafficMeshClickListener((data) => {
  console.log('交通情報:', JSON.stringify(data, null, 2));
});

// 非表示
map.clearTrafficMeshCondition();
Copy

See

• setTrafficMeshCondition
• clearTrafficMeshCondition
• setTrafficMeshClickListener