ArcGIS API for JavaScript4.18之手动绘制多边形

一、创建Draw实例

const draw = new Draw({
  view: view
});

二、绑定绘制按钮的点击事件

let action = draw.create("polygon");
// PolygonDrawAction.vertex-add
// Fires when user clicks, or presses the "F" key.
// Can also be triggered when the "R" key is pressed to redo.
action.on("vertex-add", function (evt) {
  createPolygonGraphic(evt.vertices);
});

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

// Fires when the pointer moves over the view
action.on("cursor-update", function (evt) {
  createPolygonGraphic(evt.vertices);
});

// Add a graphic representing the completed polygon
// when user double-clicks on the view or presses the "C" key
action.on("draw-complete", function (evt) {
  createPolygonGraphic(evt.vertices);
});

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

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