PolygonDrawAction

function enableCreatePolygon(draw, view) {
  let action = draw.create("polygon");

  // PolygonDrawAction.vertex-add
  // 当用户点击或按下“F”键时触发。
  // 也可以在按下“R”键重做时触发。
  action.on("vertex-add", function (evt) {
    createPolygonGraphic(evt.vertices);
  });

  // PolygonDrawAction.vertex-remove
  // 当按下“Z”键撤消最后添加的顶点时触发
  action.on("vertex-remove", function (evt) {
    createPolygonGraphic(evt.vertices);
  });

  // 当指针在视图上移动时触发
  action.on("cursor-update", function (evt) {
    createPolygonGraphic(evt.vertices);
  });

  // 添加一个表示完成的多边形的图形
  // 当用户双击视图或按下“C”键时
  action.on("draw-complete", function (evt) {
    createPolygonGraphic(evt.vertices);
  });
}

function createPolygonGraphic(vertices){
  view.graphics.removeAll();
  let polygon = {
    type: "polygon", // 转换成 Polygon
    rings: vertices,
    spatialReference: view.spatialReference
  };

  let graphic = new Graphic({
    geometry: polygon,
    symbol: {
      type: "simple-fill", // 转换成 SimpleFillSymbol
      color: "purple",
      style: "solid",
      outline: {  // 转换成 SimpleLineSymbol
        color: "white",
        width: 1
      }
    }
  });
  view.graphics.add(graphic);
}

属性列表

属性详细说明

declaredClass Stringreadonly inherited

起始版本: GeoScene API for JavaScript 4.22

类名。类的名称声明格式为 geoscene.folder.className。

hasZ Boolean inherited

控制创建的几何图形是否具有 z 坐标。

默认值:true

mode String

起始版本: GeoScene API for JavaScript 4.22

绘图模式。 它仅在首次创建操作时才相关。 它的值在操作生命周期内不能更改。

可选值

值	描述
hybrid	在单击或拖动指针时添加顶点。
freehand	在拖动指针时添加顶点。
click	单击指针时添加顶点。

可选值:"hybrid"|"freehand"|"click"

默认值:hybrid

示例代码:

draw.create("polygon", {mode: "freehand"});

vertices Number[][]readonly inherited

数字的二维数组，表示组成正在绘制的几何图形的每个顶点的坐标。

view MapView inherited

对 MapView 的引用。

方法列表

方法详细说明

canRedo(){Boolean}inherited

指示是否可以在操作实例上调用 redo() 方法。

返回值:

类型	描述
Boolean	如果 redo() 可以被调用，将会返回 true。

canUndo(){Boolean}inherited

指示是否可以在操作实例上调用 undo() 方法。

返回值:

类型	描述
Boolean	如果 undo() 可以被调用，将会返回 true。

complete()

完成绘制多边形几何并触发 draw-complete 事件。如果绘图逻辑需要通过双击或按“C”键以外的方式完成，则调用此方法。

emit(type, event){Boolean}inherited

在实例上触发事件。仅当创建此类的子类时才应使用此方法。

参数:

type String 事件名称

event Object optional 事件负载。

返回值:

类型	描述
Boolean	如果侦听器收到通知,则为true

getCoordsAndPointFromScreenPoint(screenPoint){FromScreenPointResult|null}inherited

将给定的屏幕点映射到地图点。

参数:

screenPoint ScreenPoint 屏幕上的位置。

返回值:

类型	描述
FromScreenPointResult | null	包含的结果对象，如果无法映射屏幕点，则返回 null。

getCoordsFromScreenPoint(screenPoint){Number[]|null}inherited

将给定的屏幕点映射到地图点。

参数:

screenPoint ScreenPoint 屏幕上的位置。

返回值:

类型	描述
Number[] | null	与给定屏幕点关联的点的 x、y 和 z 分量数组（如果启用了 hasZ），如果无法映射屏幕点，则为 null。

getGeometryZValue()

返回绘制几何图形时要使用的实际 z 值。 注意：this.defaultZ 是传递给 DrawAction 的构造函数的值，实际的 defaultZ 值可能会有所不同，具体取决于派生的绘制动作实现。

hasEventListener(type){Boolean}inherited

指示实例上是否存在与提供的事件名称匹配的事件侦听器。

参数:

type String 事件名称

返回值:

类型	描述
Boolean	如果类支持输入事件，则返回 true。

on(type, listener){Object}inherited

在实例上注册事件处理程序。调用此方法将事件与侦听器挂钩

参数:

type String|String[] 要监听的event 或者事件数组

listener Function 事件触发时要调用的函数

返回值:

类型	描述
Object	返回一个remove() 方法的事件处理程序，该方法用以停止侦听事件。 属性 类型 描述 remove Function 当被调用时，从事件中移除监听器。

示例代码:

view.on("click", function(event){
  // event是事件触发后返回的事件句柄。
  console.log(event.mapPoint);
});

redo()inherited

增量重做堆栈中记录的操作。在调用此方法之前调用 canRedo() 以检查是否可以在操作实例上调用此方法。 调用此方法将触发 vertex-add 或 vertex-remove 事件，具体取决于最后一个操作。

示例代码:

if (action.canRedo()) {
  action.redo();
}

screenToMap(screenPoint){Point|null}inherited

将给定的屏幕点映射到地图点。

参数:

screenPoint ScreenPoint 屏幕上的位置。

返回值:

类型	描述
Point | null	MapPoint 与给定的屏幕点关联，如果屏幕点无法映射，则为 null。

undo()inherited

逐步撤消堆栈中记录的操作。 在调用此方法之前调用 canUndo() 以检查是否可以在操作实例上调用此方法。 调用此方法将触发 vertex-add 或 vertex-remove 事件，具体取决于最后一个操作。

示例代码:

if (action.canUndo()) {
  action.undo();
}

Event Overview

{vertices: Number[][],vertexIndex: Number,preventDefault: Function,defaultPrevented: Boolean,type: "cursor-update"}

{vertices: Number[][],preventDefault: Function,defaultPrevented: Boolean,type: "draw-complete"}

{vertices: Number[][],vertexIndex: Number,preventDefault: Function,defaultPrevented: Boolean,type: String}

{vertices: Number[][],vertexIndex: Number,preventDefault: Function,defaultPrevented: Boolean,type: String}

{vertices: Number[][],vertexIndex: Number,preventDefault: Function,defaultPrevented: Boolean,type: "vertex-add"}

{vertices: Number[][],vertexIndex: Number,preventDefault: Function,defaultPrevented: Boolean,type: "vertex-remove"}

Event Details

cursor-update

指针在视图上移动后触发。

属性:

vertices Number[][] 表示视图空间参考中的 x,y 坐标对的数字数组。

vertexIndex Number 添加到顶点数组的最后一个顶点的索引。

preventDefault Function 防止事件传播在事件链上冒泡。

defaultPrevented Boolean 在调用 preventDefault() 时设置为 true。

type String 事件类型 该值通常是 "cursor-update".

示例代码:

// 监听 PolygonDrawAction.cursor-update
// 在用户移动指针时在视图上
// 向用户提供视觉反馈。
action.on("cursor-update", function (evt) {
  view.graphics.removeAll();
  let polygon = new Polygon({
    rings: evt.vertices,
    spatialReference: view.spatialReference
  });
  graphic = createGraphic(polygon);
  view.graphics.add(graphic);
});

draw-complete

在用户完成多边形绘制后触发。

属性:

vertices Number[][] 表示视图空间参考中的 x,y 坐标对的数字数组。

preventDefault Function 防止事件传播在事件链上冒泡。

defaultPrevented Boolean 在调用 preventDefault() 时设置为 true。

type String 事件类型 该值通常是 "draw-complete".

示例代码:

// 监听 PolygonDrawAction.draw-complete
// 将表示完成的多边形的图形
// 添加到视图中
action.on("draw-complete", function (evt) {
  view.graphics.removeAll();
  let polygon = new Polygon({
    rings: evt.vertices,
    spatialReference: view.spatialReference
  });
  graphic = createGraphic(polygon);
  view.graphics.add(graphic);
});

redo

起始版本: GeoScene API for JavaScript 4.22

在响应重做操作或调用 redo() 时触发。

属性:

vertices Number[][] 二维数字数组，表示构成几何的每个顶点的坐标。

vertexIndex Number 应用 redo 的顶点的索引。

preventDefault Function 防止事件传播在事件链上冒泡。

defaultPrevented Boolean 在调用 preventDefault() 时设置为 true。

type String 事件的类型。 对于此事件，重做的事件类型。 例如，如果由于 redo 而添加了顶点，则类型将是 vertex-add 。

示例代码:

// 更新视图上的图形，因为最后一个操作被重做
action.on("redo", function (evt) {
  view.graphics.removeAll();
  let polygon = new Polygon({
    rings: evt.vertices,
    spatialReference: view.spatialReference
  });
  graphic = createGraphic(polygon);
  view.graphics.add(graphic);
});

undo

起始版本: GeoScene API for JavaScript 4.22

在响应撤消操作或调用 undo() 时触发。

属性:

vertices Number[][] 二维数字数组，表示构成几何的每个顶点的坐标。

vertexIndex Number 应用 undo 的顶点的索引。

preventDefault Function 防止事件传播在事件链上冒泡。

defaultPrevented Boolean 在调用 preventDefault() 时设置为 true。

type String 事件的类型。对于此事件，请键入已撤消的事件。 例如，如果顶点由于 undo 而被删除，则类型将是 vertex-remove 。

示例代码:

// 更新视图上的图形，因为最后一个操作被撤消
action.on("undo", function (evt) {
  view.graphics.removeAll();
  let polygon = new Polygon({
    rings: evt.vertices,
    spatialReference: view.spatialReference
  });
  graphic = createGraphic(polygon);
  view.graphics.add(graphic);
});

vertex-add

添加顶点时触发。

属性:

vertices Number[][] 一个二维数字数组，表示构成几何的每个顶点的坐标。

vertexIndex Number 添加到顶点数组的最后一个顶点的索引。

preventDefault Function 防止事件传播在事件链上冒泡。

defaultPrevented Boolean 在调用 preventDefault() 时设置为 true。

type String 事件类型 该值通常是 "vertex-add".

示例代码:

// 监听 PolygonDrawAction.vertex-add
// 在用户移动指针时在视图上
// 向用户提供视觉反馈。
action.on("vertex-add", function (evt) {
  view.graphics.removeAll();
  let polygon = new Polygon({
    rings: evt.vertices,
    spatialReference: view.spatialReference
  });
  graphic = createGraphic(polygon);
  view.graphics.add(graphic);
});

vertex-remove

移除顶点时触发。

属性:

vertices Number[][] 一个二维数字数组，表示构成几何的每个顶点的坐标。

vertexIndex Number 从顶点数组中移除的顶点的索引。

preventDefault Function 防止事件传播在事件链上冒泡。

defaultPrevented Boolean 在调用 preventDefault() 时设置为 true。

type String 事件类型 该值通常是 "vertex-remove".

示例代码:

// 监听 PolygonDrawAction.vertex-remove
// 在用户移动指针时在视图上
// 向用户提供视觉反馈。
action.on("vertex-remove", function (evt) {
  view.graphics.removeAll();
  let polygon = new Polygon({
    rings: evt.vertices,
    spatialReference: view.spatialReference
  });
  graphic = createGraphic(polygon);
  view.graphics.add(graphic);
});