模式

在 Mapmost Draw 中， modes 用于将一组用户交互行为组合成一个行为。在内部，Draw 有 draw_polygon 模式，用于控制绘制多边形的一系列交互。Draw 还有 simple_select 模式，用于控制在选择零个、一个或多个要素时的交互，包括当用户的交互暗示他们希望对单个要素进行详细编辑时，切换到 direct_select 模式。

为了帮助开发人员更好地控制其基于 Mapmost Draw 的应用程序，Draw 提供了一个编写和连接自定义模式的接口。

自定义绘制模式

我们将创建一个名为 LotsOfPointsMode 的自定义模式。激活后，此模式将在用户每次单击地图时创建一个新点，并在用户按 esc 键时转换为默认模式。

案例

var LotsOfPointsMode = {};

// 模式启动时调用这个函数。
// `opts`参数来自`draw.changeMode('lotsofpoints', {count:7})`。
// 返回值应该是一个对象并将传递给所有其他生命周期函数。
LotsOfPointsMode.onSetup = function(opts) {
  var state = {};
  state.count = opts.count || 0;
  return state;
};

// 当用户点击地图时，Draw将调用`onClick`
LotsOfPointsMode.onClick = function(state, e) {
  // `this.newFeature`接受geojson并生成一个DrawFeature
  var point = this.newFeature({
    type: 'Feature',
    properties: {
      count: state.count
    },
    geometry: {
      type: 'Point',
      coordinates: [e.lngLat.lng, e.lngLat.lat]
    }
  });
  this.addFeature(point); // 将点放置到地图上
};

// 当用户点击地图上的一个按键时，它将被发送到这里
LotsOfPointsMode.onKeyUp = function(state, e) {
  if (e.keyCode === 27) return this.changeMode('simple_select');
};

// 这是一个模式唯一需要的函数
// 它决定了哪个当前在Draw的数据存储中的特征将被渲染到地图上。
// 所有传递给`display`的特征将被渲染，所以你可以传递多个显示内部特征的特征。
// 在`API.md`中查找`styling-draw`在显示功能方面的建议。
LotsOfPointsMode.toDisplayFeatures = function(state, geojson, display) {
  display(geojson);
};

// 添加新绘制模式到MapmostDraw对象中
var draw = new MapmostDraw({
  defaultMode: 'lots_of_points',
  // 将LotsOfPointsMode添加到内置模式集
  modes: Object.assign({
    lots_of_points: LotsOfPointsMode,
  }, MapmostDraw.modes),
});

有关如何处理地图交互的详细信息，请参阅下方的 生命周期函数 。有关如何与 Draw 的内部状态交互的更多信息，请参阅下方的 设置与获取 。

可直接使用的绘制模式

请随时通过 PR 将您自己的模式添加到此列表中

• Static Mode: 关闭交互功能
• Cut/Split Line Mode: 切割/分割线要素功能
• Freehand Mode: 在绘制多边形模式下添加自由绘制功能
• Rotate Mode: 添加旋转 GL Draw 要素功能
• Radius Mode: 根据中心顶点和半径线绘制一个多边形圆
• Rectangle Mode
• Circle Mode
• Assisted Rectangle Mode
• Rotate/Scale Rectangle Mode
• Rectangle Restrict Area Mode: 绘制具有限定区域的矩形
• Geodesic Modes: 绘制测地线、多边形和圆形
• Cut/Split Line Mode: 使用线要素、点要素或多边形要素切割/分割 linestrings/Multilinestrings
• Cut Polygon Mode: 使用多边形要素切割 polygons/Multipolygons
• Split Polygon Mode: 使用线要素切割 polygons/Multipolygons
• Scale/Rotate Mode: 缩放和旋转多边形和线要素
• Waypoint Mode: 允许用户仅拖动顶点，防止拖动要素
• Bezier Curve Mode: 绘制和编辑贝塞尔曲线

生命周期函数

MODE.onClick

单击鼠标时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。
e	Object	必填触发此生命周期事件的捕获事件。

MODE.onCombineFeature

调用 draw.combineFeatures() 时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。

MODE.onDrag

当在地图上检测到拖动事件时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。
e	Object	必填触发此生命周期事件的捕获事件。

MODE.onKeyDown

当检测到按键按下事件时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。
e	Object	必填触发此生命周期事件的捕获事件。

MODE.onKeyUp

当检测到按键释放事件时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。
e	Object	必填触发此生命周期事件的捕获事件。

MODE.onMouseDown

当鼠标按钮按下时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。
e	Object	必填触发此生命周期事件的捕获事件。

MODE.onMouseMove

当鼠标移动时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。
e	Object	必填触发此生命周期事件的捕获事件。

MODE.onMouseOut

鼠标离开地图容器时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。
e	Object	必填触发此生命周期事件的捕获事件。

MODE.onMouseUp

当鼠标按钮释放时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。
e	Object	必填触发此生命周期事件的捕获事件。

MODE.onSetup

在模式过渡期间触发。

参数

名称	类型	描述
opts	Object	必填通过 "draw.changeMode(mode, opts)" 传递的对象。

返回 Object ，该对象将会被传递给所有其他生命周期函数。

MODE.onStop

在退出模式时触发，用于清理残留物，例如无效要素等。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。

MODE.onTap

当快速点击地图时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。
e	Object	必填触发此生命周期事件的捕获事件。

MODE.onTouchEnd

当将手指从地图上移开时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。
e	Object	必填触发此生命周期事件的捕获事件。

MODE.onTouchMove

当在移动设备上用手指拖动时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。
e	Object	必填触发此生命周期事件的捕获事件。

MODE.onTouchStart

当触摸事件开始时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。
e	Object	必填触发此生命周期事件的捕获事件。

MODE.onTrash

当调用 draw.trash() 时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。

MODE.onUncombineFeature

当调用draw.uncombineFeatures() 时触发。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。

MODE.toDisplayFeatures

在渲染时，对每个要素触发，将原始要素转换为在地图上显示的要素集。

有关Draw在渲染中使用的GeoJSON属性的详细信息，请参阅API文档中的 绘制样式 获取完整的样式参考。

参数

名称	类型	描述
state	Object	必填由 onSetup 创建的一个可变状态对象。
geojson	Object	必填GeoJSON对象。需要将其传递给 "display" 函数进行渲染。
display	Function	必填所有传递给此函数的GeoJSON对象都将被渲染到地图上。

设置与获取

clearSelectedCoordinates

清除所有选定的坐标。

clearSelectedFeatures

清除所有选定的要素。

this.activateUIButton

如果提供了一个名称，它会使该按钮处于激活状态，否则会使所有按钮都处于非激活状态。

参数

名称	类型	描述
name	String	必填要激活的按钮名称，设置 "undefined" 将使按钮处于非激活状态。

this.addFeature

添加一个 DrawFeature。请参阅 this.newFeature 将 GeoJSON 转换为 DrawFeature 。

参数

名称	类型	描述
feature	DrawFeature	必填要添加的要素。

this.changeMode

触发模式更改。

参数

名称	类型	默认值	描述
mode	String		必填要设置的模式。
opts	Object	{}	可选传递给新模式的选项对象。
eventOpts	Object	{}	可选用于控制发出的事件类型。

this.delete

从选定状态中移除一个要素。

参数

名称	类型	描述
id	String	必填要素的 id。

this.deleteFeature

移除一个要素。

参数

名称	类型	默认值	描述
id	String		必填要素的 id。
opts	Object	{}	可选要素属性。

this.doRender

强制绘图工具重新渲染指定ID对应的要素。

参数

名称	类型	描述
id	String	必填要素的 id。

this.featuresAt

获取事件对象位置或边界框内的要素。

参数

名称	类型	默认值	描述
event	Function		必填事件对象。
bbox	Array		必填边界范围。
bufferType	String	click	可选click或者tap事件。

this.getFeature

通过 ID 获取 DrawFeature，返回 DrawFeature 。

参数

名称	类型	描述
id	String	必填要素的 id。

this.getSelected

将所有选定的要素作为DrawFeature获取，返回 Array[DrawFeature]

this.getSelectedIds

获取当前所有选定要素的ID，返回 Array[String]

this.isInstanceOf

检查一个对象是否是 DrawFeature 实例，返回布尔值。

参数

名称	类型	描述
type	String	必填可以选择"Point", "LineString", "Polygon", "MultiFeature"类型。
feature	Object	必填需要检查的要素。

this.isSelected

检查一个要素是否被选中，返回布尔值。

参数

名称	类型	描述
id	String	必填要素的 id。

this.newFeature

从GeoJSON创建一个新的 DrawFeature，返回 DrawFeature 。

参数

名称	类型	描述
geojson	GeoJSONFeature	必填GeoJSON要素。

this.select

将要素添加到绘图工具内部的选定状态中。

参数

名称	类型	描述
id	String	必填要素的 id。

this.setActionableState

指示您的模式当前是否可以执行不同的操作。请参阅 draw.actionalbe 以获取可能的操作列表。所有未定义的操作默认设置为false。

参数

名称	类型	默认值	描述
actions	Object	{}	必填操作对象。

this.setSelected

设置绘图工具的内部选择状态。

参数

名称	类型	描述
features		必填要素。
null-null	Array	必填选择的 DrawFeature。

this.setSelectedCoordinates

设置绘图工具的内部选择坐标状态。

参数

名称	类型	描述
coords	Array	必填形如{coord_path: "string", feature_id: "string"}

this.updateUIClasses

更新绘图地图类的状态。

参数

名称	类型	描述
opts	Object	必填要更新的状态对象。