ArcGIS API for JS 4.x点、线、面、圆、矩形的绘制教程

用的"esri/views/draw/Draw"

var draw=new Draw({view:view});
var graphicsLayer=new GraphicsLayer();
map.add(graphicsLayer);

画点

        function drawPoint(view,graphicsLayer,draw){
        require([
            "esri/Graphic",
        ], function(
            Graphic,
        ){
            graphicsLayer.removeAll();
            var action = draw.create("point");
            action.on("draw-complete",draw1);
            function draw1(event) {
                var point = {
                    type: "point",
                    x: event.coordinates[0],
                    y: event.coordinates[1],
                    spatialReference: view.spatialReference
                };
                var markerSymbol={
                    type:"simple-marker",
                    color:[255,0,0],
                    outline:{
                        color:[255,255,255],
                        width:2
                    }
                };
                var inputPoint = new Graphic({
                    geometry: point,
                    symbol: markerSymbol
                });
                graphicsLayer.add(inputPoint);
            }
        })
    }

画线

            graphicsLayer.removeAll();
            var action = draw.create("polyline",{mode: "click"});

            action.on(["vertex-add","cursor-update","draw-complete"],draw1);

            function draw1(event) {
                graphicsLayer.removeAll();
                    var line={
                        type: "polyline",
                        paths: event.vertices,
                        spatialReference: view.spatialReference
                    };
                    var lineSymbol={
                        type:"simple-line",
                        color:[255,0,0],
                        width: 4,
                        cap: "round",
                        join: "round"
                    };
                    var inputPolyline = new Graphic({
                        geometry: line,
                        symbol: lineSymbol
                    });
                    graphicsLayer.add(inputPolyline);
                    
            }

画面

            graphicsLayer.removeAll();
            var action = draw.create("polygon",{mode: "click"});

            action.on(["vertex-add","cursor-update","draw-complete"],draw1);

            function draw1(event) {
                graphicsLayer.removeAll();
                var line={
                    type: "polygon",
                    rings: event.vertices,
                    spatialReference: view.spatialReference
                };
                var lineSymbol={
                    type:"simple-fill",
                    color:[255, 255, 255, 0.7],
                    style: "solid",
                    outline: {
                        color: "red",
                        width: 1
                    }
                    };
                var inputPolygon = new Graphic({
                    geometry: line,
                    symbol: lineSymbol
                });
                graphicsLayer.add(inputPolygon);
            }

画圆

            graphicsLayer.removeAll();
            var action = draw.create("circle");

            action.on(["vertex-add","cursor-update","draw-complete"],draw1);
            function draw1(event) {
                graphicsLayer.removeAll();
                var vertices=event.vertices;
                if(vertices.length<2){
                    return;
                }
                var center=new Point({
                    x:vertices[0][0],
                    y:vertices[0][1],
                    spatialReference: view.spatialReference
                });
                var dis=center.distance(new Point({
                    x:vertices[1][0],
                    y:vertices[1][1],
                    spatialReference: view.spatialReference
                }));
                var line= new Circle({
                    type: "circle",
                    center:center,
                    radius:dis,
                    spatialReference: view.spatialReference
                });
                var lineSymbol={
                    type:"simple-fill",
                    color:[255, 255, 255, 0.2],
                    style: "solid",
                    outline: {
                        color: "red",
                        width: 1
                    }
                };
                var inputPolygon = new Graphic({
                    geometry: line,
                    symbol: lineSymbol
                });
                graphicsLayer.add(inputPolygon);
            }

画矩形

graphicsLayer.removeAll();
            var action = draw.create("rectangle");

            action.on(["vertex-add","cursor-update","draw-complete"],draw1);
            function draw1(event) {
                graphicsLayer.removeAll();
                var vertices=event.vertices;
                if(vertices.length<2){
                    return;
                }
                var rings=[[vertices[0],[vertices[1][0],vertices[0][1]],vertices[1],[vertices[0][0],vertices[1][1]]]];
                var line={
                    type: "polygon",
                    rings: rings,
                    spatialReference: view.spatialReference
                };
                var lineSymbol={
                    type:"simple-fill",
                    color:[255, 255, 255, 0.7],
                    style: "solid",
                    outline: {
                        color: "red",
                        width: 1
                    }
                };
                var inputPolygon = new Graphic({
                    geometry: line,
                    symbol: lineSymbol
                });
                graphicsLayer.add(inputPolygon);
            }



免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删