Function setRailwayShapeCondition

鉄道路線形状のオプションを設定する — 詳細な使用例

鉄道路線を路線カラーでベクター描画します。 mocha の /operation/train から取得した運行情報リストを渡すことで、 運行状況（遅延・運転見合わせなど）を路線の色に反映できます。 クリック・ホバー・マウスエンター・マウスリーブの各インタラクションに対応しています。

RailwayShapeCondition コンストラクタ引数 (RailwayShapeInitOptions)

プロパティ	型	説明
zoomRange	ZoomRange	表示するズームレベル範囲
operationInfoItems	JsonObject[]	mocha /operation/train から取得した運行情報リスト
accentKeyMapper	Map<string, 0|1|2|3|4|5>	運行情報テキストと強調色の対応（0=無色 1=緑 2=黄 3=橙 4=赤 5=黒）
appearanceCallback	(data, zoomLevel) => RailwayShapeAppearance	路線ごとに見た目を動的に制御するコールバック

appearanceCallback 戻り値 (RailwayShapeAppearance)

プロパティ	型	説明
color	Color	線の色
weight	number	線の太さ
isAccented	boolean	運行情報区間を強調するか（デフォルト true）
isStriped	boolean	縞模様を描画するか（デフォルト true）
isTopped	boolean	最前面に描画するか（デフォルト false）
isVisible	boolean	線を描画するか（デフォルト true）

コールバック引数 (RailwayShapeData)

プロパティ	型	説明
companyId	string	会社ID
companyName	string	会社名
rellineId	string	実路線ID
rellineName	string	実路線名
rellineColor	string	実路線色（#RRGGBB）
lineType	number	路線種別
operation	RailwayOperationData[]	運行情報（任意）

Note

• 各コールバックのシグネチャは (event: MouseEvent, data?: RailwayShapeData) => void です。 event.clientX / event.clientY を map.getLatLngFromClientCoord に渡すと緯度経度が取れます。
• appearanceCallback を使うと路線ごとに色・太さ・可視性をカスタマイズできます。 setRailwayShapeCondition に渡した後、外部状態が変化した場合は map.forceMapUpdate() を呼んで再描画してください。
• condition に undefined を渡すと路線形状が非表示になります。
• 各コールバックに undefined を渡すと解除できます。

Warning

• operationInfoItems を渡す場合は mocha /operation/train の応答 items 配列をそのまま渡してください。
• appearanceCallback と operationInfoItems/accentKeyMapper を同時に設定した場合、appearanceCallback が優先されます。

Example: 鉄道路線形状を表示し、クリック・ホバー時に路線名を取得する

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

// 路線形状の表示条件を設定
map.setRailwayShapeCondition(new GIA.value.RailwayShapeCondition({
  zoomRange: new GIA.value.ZoomRange(10, 22),
}));

// クリックコールバック（第1引数は MouseEvent、第2引数が路線データ）
map.setRailwayShapeClickCallback((event, data) => {
  if (!data) return;
  console.log('クリックされた路線:', data.rellineName);
  const latlng = map.getLatLngFromClientCoord(new GIA.value.Point(event.clientX, event.clientY));
  console.log('クリック座標:', latlng);
});

// ホバーコールバック（マウス移動中に連続発火）
map.setRailwayShapeHoverCallback((event, data) => {
  if (data) console.log('ホバー中:', data.rellineName);
});

// マウスエンター（路線への進入）
map.setRailwayShapeMouseEnterCallback((event, data) => {
  if (data) console.log('エンター:', data.rellineName);
});

// マウスリーブ（路線からの離脱）
map.setRailwayShapeMouseLeaveCallback((event, data) => {
  if (data) console.log('リーブ:', data.rellineName);
});
Copy

Example: mocha 運行情報を路線カラーに反映し、appearanceCallback で可視性を制御する

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

// mocha /operation/train から運行情報を取得
const res = await mochaClient.get('/operation/train');
const operationInfoItems = res.items;

// 運行支障のある路線を赤く強調するカスタムコールバック
const appearanceCallback: GIA.types.RailwayShapeAppearanceCallback = (data, zoomLevel) => ({
  color: new GIA.value.Color(data.rellineColor),
  weight: zoomLevel >= 14 ? 4 : 2,
  isAccented: true,
  isStriped: true,
  isTopped: false,
  isVisible: true,
});

map.setRailwayShapeCondition(new GIA.value.RailwayShapeCondition({
  zoomRange: new GIA.value.ZoomRange(10, 22),
  operationInfoItems,
  appearanceCallback,
}));

// 外部状態が変わったら forceMapUpdate で再描画
// map.forceMapUpdate();
Copy

See

• setRailwayShapeCondition
• setRailwayShapeClickCallback
• setRailwayShapeHoverCallback
• setRailwayShapeMouseEnterCallback
• setRailwayShapeMouseLeaveCallback