引入依赖(前提要加载地图):
import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel.js";import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
创建SketchViewModel对象:
// 创建GraphicsLayer
let graphicsLayer = new GraphicsLayer();
ToolsConfig.map.add(graphicsLayer);// 创建编辑工具
var sketchViewModel = new SketchViewModel({layer: graphicsLayer,view: ToolsConfig.view,activeFillSymbol:{type: "simple-fill",style: "solid",color: [255, 0, 0, 0.2],outline: {color: [255, 0, 0],width: 1}},snappingOptions: { enabled: true, featureSources: [{layer: graphicsLayer, enabled: true}]}
});
绘制图形方法:
// 绘制点
//sketchViewModel.create("point", { "mode": "click" });// 绘制点线
//sketchViewModel.create("polyline", { "mode": "click" });// 绘制面
sketchViewModel.create("polygon", { "mode": "click" });// 绘制圆
//sketchViewModel.create("circle", { "mode": "click" });
操作方法:
// 编辑
//sketchViewModel.updateOnGraphicClick = true;// 撤销
//sketchViewModel.undo();// 恢复
//sketchViewModel.redo();// 保存
//sketchViewModel.updateOnGraphicClick = false;
//sketchViewModel.cancel();
绑定事件:
绘制完执行函数:
//绘制图形绑定事件
sketchViewModel.on("create", onGraphicCreate);//绘制完执行函数
function onGraphicCreate(event) {if (event.state === "complete") {console.log(event)graphicsLayer.add(event.graphic);}}
编辑完执行函数:
//编辑图形绑定事件
sketchViewModel.on("update", onGraphicUpdate);//编辑完执行函数
function onGraphicUpdate(event) {const graphic = event.graphics[0];if (event.state === "complete") {console.log(graphic);}
}