PolylineDrawAction

function enableCreatePolyline(draw, view) {
  let action = draw.create("polyline");

  // listen to PolylineDrawAction.vertex-add
  // Fires when the user clicks, or presses the "F" key
  // Can also fire when the "R" key is pressed to redo.
  action.on("vertex-add", function (evt) {
    createPolylineGraphic(evt.vertices);
  });

  // listen to PolylineDrawAction.vertex-remove
  // Fires when the "Z" key is pressed to undo the
  // last added vertex
  action.on("vertex-remove", function (evt) {
    createPolylineGraphic(evt.vertices);
  });

  // listen to PolylineDrawAction.cursor-update
  // fires when the pointer moves over the view
  action.on("cursor-update", function (evt) {
    createPolylineGraphic(evt.vertices);
  });

  // listen to PolylineDrawAction.draw-complete
  // event to create a graphic when user double-clicks
  // on the view or presses the "C" key
  action.on("draw-complete", function (evt) {
    createPolylineGraphic(evt.vertices);
  });
}

function createPolylineGraphic(vertices){
  view.graphics.removeAll();
  let polyline = {
    type: "polyline", // autocasts as Polyline
    paths: vertices,
    spatialReference: view.spatialReference
  };

  let graphic = new Graphic({
    geometry: polyline,
    symbol: {
      type: "simple-line", // autocasts as SimpleLineSymbol
      color: [4, 90, 141],
      width: 3,
      cap: "round",
      join: "round"
    }
 });
 view.graphic.add(graphic);
}

属性概述

属性详细信息

declaredClass Stringreadonly inherited

起始版本：GeoScene Maps SDK for JavaScript 4.7

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

hasZ Boolean inherited

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

默认值：true

mode String

起始版本：GeoScene Maps SDK for JavaScript 4.7

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

可能值

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

可能值："hybrid"|"freehand"|"click"

默认值：hybrid

示例

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

vertices Number[][]readonly inherited

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

view MapView inherited

对 MapView 的引用。

方法概述

方法详细说明

addHandles(handleOrHandles, groupKey)inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

添加一个或多个与对象的生命周期相关联的句柄。当对象被销毁时，将移除句柄。

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

// Handle gets removed when the object is destroyed.
this.addHandles(handle);

参数

handleOrHandles WatchHandle|WatchHandle[] 对象销毁后，标记为要移除的句柄。

groupKey * optional 标识句柄应添加到的组的键。组中的所有句柄稍后都可使用 Accessor.removeHandles() 进行删除。如果未提供键，则句柄将被添加到默认组。

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。

hasEventListener(type){Boolean}inherited

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

参数

type String 事件的名称。

返回

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

hasHandles(groupKey){Boolean}inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

如果存在指定的句柄组，则返回 true。

参数

groupKey * optional 组键。

返回

类型	描述
Boolean	如果存在指定的句柄组，则返回 true。

示例

// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}

on(type, listener){Object}inherited

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

参数

type String|String[] 要侦听的事件或者事件数组。

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

返回

类型	描述
Object	返回具有 remove() 方法的事件处理程序，可调用该方法来停止侦听事件。 属性 类型 描述 remove Function 调用时，从事件中移除侦听器。

示例

view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});

redo()inherited

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

示例

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

removeHandles(groupKey)inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

移除对象拥有的句柄组。

参数

groupKey * optional 要移除的组键或组键的数组或集合。

示例

obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");

screenToMap(screenPoint){Point|null}inherited

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

参数

screenPoint ScreenPoint 屏幕上的位置。

返回

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

undo()inherited

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

示例

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

事件概述

事件详细说明

cursor-update

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

属性

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

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

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

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

type String 事件的类型。 值通常是 "cursor-update"。

示例

// Give a visual feedback to the user as the pointer moves on the view.
action.on("cursor-update", function (evt) {
  view.graphics.removeAll();
  let polyline = new Polyline({
    paths: evt.vertices,
    spatialReference: view.spatialReference
  });
  let graphic = createGraphic(polyline);
  view.graphics.add(graphic);
});

draw-complete

在用户完成折线绘制后触发。

属性

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

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

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

type String 事件的类型。 值总是 "draw-complete"。

示例

// listen to PolylineDrawAction.draw-complete
// add the graphic representing the completed
// polyline to the view
action.on("draw-complete", function (evt) {
  removeGraphic(graphic);
  let polyline = new Polyline({
    paths: evt.vertices,
    spatialReference: view.spatialReference
  });
  graphic = createGraphic(polyline);
  view.graphics.add(graphic);
});

redo

起始版本：GeoScene Maps SDK for JavaScript 4.7

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

属性

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

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

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

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

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

示例

// Update the graphic on the view as the last action was redone
action.on("redo", function (evt) {
  view.graphics.removeAll();
  let polyline = new Polyline({
    paths: evt.vertices,
    spatialReference: view.spatialReference
  });
  let graphic = createGraphic(polyline);
  view.graphics.add(graphic);
});

undo

起始版本：GeoScene Maps SDK for JavaScript 4.7

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

属性

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

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

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

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

type String 事件的类型。对于此事件，则为撤销的事件类型。例如，如果顶点是作为 undo 的结果而移除的，则类型将是 vertex-remove。

示例

// Update the graphic on the view as the last action was undone
action.on("undo", function (evt) {
  view.graphics.removeAll();
  let polyline = new Polyline({
    paths: evt.vertices,
    spatialReference: view.spatialReference
  });
  let graphic = createGraphic(polyline);
  view.graphics.add(graphic);
});

vertex-add

添加顶点时触发。

属性

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

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

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

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

type String 事件的类型。 值总是 "vertex-add"。

示例

// fires when a vertex is added.
action.on("vertex-add", function (evt) {
  view.graphics.removeAll();
  let polyline = new Polyline({
    paths: evt.vertices,
    spatialReference: view.spatialReference
  });
  let graphic = createGraphic(polyline);
  view.graphics.add(graphic);
});

vertex-remove

移除顶点时触发。

属性

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

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

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

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

type String 事件的类型。 值总是 "vertex-remove"。

示例

// Update the graphic on the view as vertex is removed
action.on("vertex-remove", function (evt) {
  view.graphics.removeAll();
  let polyline = new Polyline({
    paths: evt.vertices,
    spatialReference: view.spatialReference
  });
  let graphic = createGraphic(polyline);
  view.graphics.add(graphic);
});