ArcGIS API 4.9 节点编辑

单击移动，再单击节点编辑

源码地址：https://download.csdn.net/download/wangtao510/10862178

 

function initSketch(view, tempGraphicsLayer) {
    require(["esri/widgets/Sketch/SketchViewModel", "esri/Graphic"], function (SketchViewModel, Graphic) {
        var editGraphic;
        var sketch = new SketchViewModel({
            view: view,
            layer: tempGraphicsLayer,
            pointSymbol: {
                type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                style: "circle",
                color: "red",
                size: "10px",
                outline: {  // autocasts as new SimpleLineSymbol()
                    color: [255, 255, 0],
                    width: 1
                }
            },
            polylineSymbol: {
                type: "simple-line",  // autocasts as new SimpleMarkerSymbol()
                color: "#8A2BE2",
                width: "2",
                style: "dash"
            },
            polygonSymbol: {
                type: "simple-fill",  // autocasts as new SimpleMarkerSymbol()
                color: "rgba(138,43,226, 0.8)",
                style: "solid",
                outline: { // autocasts as new SimpleLineSymbol()
                    color: "white",
                    width: 1
                }
            }
        });


        sketch.on("create-complete", function (event) {
            const graphic = new Graphic({
                geometry: event.geometry,
                symbol: sketch.graphic.symbol
            });
            tempGraphicsLayer.add(graphic); 
        });

        sketch.on("update-complete", function (event) {
            const graphic = new Graphic({
                geometry: event.geometry,
                symbol: sketch.graphic.symbol
            });
            tempGraphicsLayer.add(graphic);
            editGraphic = null;
        });

        sketch.on("update-cancel", function (event) {
            var graphic = new Graphic({
                geometry: event.geometry,
                symbol: editGraphic.symbol
            });
            tempGraphicsLayer.add(graphic);
            editGraphic = null;
        });  

        var nodeList = document.getElementsByClassName("esri-sketch__button");
        for (i = 0; i < nodeList.length; i++) {
            switch (nodeList[i].title) {
                case "移动":
                    break;
                case "修整":
                    view.on("click", function (event) {
                        if (editGraphic != null) {
                            return;
                        }
                        view.hitTest(event).then(function (response) {
                            var results = response.results;
                            if (results.length > 0) {
                                for (var i = 0; i < results.length; i++) {
                                    editGraphic = results[i].graphic;
                                    tempGraphicsLayer.remove(editGraphic);
                                    sketch.update(editGraphic);
                                }
                            }
                        });
                    });
                    break;
                case "绘制点":
                    nodeList[i].addEventListener("click", function () {
                        sketch.create("point");
                    });
                    break;
                case "绘制折线":
                    nodeList[i].addEventListener("click", function () {
                        sketch.create("polyline");
                    });
                    break;
                case "绘制一个多边形":
                    nodeList[i].addEventListener("click", function () {
                        sketch.create("polygon"); 
                    });
                    break;
                case "绘制一个矩形":
                    nodeList[i].addEventListener("click", function () {
                        sketch.create("rectangle", { mode: "hybrid" });
                    });
                    break;
                case "绘制一个圆":
                    nodeList[i].addEventListener("click", function () {
                        sketch.create("rectangle");
                    });
                    break;
                case "撤消":
                    nodeList[i].addEventListener("click", function () {
                        sketch.undo();
                    });
                    break;
                case "恢复":
                    nodeList[i].addEventListener("click", function () {
                        sketch.redo();
                    });
                    break;
            }
        }
    }) 
}

源码地址：https://download.csdn.net/download/wangtao510/10862178