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

 区域分析及要素定位缓冲分析参考https://blog.csdn.net/Jie_1997/article/details/106817749

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值