Function setRouteShapeCondition

ルート形状共通コンディションを設定する — 詳細な使用例

経路探索結果などのルート（線形状）を地図上にベクター描画します。 RouteShapeSpec でルート 1 本ぶんの形状・デザインを定義し、 RouteShapeCondition でその配列とアニメーション有無ををまとめて地図へ反映します。 クリック・ドラッグ（掴む・動かす・放す）のインタラクションにそれぞれコールバックを設定できます。

---

RouteShapeSpec オプション

オプション	型	説明
designKey	GIA.types.PolylineDesignKey	線のデザインキー（基本は 'stripe' を指定）
zIndex	number	複数ルートを重ねるときの描画順（大きいほど前面）
id	number	ルートの識別 ID（クリックコールバックで受け取れる）
isClickable	boolean	true にするとクリック可能になる
isAirArch	boolean	true にすると空中アーチ（3D 放物線）で表示
patternInterval	number	パターンテクスチャの繰り返し間隔
animationSpeed	number	アニメーション速度（0 でアニメーション停止）
tipSharpness	number	線端の尖り度合い
texture	string	designKey が 'texture' / 'textureStrict' のときに使う Base64 画像文字列
offsetWidth	number	線の横オフセット幅

Mocha GeoJSON の properties（inline / outline）

Mocha の /route/shape または /route?shape=enable レスポンスの GeoJSON には properties.inline / properties.outline が含まれており、RouteShapeSpec に渡す前に書き換えることで外観を変更できます。

フィールド	説明
inline.color	線の内側の色（6桁 hex 文字列）
inline.opacity	線の内側の不透明度（0.0 ~ 1.0）
outline.color	線の外側（縁）の色
outline.opacity	線の外側の不透明度
outline.width	線の外側の幅（px）

RouteShapeCondition オプション

オプション	型	説明
routeShapes	RouteShapeSpec[]	表示するルート形状の配列
isAnimated	boolean	true にするとルート線をアニメーション表示

Warning

• removeRouteShapeCondition を呼ぶとルート形状の描画がすべて削除されます。
• ドラッグ操作は setRouteShapeGrabCallback・setRouteShapeCarryCallback・setRouteShapeReleaseCallback の 3つを組み合わせて利用します。
• ドラッグ可能にするには、対象 RouteShapeSpec に isDraggable: true を指定してください。
• 各コールバックへ undefined を渡すと解除できます。
• designKey が 'texture' / 'textureStrict' のとき、texture に Base64 文字列を渡さないと正しく描画されません。

Example: Mocha API からルート線形状を取得して地図に表示する

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

// /route/shape エンドポイント から取得
const url = 'https://<mocha-host>/v1/<node-id>/route/shape?'
  + 'car=only&type=car&car-route=smic&datum=wgs84'
  + '&start={"lat":35.667298,"lon":139.714816}'
  + '&goal={"lat":35.658636,"lon":139.745406}';

// /route エンドポイントで shape=enable を指定する場合
// const url = 'https://<mocha-host>/v1/<node-id>/route?...&shape=enable';

const geoJson = await fetch(url).then((r) => r.json());

// properties.inline / outline を書き換えて外観を調整
for (const feature of geoJson.features) {
  feature.properties.inline.opacity = 0.7;
  feature.properties.outline.opacity = 1.0;
  feature.properties.outline.width = 12;
}

// route_no でフィルタリング
const routeNo = '0';
const filteredGeoJson = {
  type: 'FeatureCollection',
  features: geoJson.features.filter(
    (feature) => feature.properties.route_no === routeNo,
  ),
};

const shapeSpec = new GIA.value.RouteShapeSpec(filteredGeoJson, {
  zIndex: 5,
  patternInterval: 60,
  animationSpeed: 5,
  offsetWidth: 0,
  id: 0,
});

map.setRouteShapeCondition(
  new GIA.value.RouteShapeCondition({ routeShapes: [shapeSpec] }),
);
Copy

Example: 複数ルートを選択中・ゴースト（非選択）で並べて表示する

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

// Mocha から複数ルートの GeoJSON を取得済みと想定
// shapeSpecsList[i] = 選択中ルート、ghostSpecsList[i] = ゴーストルート
const shapeSpecsList: GIA.value.RouteShapeSpec[][] = [];
const ghostSpecsList: GIA.value.RouteShapeSpec[][] = [];

for (const [id, geoJson] of routeGeoJsonList.entries()) {
  // 選択中ルート: 高 zIndex・アニメーションあり
  const activeSpec = new GIA.value.RouteShapeSpec(geoJson, {
    zIndex: 5,
    patternInterval: 60,
    animationSpeed: 5,
    offsetWidth: 0,
    id,
  });

  // ゴーストルート: 色を薄くし zIndex 低・アニメーションなし・クリック可
  const ghostGeoJson = structuredClone(geoJson);
  for (const feature of ghostGeoJson.features) {
    feature.properties.inline.color = '333333';
    feature.properties.inline.opacity = 0.5;
    feature.properties.outline.opacity = 0.7;
  }
  const ghostSpec = new GIA.value.RouteShapeSpec(ghostGeoJson, {
    zIndex: 0,
    patternInterval: 60,
    animationSpeed: 0,
    offsetWidth: 0,
    isClickable: true,
    id,
  });

  shapeSpecsList.push([activeSpec]);
  ghostSpecsList.push([ghostSpec]);
}

// index 番のルートを選択中にして、それ以外をゴースト表示
const showOneRoute = (index: number) => {
  const specs: GIA.value.RouteShapeSpec[] = [
    ...shapeSpecsList[index],
  ];
  for (const [i, ghosts] of ghostSpecsList.entries()) {
    if (i !== index) specs.push(...ghosts);
  }
  map.setRouteShapeCondition(
    new GIA.value.RouteShapeCondition({ routeShapes: specs }),
  );
};

// ゴーストルートをクリックして切り替え
map.setRouteShapeClickCallback((data) => {
  const clickedId = data.id; // RouteShapeSpec に渡した id
  if (clickedId !== undefined) showOneRoute(clickedId);
});
Copy

Example: テクスチャ付きルートをアニメーション表示する

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

// Base64 テクスチャ画像を取得
const textureBase64 = await fetch('./navitime.txt').then((r) => r.text());

const shapeSpec = new GIA.value.RouteShapeSpec(filteredGeoJson, {
  designKey: 'texture',
  zIndex: 0,
  patternInterval: 100,
  animationSpeed: 1.5,
  tipSharpness: 0.5,
  texture: textureBase64,
  offsetWidth: 0,
});

map.setRouteShapeCondition(
  new GIA.value.RouteShapeCondition({ routeShapes: [shapeSpec], isAnimated: true }),
);

// アニメーション ON/OFF を切り替える
map.setRouteShapeCondition(
  new GIA.value.RouteShapeCondition({ routeShapes: [shapeSpec], isAnimated: false }),
);
Copy

Example: 空中アーチ（isAirArch）でルートを表示する

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

const shapeSpec = new GIA.value.RouteShapeSpec(filteredGeoJson, {
  designKey: 'normal',
  zIndex: 0,
  isAirArch: true,
});

map.setRouteShapeCondition(
  new GIA.value.RouteShapeCondition({ routeShapes: [shapeSpec], isAnimated: false }),
);
Copy

Example: クリック・ドラッグを検知する

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

// クリック
map.setRouteShapeClickCallback((data) => {
  console.log('クリックされたルート:', data);
});

// ドラッグ開始
map.setRouteShapeGrabCallback((latlng, id) => {
  console.log('ドラッグ開始:', id, latlng.lat, latlng.lng);
});

// ドラッグ中（移動）
map.setRouteShapeCarryCallback((latlng, id) => {
  console.log('移動中:', id, latlng.lat, latlng.lng);
});

// ドラッグ終了
map.setRouteShapeReleaseCallback((latlng, id) => {
  console.log('ドラッグ終了:', id, latlng.lat, latlng.lng);
});
Copy

Example: Draggable な RouteShape を複数本管理して更新する

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

const specMap = new Map<number, GIA.value.RouteShapeSpec>();

const updateCondition = () => {
  map.setRouteShapeCondition(
    new GIA.value.RouteShapeCondition({
      routeShapes: Array.from(specMap.values()),
    }),
  );
};

// draggable なルートを追加（idで差し替え管理）
const addDraggableRoute = (id: number, geoJson: unknown) => {
  const spec = new GIA.value.RouteShapeSpec(geoJson as GIA.types.JsonObject, {
    id,
    zIndex: 5,
    isClickable: true,
    isDraggable: true,
    patternInterval: 60,
    animationSpeed: 5,
  });
  specMap.set(id, spec);
  updateCondition();
};

// 掴む
map.setRouteShapeGrabCallback((latlng, id) => {
  console.log('grab', id, latlng.lat, latlng.lng);
});

// 動かす（ドラッグ中）
map.setRouteShapeCarryCallback((latlng, id) => {
  console.log('carry', id, latlng.lat, latlng.lng);
  // ここで一時マーカー表示やガイド更新を行う
});

// 放す（ドラッグ終了）
map.setRouteShapeReleaseCallback((latlng, id) => {
  console.log('release', id, latlng.lat, latlng.lng);
  // ここで中継点確定・再経路化などを実施
});

// 全削除
const clearRoutes = () => {
  specMap.clear();
  map.removeRouteShapeCondition();
};
Copy

See

• setRouteShapeCondition
• removeRouteShapeCondition
• setRouteShapeClickCallback
• setRouteShapeGrabCallback
• setRouteShapeCarryCallback
• setRouteShapeReleaseCallback