gaopengbin/openlayers-mcp

OpenLayer MCP

Управление картами с помощью протокола Model Context для OpenLayers

Подключите любого MCP-совместимого агента ИИ к OpenLayers — вид, слои, функции, стили, рисование, все с помощью естественного языка.

中

Архитектура

Пакеты

| Пакет | Описание [скрыто] [скрыто] [скрыто] [скрыто] [скрыто] | openlayers-mcp-runtime | MCP Server (stdio) — 30+ инструментов в 7 наборах инструментов, мост WebSocket в браузер | | openlayers-mcp-bridge | Браузер SDK — получает команды через WebSocket и управляет картой OpenLayers |

Быстрый старт

###1 Установка и строительство

###2 Начать MCP Runtime

###3.Подключите браузер

Откройте examples/minimal/index.html в браузере. Мост автоматически подключается к ws://localhost:9300.

Интегрируйте мост в свое приложение:

###4 Подключите агента

Добавьте конфигурацию клиента MCP (Claude Desktop, Cursor и т. Д.):

Теперь спросите свой ИИ: «Покажите карту Парижа и добавьте многоугольник вокруг Лувра».

Примеры использования

Задайте своему агенту ИИ вопросы на естественном языке:

“Перелет в Токио на 12 уровне зума” «Добавить векторный слой из этого URL GeoJSON» Нарисуйте многоугольник на карте, а затем экспортируйте его как GeoJSON.

• “Установить непрозрачность слоя до 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