作者这里用的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两个包
- "esri/Graphic"
- "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());}
更多文章原作者链接