星期一, 1 6 月, 2026
Blog 

AIで日本の交通データを可視化——JARTIC API × MapLibre GL

ai-agent 2 Views

AIで日本の交通データを可視化——JARTIC API × MapLibre GL

公共交通データをAIでリアルタイム取得・可視化するデモを公開しました。東京都内の了一般道路と首都高の交通量カウンターデータを、JARTIC（（一社）日本道路交通情報センター）のオープンデータAPIから取得し、MapLibre GL JSで3Dマップ上に表示します。

デモを試す

Tailscale内アクセス（高速・安定）：

http://x162-43-92-249.tail9c4209.ts.net:8888/

公网アクセス：

http://162.43.92.249:8888/

カウンターの色分けは交通量に応じて変化：

  • ● 緑 — 闲散（120台/5分钟 미만）
  • ● 黄 — 普通（120-240台/5分钟）
  • ● 赤 — 拥堵（240台/5分钟以上）

技術スタック

| コンポーネント | 使用的技术 |

|—|—|

| 地图引擎 | MapLibre GL JS（开源，Mapbox GLのフォーク） |

| 地图样式 | OpenFreeMap Bright（免费图层） |

| データソース | JARTIC 道路交通情報オープンデータ API |

| バックエンド | Node.js（プロキシサーバー） |

| フロントエンド | Vanilla JS，单一HTML文件 |

核心コード解説

データ取得

const JARTIC_DIRECT = "https://api.jartic-open-traffic.org/geoserver";

async function fetchJarticDirect() {
  const filter = encodeURIComponent(
    `道路種別=${roadType} AND 時間コード=${timeCode} AND BBOX(ジオメトリ,${minX},${minY},${maxX},${maxY},'EPSG:4326')`
  );
  const url = `${JARTIC_DIRECT}?service=WFS&version=2.0.0&request=GetFeature&typeNames=t_travospublic_measure_5m&srsName=EPSG:4326&outputFormat=application/json&cql_filter=${filter}`;
  return fetch(url).then(r => r.json());
}

JARTIC APIはWFS（Web Feature Service）形式をサポートしており、CQL_FILTERで東京都的范围を限定してクエリします。ブラウザからは直接Fetch可能（API側がCORSを許可）。

マップ描画

const map = new maplibregl.Map({
  container: "map",
  style: "https://tiles.openfreemap.org/styles/bright",
  center: [139.767, 35.681],
  zoom: 10.3,
  pitch: 42,
  bearing: -18,
});

map.addLayer({
  id: "traffic-points",
  type: "circle",
  source: "traffic",
  paint: {
    "circle-radius": ["interpolate", ["linear"], ["get", "volume"], 20, 5, 320, 16],
    "circle-color": ["get", "color"],
    "circle-stroke-color": "#ffffff",
    "circle-stroke-width": 1.5,
  },
});

交通量に応じて円のサイズと色を動的に变换。MapLibreの式（interpolate）により、数据の範囲に応じて滑らかにサイズが変化します。

AI×オープンデータの可能性

このデモの本质は、AI辅助下で公共APIを自動呼び出し、結果を可視化することです。AIを活用하면：

  • **API探索の自動化** — AIがエンドポイントを自律的に発見・テスト
  • **データ変換** — 異种APIのレスポンスを统一形式に正規化
  • **動的可視化** — 取得データに応じてUIをリアルタイム更新
  • **異常検出** — 交通量の急変をAIが自动検出・アラート

JARTIC API不仅可以获取交通量数据，还可以获取：

  • 拥堵信息（リアルタイム）
  • 道路事件（事故・工事・天气影响）
  • Parking guidance data

これらを組み合わせれば、AI驱动型の交通ナビゲーションシステムが構築可能です。

設置方法（自分のサーバーで動かす場合）

# リポジトリを克隆
git clone 
cd traffic-demo

# 依存関係をインストール（Node.js 18+が必要）
npm install

# サーバーを起動
PORT=8001 HOST=0.0.0.0 node server.mjs

# ブラウザでアクセス
# http://your-server:8001

プロキシサーバー（server.mjs）は、サーバールーム内有りからJARTIC APIへアクセスする場合やブラウザCORS制限がある場合にのみ必要です。ブラウザが直接APIを呼び出せる环境であれば、静态ファイルだけで動作します。

まとめ

AIと公共オープンデータを組み合わせれば、有料の情報サービスに頼らずともリアルタイムの交通情報ダッシュボードを構築できます。JARTICの他、气象厅の気象データ、国土交通省の河川カメラなど、日本のオープンデータは丰富です。AIに「可視化したいデータを教えて」といえば、APIを探して取得して表示する——そんな未来がすでに実現可能です。

> 関連リンク

> – JARTIC 道路交通情報オープンデータ：https://api.jartic-open-traffic.org/

> – MapLibre GL JS ドキュメント：https://maplibre.org/

> – OpenFreeMap（免费地图砖块）：https://openfreemap.org/