Leaflet.draw 0.2 リリース

2013年2月20日に Jacob Toye が投稿

これは、Leafletの精力的なコントリビューターであり、この投稿で紹介されている、最も洗練されたベクトル描画編集プラグインの作者であるJacob Toyeによるゲスト投稿です。

Leaflet.drawは、マップ上にポリゴンを描画する機能をユーザーに提供する必要性から生まれました。Leafletはすでに、既存のポリラインやポリゴンの非常に優れた編集方法を提供していました。論理的な次のステップとして、これらのレイヤーを作成できるようこの機能を拡張し、最終的に他のベクトルレイヤーを作成できるようにしました。

リリース直後、Leafletコミュニティからの反応は非常に肯定的でした。次のステップは、ユーザーがシェイプを作成するだけでなく、編集したり削除したりすることもできる状態にまでこのツールを改良することであることは明らかでした。これこそがLeaflet.draw 0.2の目的でした。

開発を繰り返して数ヶ月が経ち、そのほとんどの空き時間は雇用主であるSmartrakの好意により提供されました。Leafletマップ上にベクトルとマーカーを描画、編集、削除するためのワンストッププラグイン、Leaflet.draw 0.2を誇らしげに紹介します。 :)

Vladimirからの注意: Leafletコアのポリライン/ポリゴン編集機能は、はるかに適しているこのプラグインに移行されました。プラグイン自体の開発はGitHubのLeaflet組織に移行され、現在Leaflet開発チームにより公式にサポートされています。0.2バージョンでは、動作させるためにLeafletマスター（進行中の開発バージョン）が必要となる点に注意してください。

githubリポジトリから最新バージョンをダウンロードできます。問題ページで、遭遇したバグを報告してください。

機能

Leaflet.drawは、エンドユーザーが簡単に使用できるように設計されているだけでなく、開発者が統合しやすいように設計されています。

使いやすい描画ツールを使用してマップ上にシェイプを描画します。
ベクトルとマーカーを編集および削除します。
自由自在にカスタマイズ可能
- マップのテーマに合わせて各シェイプのスタイルをカスタマイズします。
- 使用するツールを選択してください。
- 描画と編集のハンドラーを使用するだけで自分で作成できます。
イベントベースのシステムにより、シェイプの作成、編集、削除時に必要なアクションを実行できます。

使用方法

Leaflet.drawは、Leafletアプリケーションにとても簡単に導入できます。次の例では、描画ツールバーと編集ツールバーの両方をマップに追加します。

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([175.30867, -37.77914], 13);

// add an OpenStreetMap tile layer
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Initialize the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

// Initialize the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
	edit: {
		featureGroup: drawnItems
	}
});
map.addControl(drawControl);

新しく作成したレイヤーの処理

Leaflet.drawプラグインをマップに正常に追加したら、ユーザーがトリガーできるさまざまなアクションに応答する必要があります。

map.on('draw:created', function (e) {
	var type = e.layerType,
		layer = e.layer;

	if (type === 'marker') {
		// Do marker specific actions
	}

	// Do whatever else you need to. (save to db, add to map etc)
	drawnItems.addLayer(layer);
});

map.on('draw:edited', function () {
	// Update db to save latest changes.
});

map.on('draw:deleted', function () {
	// Update db to save latest changes.
});

プラグインの構成方法の詳細については、Leaflet.drawのREADMEを参照してください。

謝辞

まず最初に、雇用主のSmartrakに感謝したいと思います。オープンソースソフトウェアに対する彼らの姿勢がなければ、このプラグインを完成させる時間はなかったでしょう。

Leaflet 開発コミュニティは、インスピレーション、プルリクエスト、問題の報告を通じてこのプラグインをサポートしてくれたことで素晴らしいです。特に以下の方々に感謝します。@mourner、@danzel、@brunob、@tnightingale、@Starefossen、および@shramov。

締めくくり

私はこのプラグインを実装する素晴らしい時間を過ごしてきました。あなたにもぜひ楽しんでいただければと思います。質問があるとか、ただ挨拶したいという場合でも、jacob.toye@gmail.com までメールを送ってください。

ジェイコブ・トェイ