gaopengbin/openlayers-mcp

オープンレイヤ MCP

OpenLayersのモデルコンテキストプロトコルによるAIパワードマップ制御

MCP 互換の AI エージェントを OpenLayers に接続します。ビュー、レイヤー、機能、スタイル、描画、自然言語ですべて。

2018年11月11日

お問い合わせ

アーキテクチャ

パッケージ

| パッケージ | 概要 | お問い合わせ | Openlayers-mcp-runtime | MCP Server (stdio) — 7つのツールセット、WebSocket橋を渡る30以上のツール | | Openlayers-mcp-bridge | ブラウザSDK — WebSocketによるコマンドを受信し、OpenLayersのマップをコントロール |

クイックスタート

##1. インストール&ビルド

##2. MCPランタイムを開始

##3. ブラウザを接続する

ブラウザで[examples/minimal/index.htmlを開きます。 [ws://localhost:9300にブリッジ自動接続します。

または独自のアプリでブリッジを統合します。

##4. AIエージェントを接続する

MCP クライアント設定 (デスクトップ、カーソルなど) に追加します。

今度はAIに尋ねて下さい:「パリの地図を表示し、ルーブルのまわりでポリゴンを加えて下さい」

使用例

AIエージェントの自然言語の質問をしてください。

• 「東京へ ズームレベル12」
• 「ジオJSON URL からベクトルレイヤーを追加」
• 「マップ上のポリゴンを描き、ジオジェソンとしてエクスポート」
• 「レイヤーの不透明度を50%に設定」

---

Architecture

+----------------+   stdio    +--------------------+  WebSocket  +--------------------+
|   AI Agent     |  |  openlayers-mcp-   |  |  openlayers-mcp-   |
|   (Claude,     |    MCP     |  runtime           |   JSON-RPC  |  bridge            |
|    Cursor...)  |            |  (Node.js)         |    2.0      |  (Browser)         |
+----------------+            +--------------------+             +--------------------+
                                                                         |
                                                                  +------v------+
                                                                  |  OpenLayers |
                                                                  |  Map        |
                                                                  +-------------+

Packages

Quick Start

1. Install & Build

git clone https://github.com/gaopengbin/openlayers-mcp.git
cd openlayers-mcp
npm install
npm run build

2. Start the MCP Runtime

npx openlayers-mcp-runtime
# => HTTP + WebSocket server on http://localhost:9300
# => MCP Server running (stdio), 30+ tools registered

3. Connect Browser

Open examples/minimal/index.html in a browser. The bridge auto-connects to ws://localhost:9300.

Or integrate the bridge in your own app:

import { OpenLayersBridge } from 'openlayers-mcp-bridge'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'

const map = new Map({
  target: 'map',
  layers: [new TileLayer({ source: new OSM() })],
  view: new View({ center: [0, 0], zoom: 2 })
})

const bridge = new OpenLayersBridge(map)
bridge.connect('ws://localhost:9300')

4. Connect AI Agent