MapboxDraw API（建议用谷歌浏览器翻译为中文）

API 参考

使用绘图

```js // 创建一个 Mapbox GL JS 地图var map = new Map ( mapOptions ) ; // 创建一个 Draw 控件var draw = new MapboxDraw ( drawOptions ) ; // 将 Draw 控件添加到您的地图map 。addControl （绘制）；``

只画出Mapbox GL JS地图加载之后的作品，所以你必须只绘制互动后地图的’负荷’事件：

```js地图。on(‘load’,function(){ draw .add({…});});``##选项以下所有选项都是可选的。-keybindings,boolean(默认true): 是否启用用于绘图的键盘交互。-touchEnabled,boolean(默认true):

       是否为绘图启用触摸交互。- ` boxSelect ` , boolean (default ` true ` ): 是否使用` shift ` + ` click ` +drag启用框选择功能。如果`假`，`shift`

+click+drag zooms into an area.-clickBuffer,number(default:2):
将响应单击的任何要素或顶点（在每个方向上）周围的像素数。- touchBuffer，数（默认：25）：号码的周围的任何特征像素的顶点（在每个方向），将一个触摸响应。- ‘控制’，对象：隐藏或显示单独控制。

每个属性的名称是一个控件，值是一个布尔值，指示控件是打开还是关闭。可用的控制名称是点， line_string， 面， 垃圾， combine_features和uncombine_features。通过默认情况下，所有的控制都在。要更改默认的，使用displayControlsDefault。

• displayControlsDefault， 布尔 （默认： ‘真’）：在默认值的 ‘控制’。例如， 如果你想所有的控制是关闭通过默认，并指定允许列表与 ‘控制’，用displayControlsDefault：假。- 风格
  ，阵列\ <对象\ > ：一种阵列的地图样式对象。通过默认情况下，绘制提供地图风格为你。要了解覆盖样式，请参阅下面的[ Styling Draw ] ( #styling - draw )部分。- 模式，对象：在乘坐的默认模式，用你自己的。MapboxDraw.modes
  可以用来查看默认值。在自定义模式的更多信息[可以在这里找到] （ HTTPS ：/ / github上。的COM / mapbox / mapbox - GL -吸取/ BLOB /主/文档/模式。 MD ）。- defaultMode，字符串（默认：’ ‘simple_select’ ）： 的模式 （从模式）该用户将第一焊盘在。- userProperties ，布尔（默认：'假'）：特性的功能也将提供对造型和前缀与用户_ ， ē 。克。， [ ‘==’， ‘user_custom_label’， ‘实施例’] ` ##模式通过缺省

MapboxDraw船舶与几个模式。这些模式的目的是覆盖在功能所需的基本为产生核以GeoJSON特征类型MapboxDraw 。除了有这些， MapboxDraw还支持[自定义模式。点击这里为更多详情] （ HTTPS ：/ / github上。的COM / mapbox / mapbox - GL -吸取/ BLOB /主/文档/模式。医学博士）。该模式名称字符串都可以作为一个枚举在Draw.modes。### simple_select Draw.modes.SIMPLE_SELECT === 'simple_select'让您选择，删除，并拖拽功能。在此模式下，用户可以更改功能的选定状态。平局是在simple_select模式下默认情况下，

并会自动过渡到simple_select每次模式再次在用户完成绘制特征或退出direct_select模式。

direct_select

Draw.modes.DIRECT_SELECT === 'direct_select'

让您选择， 删除，并拖动顶点; 和拖动功能。direct_select模式并不适用于点要素，因为他们没有顶点。绘制进入direct_select模式，当用户点击一个顶点的一个选择的行或多边形。所以direct_select模式通常遵循simple_select模式。### draw_line_string `

Draw.modes.DRAW_LINE_STRING === ‘draw_line_string’ 让您绘制 LineString 特征。### draw_polygon Draw.modes.DRAW_POLYGON === ‘draw_polygon’ 让您绘制多边形特征。### draw_point Draw.modes.DRAW_POINT === ‘draw_point’ 让您绘制一个点特征。## API方法新MapboxDraw（）返回一个实例的绘制与下列API ： ###

add(geojson: Object) => Array < string > `

此方法采用 GeoJSON Feature、FeatureCollection 或 Geometry 并将其添加到 Draw。它返回一个 id 数组，用于与添加的功能进行交互。如果某个功能没有自己的 id，则会自动生成一个。

支持的以GeoJSON特征类型的支持：点，线串，多边形，多点， MULTILINESTRING和的MultiPolygon。

如果你add()一个id已经在使用的特性，现有特性将被更新并且不会添加新特性。

没有指定功能 ID 的示例：

js var feature = { type : 'Point' ,坐标: [ 0 , 0 ] } ; var featureIds = draw 。添加（功能）；控制台。日志（ featureIds ）；//=> ['some-random-string']

具有指定功能 ID 的示例：

js var feature = { id : 'unique-id' , type : 'Feature' , properties : { } , geometry : { type : 'Point' ,坐标: [ 0 , 0 ] } } ; var featureIds = draw。添加（功能）；绘制。（ featureIds ）//=> [unique-id']– - ### get(featureId: string): ?Feature返回GeoJSON的功能在绘制与指定的ID ，或’不确定’，如果该编号的特征匹配。示例：```js var featureIds = draw 。添加（{类型：‘点’

,坐标: [ 0 , 0 ] } ) ; var pointId = featureIds [ 0 ] ; 控制台。日志（绘制。获取（ pointId ））；//=> { 类型：‘特征’，几何：{ 类型：‘点’，坐标：[0, 0] } } ```

---

getFeatureIdsAt(point: { x: number, y: number }): Array<string>

返回当前在指定点呈现的功能的功能 ID 数组。

注意，点参数需要X，ÿ从像素空间，而不是经度，纬度坐标的坐标。

有了这个函数，你可以使用鼠标事件提供的坐标从 Draw 中获取信息。

js var featureIds = Draw 。getFeatureIdsAt ( { x : 20 , y : 20 } ) ; 控制台。log ( featureIds ) //=> ['top-feature-at-20-20', 'another-feature-at-20-20']

---

getSelectedIds(): Array<string>

返回当前所选功能的功能 ID 数组。

---

getSelected(): FeatureCollection

返回当前选择的所有功能的 FeatureCollection。

---

getSelectedPoints(): FeatureCollection

返回表示当前选择的所有顶点的点的 FeatureCollection。

---

getAll(): FeatureCollection

返回所有功能的 FeatureCollection。

例子：

绘制。添加（{类型： '点' ，坐标： [ 0 ， 0 ]  } ）; 
画。添加（{类型： '点' ，坐标： [ 1 ， 1 ]  } ）; 
画。添加( { type :  'Point' ,坐标:  [ 2 ,  2 ] } ) ; 
控制台。日志（画。GETALL （））; // { // type: 'FeatureCollection', // features: [ // { // id: 'random-0' // type: 'Feature', // geometry: { // type: 'Point', / / 坐标：[0, 0] // } // }, // { // id：'random-1' // 类型：'特征'，// 几何：{ // 类型：'点'，//坐标：[1, 1] // } // }, // {




















//       id: 'random-2'
//       type: 'Feature',
//       geometry: {
//         type: 'Point',
//         coordinates: [2, 2]
//       }
//     }
//   ]
// }

---

delete(ids: string | Array<string>): draw

删除具有指定 ID 的功能。返回用于链接的绘制实例。

在direct_select模式，删除活动功能将退出该模式并恢复到simple_select模式。

例子：

js var feature = { type : 'Point' ,坐标: [ 0 , 0 ] } ; var ids =绘制。添加（功能）；画。删除（ ID ）。getAll ( ) ; // { type: 'FeatureCollection', features: [] }

---

deleteAll(): draw

删除所有功能。返回用于链接的绘制实例。

例子：

绘制。添加（{类型： '点' ，坐标： [ 0 ， 0 ]  } ）; 画。全部删除()。getAll();// { type: 'FeatureCollection', features: [] } ```---### ` set(featureCollection: FeatureCollection): Array<string> `将 Draw 的功能设置为指定 FeatureCollection 中的功能。Performs whatever delete, create, and update actions are necessary to make Draw's features match the specified FeatureCollection. Effectively, 这是一样的 ` Draw.deleteAll（）`之后` Draw.add（的FeatureCollection）`不同的是它不会影响性能的多。示例：
      
  
  





 



```js var ids = draw 。set ( {   type : 'FeatureCollection' ,   features : [ {     type : 'Feature' ,     properties : { } ,     id : 'example-id' ,    几何：{类型：'点'，坐标：[0，0]}}]}）； // ['example-id'] ```-- - ### ` trash(): draw `调用当前模式的` trash ` action 。返回平局情况下的链接。在` simple_select `模式，这将删除所有选中的功能。在` direct_select `模式， 这将删除选定的顶点。在绘图模式，这将取消绘图并恢复绘制到` simple_select `模式。如果你想删除的功能，无论的当前模式，使用`删除`或` deleteAll `功能。--- ### `combineFeatures(): draw `调用当前模式的` combineFeatures `动作。返回平局情况下的链接。在` simple_select `  模式，这结合了所有选择的特征为单个多*特性，*为长为它们都的相同的几何形状类型* 。例如：-选择是两个LineStrings=> MultiLineString -选择是一个 MultiLineString 和一个LineString=>多行字符串-选择是两个MultiLineStrings=>MULTILINESTRING调用此功能时的特征的不同的几何形状的类型被选择不会引起任何改变。例如：-选择是一个点，一个线段形式=>无采取行动-选择是MULTILINESTRING和多点=>无采取行动在`   direct_select `模式和绘制模式，则不采取任何动作。--- ### `





 
 
 
 
 
             
  










 

 uncombineFeatures(): draw `调用当前模式的` uncombineFeatures `动作。返回平局情况下的链接。在` simple_select `模式，这将每个所选多*特征成其组分特征部分，和叶非- multifeatures不变。例如：-选择是MULTILINESTRING的2份=>线段形式，线串-选择是MULTILINESTRING的3份=> LineString, LineString, LineString-选择是 MULTILINESTRING的两个部分，并且一个点=>线段形式，线段形式，点-选择是线段形式=>线段形式在

 

 





  

  

 
 
` direct_select `和绘制模式，则不采取任何动作。--- ### ` getMode(): string `返回 Draw 的当前模式。有关模式的更多信息，请参见上文。--- ### `changeMode(mode: string,选项？: Object ) : draw ` 将Draw 更改为另一种模式。返回平局实例chaining.The `模式`    参数必须是模式的品牌之一上述和枚举在

 

 
 









 

 
 
`绘制。模式` 。` simple_select ` ，` direct_select ` ，和` draw_line_string `模式接受`选项`对象。` ` ` js
 















// ` simple_select` options { // 最终选择的特征的 id 数组 featureIds : Array < string > } ``````js // `direct_select` options { // 将要选择的特征的 id直接选择（必需）   featureId : string } ``````js// `draw_line_string` options{// 继续绘制的 LineString 的 id   featureId : string ,// 继续绘制的点从：特征<点> |点|数组<数字> } ```-- - ### ` setFeatureProperty(featureId:串，属性：字符串值：任意）：绘制`设置值的要素上属性与指定的ID 。返回平局情况下的链接。这很有帮助，如果您正在使用绘图的功能，为您的主存储数据的应用程序。##活动抽奖火灾许多的事件。所有的这些事件的命名空间与`平局。`并且从Mapbox GLJS地图对象发出。所有事件都是由用户交互触发的。



  

 
  







  







  
 
  
     









 ```js 地图上（'draw.create' ，函数（ê ）{ 验证。登录（ Ë。特征）; }）；`` **如果您编程调用一个函数在绘图API ，任何事件*直接对应与*该功能不会被解雇。**例如， 如果你调用` draw.delete（）'，就不会有相应的` draw.delete `事件，因为你已经知道你已经做了。但是，可能会触发不直接对应于调用函数的后续事件。例如，如果您选择了一个功能，然后调用 `draw.changeMode(' draw_polygon')` ，您将*不会*看到` draw.modechange`event(because that directly corresponds with the invoked function) but you *will* see a `draw.selectionchange` event, since by changing the mode you indirectly deselected a feature.### `画。create `创建要素时触发。以下交互将触发此事件：-



   


   




     

 完成绘制要素。只需单击即可创建一个点。LineString 或 Polygon 仅在用户完成绘制时创建——即双击最后一个顶点或按 Enter——并且绘制的特征有效。事件数据是一个具有以下形状的对象：``







 `  js { // 表示创建的  特征的 GeoJSON 对象数组features : Array < Object > } ```### `draw.delete`Fired when one or more features are deleted. The following interactions will trigger this event:-当一个或多个特征被选择点击垃圾桶按钮在 ` simple_select `模式。-击中<KBD>退格</KBD>或<KBD>删除

  








       < / KBD >当一个或特征被选择的键在` simple_select `模式。-调用` draw.trash（）`当你有一个特点，选择在` simple_select ` 模式。所述事件数据是一个对象与以下形状： ```的js { //以GeoJSON的对象Array表示被删除的特征  的特征：阵列<特征> } ```### `draw.combine`Fired when features are combined. The following interactions will trigger this event:- Click the Combine button when more than one features are selected in`simple_select` mode.
 






  








 
-调用` draw.combineFeatures（）`当多于一个的特征被选择在 ` simple_select `模式。所述事件数据是一个对象与以下形状： ```JS {   deletedFeatures ：阵列<特征> ，//删除的特征（这些并入新multifeatures）阵列  createdFeatures ：阵列<特征> //数组创建multifeatures的} ` ``





 
 



### `draw.uncombine`

Fired when features are uncombined. The following interactions will trigger this event:

- Click the Uncombine button when one or more multifeatures are selected in `simple_select` mode. Non-multifeatures may also be selected.
- Invoke `draw.uncombineFeatures()` when one or more multifeatures are selected in `simple_select` mode. Non-multifeatures may also be selected.

The event data is an object with the following shape:

```js
{
  deletedFeatures: Array<Object>, // Array of deleted multifeatures (split into features)
  createdFeatures: Array<Object> // Array of created features
}

draw.update

当一项或多项功能更新时触发。下面的互动将触发该事件，这可以通过子分类动作：

• action: 'move' -在simple_select模式下完成一个或多个选定特征的移动。该事件只会在移动完成时触发（即当用户释放鼠标按钮或点击< kbd > Enter </ kbd > 时）。- action: 'change_coordinates' -在direct_select模式下完成选定特征的一个或多个顶点的移动。该事件只会在移动完成时触发（即当用户释放鼠标按钮或点击< kbd >

输入</ kbd >，否则她的鼠标会离开地图容器）。 -在direct_select模式下删除所选特征的一个或多个顶点，这可以通过点击< kbd > Backspace </ kbd >或< kbd > Delete </ kbd >键、单击垃圾箱按钮或调用draw.trash()。 -通过在“ direct_select ”模式下单击该要素上的中点，将顶点添加到所选要素。

当创建或删除功能时，此事件将不会触发。要跟踪这些互动，听draw.create和draw.delete事件。

事件数据是一个具有以下形状的对象：

js { features : Array < Feature > , // 被更新的特征数组 action : string // 触发更新的动作名称}

draw.selectionchange

在更改选择时触发（即选择或取消选择一个或多个功能）。以下交互将触发此事件：

• Click on a feature to select it.
• When a feature is already selected, shift-click on another feature to add it to the selection.
• Click on a vertex to select it.
• When a vertex is already selected, shift-click on another vertex to add it to the selection.
• Create a box-selection that includes at least one feature.
• Click outside the selected feature(s) to deselect.
• Click away from the selected vertex(s) to deselect.
• Finish drawing a feature (features are selected just after they are created).
• When a feature is already selected, invoke draw.changeMode()从而取消选择该功能。-使用draw.changeMode('simple_select', { featureIds: [..] })切换到simple_select模式并立即选择指定的特征。-使用draw.delete，draw.deleteAll或draw.trash删除功能（S）。

事件数据是一个具有以下形状的对象：

js { features : Array < Feature > // 改变后选择的特性数组}

draw.modechange

模式改变时触发。以下交互将触发此事件：

-单击点、线或多边形按钮开始绘制（进入draw_*模式）。-完成绘制特征（进入simple_select模式）。-在simple_select模式下，单击已选择的功能（进入direct_select模式）。-在direct_select模式下，在所有特征之外单击（进入simple_select模式）。

此事件在当前模式停止之后和下一个模式开始之前触发。的呈现将不会发生，直到所有的事件处理程序被触发后，这样你就可以通过调用强制模式重定向draw.changeMode（）一个内部draw.modechange处理程序。

事件数据是一个具有以下形状的对象：

js { mode : string // 下一个模式，即 Draw 正在改变的模式}

simple_select和direct_select模式，可以根据选择特定于该模式（见上文）来发起。

draw.render

在 Draw在 Mapbox GL JS 地图上调用setData()之后触发。这并不意味着 set data 调用已完成更新地图，只是地图正在更新。

draw.actionable

当 Draw 的状态改变以启用和禁用不同的动作时触发。跟随这个事件会让你知道draw.trash()、draw.combineFeatures()和draw.uncombineFeatures()是否会起作用。

JS { 行动：{ 垃圾：真 combineFeatures ：假的， uncombineFeatures ：假} }

##造型画

Draw 使用符合 Mapbox GL 样式规范的地图样式，但有一些注意事项。

来源

GL 样式规范要求每一层都有一个源。但是，**在设置 Draw 样式时不提供源 **。

Draw 在源之间移动特征以微调性能。因此，**Draw 会自动为您提供一个源 **。

该源 s表示绘制提供名为mapbox-GL-绘制热和` mapbox-GL-得出冷’。

身份证

GL 样式规范也需要一个 id。**您必须提供一个 id **。然后 Draw 会将后缀.hot和.cold 添加到您的 id 中。

在您的自定义样式中，您将需要使用以下功能属性：

物业| 价值观| 功能— | — | —元| 特征、中点、顶点| 中点和顶点用于添加到地图的点，以传达多边形和线句柄。功能用于所有功能。活跃| 真，假| 在当前模式下“选择”某个功能时，该功能处于活动状态。true和false是字符串。模式|

simple_select、direct_select、draw_point、draw_line_string、draw_polygon | 指示 Draw 当前处于哪种模式。

Draw 还提供了一些关于特征的更多属性，但它们不应用于样式。有关它们的详细信息，请参阅“使用战平Mapbox GL JS的queryRenderedFeatures ”下面。

如果opts.userProperties '设置为'真'的特征的属性也将可用于造型。所有的用户属性前缀用户_ `以确保它们不会与绘图性能发生冲突。

###示例自定义样式

有关自定义样式的示例，请参阅 EXAMPLES.md 。

##使用战平Mapbox GL JS的queryRenderedFeatures

物业| 价值观| 功能— | — | —身份证| 字符串| 仅当meta为feature parent |时可用 字符串| 仅当meta不是feature coord_path |时可用 字符串| 一个。到父坐标lon 中一个 [lon, lat] 实体的分隔路径| number |句柄的经度值。仅当’元’是

中点。纬度| 数量| 句柄的纬度值。仅当’元’是中点。