arcgis api for js 4.x学习笔记（2）绘制面(Draw)及面积计算(geodesicArea)

面
清除

//本文对应Api 4.6版本 
require([
        'dojo/on',
        'dojo/dom',
        'esri/views/2d/draw/Draw',
        'esri/Graphic',
        'esri/geometry/geometryEngine',
        'esri/geometry/Point',
        'esri/geometry/Polyline',
        'esri/geometry/Polygon',
        'esri/symbols/TextSymbol',
        'esri/layers/GraphicsLayer',
        "esri/geometry/SpatialReference",
        'dojo/domReady!'
],function(on,dom,Draw,Graphic,GeometryEngine,Point,Polyline,Polygon,TextSymbol,
GraphicsLayer,SpatialReference) {
    var draw;
    on(dom.byId("btnDrawPolygon"),"click",function(){
        draw = new Draw({
           view: view//view定义见https://blog.csdn.net/wangchaohpu/article/details/107487687
        });
        var action = draw.create("polygon");
        //添加一个点的时候触发
        action.on("vertex-add", function (evt) {
            createPolygonGraphic(evt.vertices);
        });
        // Fires when the pointer moves over the view
        action.on("cursor-update", function (evt) {
            createPolygonGraphic(evt.vertices);
        });
        // 按ctrl+c撤销一个点的时候触发
        action.on("vertex-remove", function (evt) {
            createPolygonGraphic(evt.vertices);
        });
        //双击完成的时候触发
        action.on("draw-complete", function (evt) {
            createPolygonGraphic(evt.vertices);
        });
    })
    function createPolygonGraphic(vertices){
                view.graphics.removeAll();
                var polygon = new Polygon({
                    rings: vertices,
                    spatialReference: view.spatialReference,//坐标系必须跟当前view的坐标系一致，否则添加不上
                })
                var graphic = new Graphic({
                    geometry: polygon,
                    symbol: {
                        type: "simple-fill", // autocasts as SimpleFillSymbol
                        color: [3, 255, 240, 0.1],
                        style: "solid",
                        outline: {  // autocasts as SimpleLineSymbol
                            color: [255,116,3],
                            width: 2
                        }
                    }
                });
                view.graphics.add(graphic);
                var polygon = new Polygon({
                    rings: vertices,
                    // spatialReference: view.spatialReference
                    spatialReference: new SpatialReference(4326)
                })
                //WGS84 (wkid:4326)及墨卡托坐标系用geodesicArea计算面积，其他坐标系用planarArea计算面积
                // var area = GeometryEngine.planarArea(polygon);
                var area = GeometryEngine.geodesicArea(polygon,'square-meters');

                //将面积结果标注在图上
                var center = polygon.centroid;
                var pointcenter = new Point({
                    longitude:center.longitude,
                    latitude:center.latitude,
                    spatialReference: view.spatialReference//坐标系必须跟当前view的坐标系一致，否则添加不上
                })
                var unit="平方米";
                var textSymbol = new TextSymbol({
                    type: "text",
                    color: "red",
                    haloColor: "black",
                    haloSize: "5px",
                    xoffset: '3pt',
                    yoffset: '3pt',
                    text:Math.abs(Math.round(area*100)/100)+unit,
                    font: {
                        size: 12,
                        family: "sans-serif",
                        weight: "bolder"
                    }
                })
                var textGraphics=new Graphic({
                    geometry:pointcenter,
                    symbol: textSymbol
                });
                view.graphics.add(textGraphics);


            }

})