当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


JavaScript esri/views/draw/Draw用法及代码示例


基本信息

以下是所在类或对象的基本信息。

AMD: require(["esri/views/draw/Draw"], (Draw) => { /* code goes here */ });

ESM: import Draw from "@arcgis/core/views/draw/Draw";

类: esri/views/draw/Draw

继承: Draw > Accessor

自从:用于 JavaScript 4.5 的 ArcGIS API

用法说明

Draw 类为需要完全控制创建具有不同几何形状的临时图形的开发人员提供高级绘图函数。例如,如果您想阻止用户绘制带有self-intersecting 线条或重叠多边形的图形,那么您可以使用此类来实现这些规则。绘制体验是建立在绘制动作之上的,绘制动作使用视图事件来生成一组坐标来创建新的几何图形。每个几何类型都有一个对应的绘制动作类。

这个类提供了一个简单的接口来与绘制动作进行交互。初始化 Draw 实例后,您可以调用 create() 以返回对相关绘图操作的引用。然后可以使用此绘制操作来创建指定类型的新几何图形。

下表说明了用于绘制点、折线和多边形的指针和键盘手势。

绘图点

手势 行动
Left-click 在指针位置添加一个点。
Enter 在指针位置添加一个点。

绘制折线和多边形

手势 行动
Left-click 在指针位置添加一个顶点。
Left-drag 为每个指针移动添加一个顶点。
Enter 完成折线或多边形。
F 向折线或多边形添加一个顶点。
Z 逐步撤消堆栈中记录的操作。
R 增量重做堆栈中记录的操作。

要为用户提供更简单的绘图体验,请使用SketchViewModel 类。

例子:

// create a new instance of draw
let draw = new Draw({
  view: view
});

// create an instance of draw polyline action
// the polyline vertices will be only added when
// the pointer is clicked on the view
let action = draw.create("polyline", {mode: "click"});

// fires when a vertex is added
action.on("vertex-add", function (evt) {
  measureLine(evt.vertices);
});

// fires when the pointer moves
action.on("cursor-update", function (evt) {
  measureLine(evt.vertices);
});

// fires when the drawing is completed
action.on("draw-complete", function (evt) {
  measureLine(evt.vertices);
});

// fires when a vertex is removed
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", // autocasts as new Polyline()
    paths: vertices,
    spatialReference: view.spatialReference
  }
  return polyline;
}

相关用法


注:本文由纯净天空筛选整理自arcgis.com大神的英文原创作品 esri/views/draw/Draw。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。