ArcGIS for js SketchViewModel绘制点、线、面和圆（vue代码）

引入依赖（前提要加载地图）：

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);
      }
}

原文地址：https://blog.csdn.net/qq_19688207/article/details/140736660

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！