Leaflet.draw 0.2 發佈

發表於 2013 年 2 月 20 日，作者：Jacob Toye

這是一篇來自 Jacob Toye 的客座文章，他是一位活躍的 Leaflet 貢獻者，也是目前最精密的向量繪圖和編輯外掛的作者，這篇文章將介紹這個外掛。

Leaflet.draw 的誕生源於需要提供使用者在地圖上繪製多邊形的能力。Leaflet 已經提供了一個非常好的編輯現有多邊形和折線的方式。接下來的合理步驟是擴展此功能，以允許建立這些圖層，以及最終建立其他向量圖層。

發佈後，Leaflet 社群的立即反應非常正面。很明顯，下一步是將這個工具發展到一個狀態，讓使用者除了建立形狀外，還可以編輯和刪除形狀。這最終是 Leaflet.draw 0.2 的目標。

經過幾個月斷斷續續的開發，大部分的閒暇時間都由我的雇主 Smartrak 慷慨贊助，我們榮幸地推出 Leaflet.draw 0.2 – 您在 Leaflet 地圖上繪製、編輯和刪除向量和標記的一站式外掛。:)

來自 Vladimir 的說明：Leaflet 核心的折線/多邊形編輯功能已移至此外掛，更適合放置於此。該外掛反過來已移至 GitHub 上的 Leaflet 組織，現在由 Leaflet 開發團隊正式支援。請注意，0.2 版本目前需要 Leaflet master (開發中的版本) 才能運作。

您可以從 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 給我。

祝您愉快，Jacob Toye