mapbox-gl-draw API Reference

• To use Draw
• Options
• Modes
• • • simple_select
    • direct_select
    • draw_line_string
    • draw_ploygon
    • draw_point
• API Methods
• • • add(geojson: Object) => Array
    • get(featureId: string): ?Feature
    • getFeatureIdsAt(point: { x: number, y: number }): Array
    • getSelectedIds(): Array
    • getSelected(): FeatureCollection
    • getSelectedPoints(): FeatureCollection
    • getAll(): FeatureCollection

最近工作有一项需求就是在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的集合。后面就不翻译了，以后用到再说。