Terra Draw - あらゆる地図アプリケーションに描画機能を¶

Terra Draw とは¶

はじめての方への紹介

ウェブ地図上での描画は簡単そうに見える¶

自分で作るまでは。

クリックで頂点を追加し、ドラッグで動かし、隣の頂点にスナップさせる
ユーザーが描いている最中もジオメトリを正しい状態に保つ
元に戻す、やり直す、選択する、削除する
そして次の地図ライブラリで、また同じことを一からやる

地図ライブラリごとに、それぞれの答えがあった¶

Existing drawing plugins

Leaflet.draw、leaflet-freedraw、mapbox-gl-draw... API も挙動もバグもばらばらで、描画のコードは1つの地図に縛られてしまう。

Terra Draw¶

ウェブ地図上で描画するためのオープンソースの TypeScript ライブラリ。約 4 年前に James Milner さんが作りました。

描画エンジンは1つ、地図はたくさん。

npm install terra-draw

目指したこと¶

地図ライブラリ横断の対応
カスタムモード
細かなスタイル制御
依存関係ゼロ

全体の構成¶

Terra Draw architecture

アダプターが地図とやり取りし · モードが操作を担い · ストアが GeoJSON を保持する。

1 つの API で、たくさんの地図へ¶

Supported map libraries

アダプターを差し替えるだけ。あとはそのまま。

描画を担うのはモード¶

point、linestring、polygon、marker、polyline
rectangle、angled-rectangle、circle、sector、sensor
freehand、freehand-linestring
select — 移動・回転・拡大縮小・削除
...独自のモードを書くこともできる

はじめよう¶

Terra Draw で何ができるのか

数行でセットアップ¶

import { TerraDraw, TerraDrawPolygonMode } from 'terra-draw';
import { TerraDrawMapLibreGLAdapter } from 'terra-draw-maplibre-gl-adapter';

const draw = new TerraDraw({
  adapter: new TerraDrawMapLibreGLAdapter({ map }),
  modes: [new TerraDrawPolygonMode({ snapping: true })]
});

draw.start();
draw.setMode('polygon');

データはただの GeoJSON¶

draw.on('finish', (id) => {
  const snapshot = draw.getSnapshot();
  const feature = snapshot.find((f) => f.id === id);
  console.log(JSON.stringify(feature));
});

getSnapshot() / addFeatures() — GeoJSON を扱えるものとなら何とでも、フィーチャーの読み込み・保存・往復ができる。

2026 年の新機能¶

プロジェクトですぐ使える新しい機能

元に戻す / やり直す¶

Undo and redo buttons

どんな描画アプリにもある機能で、最も要望が多かったものの 1 つ。そして、正しく作るのが難しい。

2 段階の仕組み¶

描画中の undo / redo — 1 つのモードの中で働く
セッションの undo / redo — モードをまたいで働く
併用しても、片方だけでも使える

draw.undo();
draw.redo();

スタイル機能の強化¶

Per-feature styling

ジオメトリのスタイル指定の幅が広がりました。スタイルのコールバックはフィーチャーを受け取るので、色・太さ・不透明度を独自のプロパティから決められます。

Per-feature styling

line モードが破線に対応しました。新しい lineStringDash スタイルプロパティを使います。

ポリラインモード¶

Polyline mode

線として描き始めて、そのまま面として閉じられます。モードを切り替える必要はありません。

同じモードの複数インスタンス¶

Two polygon modes with different styles

1 つのモードを別々の設定で 2 回登録できます。たとえばスタイルとバリデーションの異なる 2 つのポリゴンモードを同時に使えます。

新しい描画操作¶

Click and drag drawing

クリック & ドラッグに対応。角を 1 つずつクリックする代わりに、矩形や円をひと続きの操作で描けます。

とはいえ UI は自分で作る必要がある¶

Terra Draw が提供するのは描画エンジンです。ボタン、モードの切り替え、地図のコントロールは自分で書くことになります。

maplibre-gl-terradraw¶

MapLibre GL JS 用のプラグイン。Terra Draw と、すぐ使えるコントロールをセットで。

コントロールの追加は 1 行¶

npm install @watergis/maplibre-gl-terradraw

あとは 1 行書くだけで、MapLibre の地図にコントロールを追加できます。

import { MaplibreTerradrawControl } from '@watergis/maplibre-gl-terradraw';

map.addControl(
  new MaplibreTerradrawControl({ open: true }),
  'top-left'
);