cdamapbox-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]
// }
// }
// ]
// }
delete(ids: string | Array<string>): draw
删除具有指定ID的功能。返回用于链接的绘图实例。
在direct_select模式下,删除活动功能将退出该模式并恢复到simple_select方式。
var feature = { type: 'Point', coordinates: [0, 0] };
var ids = draw.add(feature);
draw
.delete(ids)
.getAll();
// { type: 'FeatureCollection', features: [] }
deleteAll(): draw
删除所有功能。返回用于链接的绘图实例。
draw.add({ type: 'Point', coordinates: [0, 0] });
draw
.deleteAll()
.getAll();
// { type: 'FeatureCollection', features: [] }
set(featureCollection: FeatureCollection): Array<string>
将Draw的特征设置为指定FeatureCollection中的特征。
执行任何必要的删除、创建和更新操作,使Draw的功能与指定的FeatureCollection匹配。实际上,这与Drawing.deleteAll()和Drawing.add(featureCollection)相同,只是它对性能的影响不大。
var ids = draw.set({
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {},
id: 'example-id',
geometry: { type: 'Point', coordinates: [0, 0] }
}]
});
// ['example-id']
trash(): draw
调用当前模式的回收操作。返回用于链接的绘图实例。
在simple_select模式下,这将删除所有选定的特征。
在direct_select模式下,这将删除选定的顶点。
在绘图模式下,这将取消绘图并将绘图恢复为simple_select模式。
如果要删除功能,而不管当前模式如何,请使用delete或deleteAll功能。
combineFeatures(): draw
调用当前模式的combineFeatures操作。返回用于链接的绘图实例。
在simple_select模式下,只要所有选定特征都是相同的几何类型,它就会将所有选定特征组合成一个Multi*特征。例如:
选择两个行字符串=>多行字符串
选择是一个多行字符串和一个行字符串=>多行字符串
选择两个多行字符串=>多行字符串
当选择不同几何类型的特征时调用此函数不会导致任何更改。例如:
选择是一个点和一条线字符串=>未采取任何操作
选择是多行字符串和多点=>未采取任何操作
在direct_select模式和绘图模式下,不采取任何操作。
uncombineFeatures(): draw
调用当前模式的uncombineFeatures操作。返回用于链接的绘图实例。
在simple_select模式下,这会将每个选定的Multi*特征拆分为其组件特征部分,而非多特征则保持不变。例如:
选择由两部分组成的MultiLineString=>LineString,LineString
选择是由三部分组成的MultiLineString=>LineString、LineString和LineString
选择是由两部分和一个点组成的MultiLineString=>LineString,LineString,Point
选择LineString=>LineString
在direct_select和绘图模式下,不采取任何操作。
getMode(): string
返回Draw的当前模式。有关模式的更多信息,请参阅上文。
changeMode(mode: string, options?: Object): draw
将“绘制”更改为另一种模式。返回用于链接的绘图实例。
mode参数必须是上述模式名称之一,并在Draw.modes中枚举。
simple_select、direct_select和draw_line_string模式接受选项对象。
setFeatureProperty(featureId: string, property: string, value: any): draw
使用指定的id设置要素的属性值。返回用于链接的绘图实例。
如果您将Draw的功能用作应用程序中的主要数据存储,这将非常有用。
events
引发了许多事件。所有这些活动都以平局命名。并从Mapbox GL JS映射对象发出。所有事件都是由用户交互触发的。
map.on('draw.create', function (e) {
console.log(e.features);
});
如果以编程方式调用Draw API中的函数,则不会激发与该函数直接对应的任何事件。例如,如果您调用draw.delete(),则不会有相应的draw.delete事件,因为您已经知道自己做了什么。然而,后续事件可能会触发,这些事件与调用的函数没有直接对应关系。例如,如果您选择了一个功能,然后调用draw.changeMode('draw_polygon'),您将看不到draw.modechange事件(因为它直接对应于所调用的函数),但您将看到draw.selectchange事件,因为通过更改模式,您间接取消了选择功能。
draw.create
创建特征时触发。以下交互将触发此事件:
完成特征的绘制。只需单击即可创建一个点。只有当用户完成绘制后(即双击最后一个顶点或按Enter键),并且绘制的特征有效时,才会创建LineString或Polygon。
事件数据是一个具有以下形状的对象:
draw.delete
删除一个或多个功能时触发。以下交互将触发此事件:
在simple_select模式下选择一个或多个功能时,单击垃圾按钮。
在simple_select模式下选择一个或多个特征时,按Backspace或Delete键。
当您在simple_select模式下选择了一个特性时,调用draw.trash()。
draw.combine
当功能组合时触发。以下交互将触发此事件:
在simple_select模式下选择多个特征时,单击Combine按钮。
在simple_select模式下选择多个特征时,调用draw.combineFeatures()。
draw.uncombine
当功能未组合时触发。以下交互将触发此事件:
在simple_select模式下选择一个或多个多特征时,单击取消合并按钮。也可以选择非多功能。
在simple_select模式下选择一个或多个多特征时,调用draw.uncombineFeatures()。也可以选择非多功能。
draw.update
当一个或多个功能更新时触发。以下交互将触发此事件,该事件可以按操作进行子分类:
动作:“移动”
在simple_select模式下完成移动一个或多个选定特征。该事件仅在移动完成时才会触发(即当用户释放鼠标按钮或按下Enter键时)。
操作:'更改坐标'
在direct_select模式下完成移动选定特征的一个或多个顶点。该事件仅在移动完成时才会触发(即当用户释放鼠标按钮或按下Enter键,或她的鼠标离开地图容器时)。
在direct_select模式下删除选定特征的一个或多个顶点,可以通过点击Backspace或Delete键、单击Trash按钮或调用draw.Trash()来完成。
通过在direct_select模式下单击选定特征上的中点,将顶点添加到该特征。
创建或删除功能时,此事件不会触发。要跟踪这些交互,请监听draw.create和draw.delete事件。
draw.selectionchange
更改选择时触发(即选择或取消选择一个或多个功能)。以下交互将触发此事件:
单击某个功能以选择它。
当已经选择了一个特征时,按住shift键并单击另一个特征将其添加到选择中。
单击顶点以选择它。
当已经选择了一个顶点时,按住shift键并单击另一个顶点将其添加到选择中。
创建至少包含一个特征的框选择。
单击所选功能外部以取消选择。
单击远离选定顶点以取消选择。
完成特征的绘制(特征在创建后立即被选择)。
当一个特征已经被选择时,调用draw.changeMode(),这样该特征就会被取消选择。
使用draw.changeMode('simple_select',{featureIds:[..]})切换到simple_select模式,并立即选择指定的特征。
使用draw.delete、draw.deleteAll或draw.trash删除功能。
draw.modechange
模式更改时触发。以下交互将触发此事件:
单击点、线或多边形按钮开始绘图(进入draw_*模式)。
完成特征的绘制(进入simple_select模式)。
在simple_select模式下,单击已选择的功能(进入direct_select方式)。
在direct_select模式下,单击所有功能外部(进入simple_select方式)。
此事件在当前模式停止后和下一个模式开始前触发。在所有事件处理程序都被触发之前,渲染不会发生,因此您可以通过在draw.modechange处理程序中调用draw.changeMode()来强制模式重定向。
draw.render
Draw在Mapbox GL JS映射上调用setData()后立即触发。这并不意味着set数据调用已经完成了映射的更新,只是映射正在被更新。
draw.actionable
随着Draw状态的变化而触发,以启用和禁用不同的操作。通过此事件,您可以知道draw.trash()、draw.combineFeatures()和draw.uncombineFeature()是否有效。
{
actions: {
trash: true
combineFeatures: false,
uncombineFeatures: false
}
}
Styling Draw
Draw使用的地图样式遵循Mapbox GL样式规范,但有一些注意事项。
来源
GL样式规范要求每个图层都有一个源。但是,在设置Draw样式时不要提供源。
Draw在源之间移动特征以微调性能。因此,Draw将自动为您提供源代码。
Draw提供的源名为mapbox-gl-Draw-hot和mapbox-gl-Draw-chold。
身份证件
GL样式规范还需要一个id。您必须提供id。Draw将在您的id上添加后缀.hot和.cold。
在自定义样式中,您将需要使用以下特征特性: