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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。