mapbox-gl-draw API Reference
最近工作有一項需求就是在web上進行數據點採集，生成一個geojson的數據。其他框架沒細看，之前用過mapbox，就繼續用mapbox來實現，參考了mapbox例子之後，發現draw是沒什麼問題，mapbox主頁單獨有個這個例子
show draw polygon area，但是問題在我想取draw後生成的feature的geojson文件，在mapbox官方文檔上找到了draw的api鏈接，在github上，先翻譯一遍，然後嘗試找出解決方案。
To use Draw
// Create a Mapbox GL JS map
var map = new Map(mapOptions);
// Create a Draw control
var draw = new MapboxDraw(drawOptions);
// Add the Draw control to your map
map.addControl(draw);
draw會在maobox的地圖加載時工作，所以你必須在地圖加載之後進行交互操作
map.on('load', function() {
draw.add({ .. });
});
Options
所有可選項如下：
-keybindings（默認爲true）：是否啓用鍵盤交互
-touchEnabled（默認爲true）：是否啓用觸摸交互
-boxSelect（默認爲true）：是否啓用框選draw，如果啓用可通過shift+click+drag來draw，如果不啓用，shift+click+drag會放大縮小地圖。
-clickBuffer（默認爲2）：在頂點或要素周圍的響應點擊像素數量
-touchBuffer（默認爲25）：在頂點或要素周圍的響應觸屏的像素數量
-controls（對象）：隱藏或展示individual controls。每個屬性名都是一個control，且值都是布爾型，表徵是否啓用control。可用control有point/line_string/polygon/trash/combine_features/uncombine_features。默認情況下，所有controls都是打開，可以通過displayControlsDefault來改變默認
-displayControlsDefault（默認爲true）：controls的默認值，例如，你想關閉所有controls，設置其爲false
-styles（array對象）：一組map style對象
-modes（對象）：可以用你自己的modes替代原有的。MapboxDraw.modes提供可用的默認值
-defaultMode（字符串，默認“simple_select”）:決定用戶首先使用的mode
-userProperties（默認爲false）：feature的屬性可以用來作爲樣式，通過前綴實現
Modes
mapboxDraw默認有一些模式，這些模式旨在涵蓋一些創建geojson要素的基本需求。除此之外，mapboxdraw還支持自定義modes。
mode名稱可以通過Draw.modes獲取
simple_select
Draw.modes.SIMPLE_SELECT === ‘simple_select’
支持選擇、刪除和拖拽要素。
在這個模式下，features可以改變任何被選擇的狀態。
Draw是默認在此模式下，而且每次在用戶結束畫一個要素或者退出direct_select模式後會自動切入到此模式下。
direct_select
Draw.modes.DIRECT_SELECT === ‘direct_select’
支持選擇、刪除、拖拽頂點以及拖拽要素。
direct_select不支持點要素，因爲點要素沒有頂點。
draw在用戶點擊一個選擇線或多邊形的頂點時進入此模式。
draw_line_string
Draw.modes.DRAW_LINE_STRING === ‘draw_line_string’
使你可以畫LineString要素
draw_ploygon
Draw.modes.DRAW_PLOYGON === ‘draw_ploygon’
使你可以畫一個polygon要素
draw_point
Draw.modes.DRAW_POINT === 'draw_point'
使你可以畫一個point要素
API Methods
new MapboxDraw()返回一個Draw的實例，其擁有如下方法：
add(geojson: Object) => Array
這個方面可以將一個geojson feature、featureCollection、Geometry加入到Draw中。
它返回一個添加的交互要素的id列表，如果一個要素沒有id，則會自動生成一個。
支持的geojson要素有：point、LineString、Polygon、MultiPoint、MultiLineString、MultiPolygon。
如果你添加的是一個已經在用的id，則會更新當前的存在的要素，而並不會新建一個。
例：沒有id
var feature = { type: 'Point', coordinates: [0, 0] };
var featureIds = draw.add(feature);
console.log(featureIds);
//=> ['some-random-string']
例：有id
var feature = {
id: 'unique-id',
type: 'Feature',
properties: {},
geometry: { type: 'Point', coordinates: [0, 0] }
};
var featureIds = draw.add(feature);
console.log(featureIds)
//=> ['unique-id']
get(featureId: string): ?Feature
返回draw中的geojson要素的id，如果id沒有對應feature，返回undefined
例：
var featureIds = draw.add({ type: 'Point', coordinates: [0, 0] });
var pointId = featureIds[0];
console.log(draw.get(pointId));
//=> { type: 'Feature', geometry: { type: 'Point', coordinates: [0, 0] } }
getFeatureIdsAt(point: { x: number, y: number }): Array
返回在特定點當前渲染的要素集合id的列表。
注意到point要素需要x,y的像素空間座標，而不是經緯度座標。
通過這個函數，你可以通過鼠標事件獲取的座標來得到draw之外的信息。
var featureIds = Draw.getFeatureIdsAt({x: 20, y: 20});
console.log(featureIds)
//=> ['top-feature-at-20-20', 'another-feature-at-20-20']
getSelectedIds(): Array
返回當前選中要素的id列表
getSelected(): FeatureCollection
返回當前選中的要素集合。
getSelectedPoints(): FeatureCollection
返回當前選中點所代表的要素集合
getAll(): FeatureCollection
返回所有要素集合
例:
draw.add({ type: 'Point', coordinates: [0, 0] });
draw.add({ type: 'Point', coordinates: [1, 1] });
draw.add({ type: 'Point', coordinates: [2, 2] });
console.log(draw.getAll());
// {
// type: 'FeatureCollection',
// features: [
// {
// id: 'random-0'
// type: 'Feature',
// geometry: {
// type: 'Point',
// coordinates: [0, 0]
// }
// },
// {
// id: 'random-1'
// type: 'Feature',
// geometry: {
// type: 'Point',
// coordinates: [1, 1]
// }
// },
// {
// id: 'random-2'
// type: 'Feature',
// geometry: {
// type: 'Point',
// coordinates: [2, 2]
// }
// }
// ]
// }
額 寫到這邊，應該懂了，我已經找到我要的了，getAll就能返回geojson的集合。後面就不翻譯了，以後用到再說。