关于arcgis: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());
}

更多文章👉原作者链接