Draw 类为开发人员提供了高级绘图功能，你可以完全控制创建不同的临时几何形状。例如，如果你想阻止用户绘制带有自相交线或重叠多边形的图形，那么你可以使用这个类来实现这些规则。绘制体验是建立在绘制动作之上的，绘制动作使用视图事件来生成一组坐标来创建新的几何图形。 每个几何类型都有一个对应的绘制动作类。
这个类提供了一个简单的接口来与绘制动作进行交互。 初始化 Draw 实例后，您可以调用 create() 以返回对相关绘图操作的引用。 然后可以使用此绘制操作来创建指定类型的新几何图形。
下表描述了用于绘制点、折线和多边形的指针和键盘手势。
绘制点
| 手势 | 操作 |
|---|---|
| 左键点击 | 在指针位置添加一个点。 |
| Enter | 在指针位置添加一个点。 |
绘制折线和多边形
| 手势 | 操作 |
|---|---|
| 左键单击 | 在指针位置添加一个顶点。 |
| 左键拖动 |
为每个指针移动添加一个顶点。 |
| Enter | 完成折线或多边形。 |
| F | 向折线或多边形添加一个顶点。 |
| Z | 逐步撤消堆栈中记录的操作。 |
| R | 增量重做堆栈中记录的操作。 |
要为用户提供更简单的绘图体验，请使用 SketchViewModel 类。
示例代码:
// 创建一个新的 draw 实例
let draw = new Draw({
view: view
});
// 创建一个绘制折线动作的实例
// 折线顶点只会在鼠标点击
// 视图时添加
let action = draw.create("polyline", {mode: "click"});
// 添加顶点时触发
action.on("vertex-add", function (evt) {
measureLine(evt.vertices);
});
// 当指针移动时触发
action.on("cursor-update", function (evt) {
measureLine(evt.vertices);
});
// 绘制完成时触发
action.on("draw-complete", function (evt) {
measureLine(evt.vertices);
});
// 当顶点被移除时触发
action.on("vertex-remove", function (evt) {
measureLine(evt.vertices);
});
function measureLine(vertices) {
view.graphics.removeAll();
let line = createLine(vertices);
let lineLength = geometryEngine.geodesicLength(line, "miles");
let graphic = createGraphic(line);
view.graphics.add(graphic);
}
function createLine(vertices) {
let polyline = {
type: "polyline", // 转换成 new Polyline()
paths: vertices,
spatialReference: view.spatialReference
}
return polyline;
}构造函数
属性列表
可以设置、检索或监听的属性。参见 使用属性。
| 属性 | 类型 | 描述 | 类 | |
|---|---|---|---|---|
| DrawAction | 更多信息 对正在运作的 draw action 的引用. | 更多信息 | Draw | |
| String | 更多信息 类名。 | 更多信息 | Accessor | |
| MapView | 更多信息 对 MapView 的引用。 | 更多信息 | Draw |
属性详细说明
-
activeAction DrawAction
-
对正在运作的 draw action 的引用。 调用 create() 方法时会创建一个绘制动作的实例。
-
起始版本: GeoScene API for JavaScript 4.22
-
类名。类的名称声明格式为
geoscene.folder.className。
方法列表
| 属性 | 返回值类型 | 描述 | 类 | |
|---|---|---|---|---|
| 更多信息 完成当前活动图形。 | 更多信息 | Draw | ||
| DrawAction | 更多信息 创建请求的绘制动作的实例。 | 更多信息 | Draw | |
| 更多信息 通过清除活动动作来重置绘图。 | 更多信息 | Draw |
方法详细说明
-
complete()起始版本: GeoScene API for JavaScript 4.22
-
完成当前活动图形。
-
create(drawAction, drawOptions){DrawAction}
-
创建请求的绘制动作的实例。
参数:drawAction String要创建的 draw action 的名称。 有关它创建的可能值和绘制动作类型的列表，请参见下表。
可选值
Geometry 类型 绘制动作实例
point PointDrawAction multipoint MultipointDrawAction (仅支持 MapView) polyline PolylineDrawAction polygon PolygonDrawAction rectangle, circle, ellipse SegmentDrawAction 可选值:"point"|"multipoint"|"polyline"|"polygon"|"rectangle"|"circle"|"ellipse"
drawOptions Objectoptional要创建的几何图形选项的对象。
规范:mode Stringoptional绘图模式。 绘图模式仅在创建
polygon、polyline、segment绘制动作时适用。可选值
值 描述 hybrid 单击或拖动指针时会添加顶点。 适用于 polygon和polyline绘制动作，并且是默认设置。freehand 拖动指针时添加顶点。 适用于 polygon,polyline和segment绘制动作。segment绘制动作的默认值。click 单击指针时添加顶点。 可选值:"hybrid"|"freehand"|"click"
返回值:类型 描述 DrawAction 返回请求的绘制动作的实例。 示例代码:let pointAction = draw.create("point");
-
reset()起始版本: GeoScene API for JavaScript 4.22
-
通过清除活动动作来重置绘图。