JavaScript ArcGIS 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 类为需要完全控制创建具有不同几何形状的临时图形的开发人员提供了高级绘图函数。例如，如果您想阻止用户绘制具有自相交线或重叠多边形的图形，那么您可以使用此类来实现这些规则。绘制体验建立在绘制操作的基础上，绘制操作使用视图事件生成一组坐标以创建新的几何图形。每个几何类型都有一个相应的绘制操作类。

此类提供了一个用于与绘图操作交互的简单接口。初始化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大神的英文原创作品 Draw。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。