从网上找了好多教程，大多数都是实现点击一次按钮绘制一个点，无法实现一次性绘制多个点的功能。最后还是官方文档靠谱提供了现成的方法。

首先需要定义一个按钮用于触发绘制事件

<button id="btn_multipoint">绘制多个点</button>

const btn_multipoint = document.getElementById("btn_multipoint");

通过事件调用绘制方法

 btn_multipoint.addEventListener("click",function(){
        enableCreateMultipoint(drawTool,mapView);
      })

 

需要创建绘图工具

 //创建绘图工具
      var drawTool = new Draw({
        view: mapView,
      });

绘制点调用方法：

 // 绘制多个点
      function enableCreateMultipoint(drawTool) {
        let action = drawTool.create("multipoint");

        // Give a visual feedback to users as they move the pointer over the view
        action.on("cursor-update", function (evt) {
          createMultipointGraphic(evt.vertices);
        });

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

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

        // Create a point when user clicks on the view or presses "C" key.
        action.on("draw-complete", function (evt) {
          createMultipointGraphic(evt.vertices);
        });
      }

      function createMultipointGraphic(vertices) {
        mapView.graphics.removeAll();

        let multipoint = new Multipoint({
          points: vertices,
          spatialReference: mapView.spatialReference,
        });

        const graphic = new Graphic({
          geometry: multipoint,
          symbol: {
            type: "simple-marker",
            style: "square",
            color: "red",
            size: "16px",
            outline: {
              color: [255, 255, 0],
              width: 3,
            },
          },
        });
        mapView.graphics.add(graphic);
      }

 

 

 

 

 

 

<button id="btn_multipoint">绘制多个点</button>