arcgis for js绘制面

作者这里用的esri版本是419
这里需要提前初始化draw包"esri/views/draw/Draw"

this.$message.success("开始绘制");
var draw = new Draw({
view:this.view
})
var action = draw.create("polygon", {
  mode: "click"//点击方式加点
});
// 获取焦点
this.view.focus();

// 顶点添加事件
action.on("vertex-add", (evt) =>{
this.createPolygon(evt)
});


//顶点移除事件
action.on("vertex-remove", (evt) =>{
this.createPolygon(evt)

});
// 鼠标移动事件
action.on("cursor-update", (evt) =>{
this.createPolygon(evt)
});


// 绘制完成事件
action.on("draw-complete", (evt) =>{
this.createPolygon(evt)
this.$message.success("结束绘制");

});

这里用到了graphic和polygon两个包

1. "esri/Graphic"
2. "esri/geometry/Polygon"

async createPolygon(event) {
    //获取所有顶点
    var vertices = event.vertices;
    //清除之前绘制
    this.view.graphics.removeAll();
    var Graphic = await arcgisPackage.Graphic;
    var Polygon = await arcgisPackage.Polygon;
    // 生成绘制的图形
    var graphic = new Graphic({
        geometry: new Polygon({
            hasZ: false,
            hasM: false,
            rings: [vertices],
            spatialReference: this.view.spatialReference
        }),
        symbol: {
            type: "simple-fill",  // autocasts as new SimpleFillSymbol()
            color: [ 51,51, 204, 0.9 ],
            style: "solid",
            outline: {  // autocasts as new SimpleLineSymbol()
                color: "white",
                width: 1
            }
        }
    });
    this.view.graphics.add(graphic);
    console.log(graphic.geometry.toJSON());
}

更多文章原作者链接