mapbox-gl-draw API 中文文档

qq_42928221

已于 2024-07-24 15:39:22 修改

阅读量190

点赞数

文章标签：前端 javascript

于 2024-07-24 15:04:53 首次发布

原文链接：https://blog.csdn.net/weixin_43959963/article/details/128546475

版权

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。
在自定义样式中，您将需要使用以下特征特性：

qq_42928221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mapbox-gl-draw API 中文文档

然而，后续事件可能会触发，这些事件与调用的函数没有直接对应关系。例如，如果您选择了一个功能，然后调用draw.changeMode（'draw_polygon'），您将看不到draw.modechange事件（因为它直接对应于所调用的函数），但您将看到draw.selectchange事件，因为通过更改模式，您间接取消了选择功能。，但是问题在我想取draw后生成的feature的geojson文件，在mapbox官方文档上找到了draw的api链接，在github上，先翻译一遍，然后尝试找出解决方案。
复制链接

扫一扫