Wechat: yu389741| Email: gisdqy@163.com

Shop:https://www.giserdqy.com/shop

ArcGIS API for JavaScript3.x之工具条 距离测量,面积测量,拉框放大缩小,平移,全图


ArcGIS API for JavaScript3.x之工具条 距离测量,面积测量,拉框放大缩小,平移,全图

距离测量,面积测量,放大,缩小,平移,全图等工具条是GIS浏览的基本工具。也是GIS系统的基础功能

效果图

工具条样式:

自定义即可,仅做演示

距离测量:

面积测量:

 

AMD代码:

require([
    "esri/map",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/toolbars/navigation",
    "esri/toolbars/draw",
    "esri/tasks/GeometryService",
    "esri/symbols/Font",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/TextSymbol",
    "esri/Color",
    "dojo/number",
    "esri/graphic",
    "esri/tasks/LengthsParameters",
    "esri/geometry/Point",
    "esri/geometry/Polyline",
    "esri/tasks/AreasAndLengthsParameters",
    "dojo/dom-attr",
    "dojo/domReady!"
],function(Map,ArcGISDynamicMapServiceLayer,Navigation,Draw,GeometryService,Font,SimpleMarkerSymbol,SimpleLineSymbol,TextSymbol,Color,number,Graphic,LengthsParameters,
    Point,Polyline,AreasAndLengthsParameters,domAttr){ 
    var chinaCollagelayer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/2017shixi/collegeMap/MapServer");
    var map = new Map("map");
    map.addLayer(chinaCollagelayer);
//创建地图操作对象
    var navToolbar = new Navigation(map);
//toolbar工具条
    var toolbar = new Draw(map);
 //调用esri自带的服务(在arcgis server Manger中,记得开启服务)
    var geometryService =new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
    var totleDistance = 0.0;//总距离
    var totalGraphic = null;//存储点集合
    var disFun =false;//距离测量
    var areaFun = false;//面积测量
    var inputPoints = [];//存储生成点的集合
    var startFont = new Font('12px').setWeight(Font.WEIGHT_BOLD);//定义文字样式
    var makerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,8,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([204,102,51]),1),
                new Color([158.184,71,0.65]));//定义标记点样式
//给按钮添加绑定事件
    query(".functionWrap").on("click",function(event){
        //获得按钮的文本信息
        var value=domAttr.get(this,"title");
        switch(value){
            case "平移":
                navToolbar.activate(Navigation.PAN);
                break;
            case "拉框缩小":
                navToolbar.activate(Navigation.ZOOM_OUT);
                break;
            case "拉框放大":
                navToolbar.activate(Navigation.ZOOM_IN);
                break;
            case "全图":
                map.centerAndZoom(([110,38.5]),5);
                break;
            case "距离测量":
                distanceMeasure();
                break;
            case "面积测量":
                areaMeasure();
                break;
            case "清除标记":
                clearAction();
                break;
        }
    };
   //长度量算
    function distanceMeasure() {
        map.enableScrollWheelZoom();
        disFun=true;
        areaFun=false;
        toolbar.activate(Draw.POLYLINE);
    }
    //面积量算
    function areaMeasure() {
        map.enableScrollWheelZoom();
        disFun=false;
        areaFun=true;
        toolbar.activate(Draw.POLYGON);
    }
    // 量算功能触发
    map.on("click",function (evt) {
        mapClick(evt);
    });
    //触发完成的事件
    toolbar.on("draw-end",function (evt) {
        addToMap(evt);
    });
 //生成两点之间的连线
    toolbar.setLineSymbol(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2));
 //量算函数
    function mapClick(evt) {
        if(disFun){
            inputPoints.push(evt.mapPoint);
            var  textSymbol;
            if(inputPoints.length ===1){
                textSymbol = new TextSymbol("起点",startFont,new Color([204,102,51]));
                textSymbol.setOffset(0,-20);
                map.graphics.add(new Graphic(evt.mapPoint,textSymbol));
            }
            map.graphics.add(new Graphic(evt.mapPoint,makerSymbol));
            if(inputPoints.length >=2){
                //    设置距离测量的参数
                var  lengthParams = new LengthsParameters();
                lengthParams.distanceUnit = GeometryService.UNIT_METER;
                lengthParams.calculationType = "preserveShape";
                var p1 = inputPoints[inputPoints.length-2];
                var p2 = inputPoints[inputPoints.length-1];
                if(p1.x ===p2.x &&p1.y===p2.y){
                    return;
                }
                //    z在两点之间划线将两点链接起来
                var polyline = new Polyline(map.spatialReference);
                polyline.addPath([p1,p2]);
                lengthParams.polylines=[polyline];
                // 根据参数,动态的计算长度
                geometryService.lengths(lengthParams,function(distance){
                    var _distance = number.format(distance.lengths[0]/1000);
                    totleDistance+=parseFloat(_distance);//计算总长度
                    var beetwentDistances = _distance+"千米";
                    var tdistance = new TextSymbol(beetwentDistances,startFont,new Color([204,102,51]));
                    tdistance.setOffset(40,-3);
                    map.graphics.add(new Graphic(p2,tdistance));
                    if(totalGraphic){
                        map.graphics.remove(totalGraphic);
                    }
                    var total=number.format(totleDistance,{
                        pattern:"#.000"
                    });
                    //    设置总长度的显示样式,并添加到地图上
                    var totalSymbol=new TextSymbol("总长度:"+total+"千米",startFont,new Color([204,102,51]));
                    totalSymbol.setOffset(40,-15);
                    totalGraphic= map.graphics.add(new Graphic(p2,totalSymbol));
                });
            }
        }
    }
    // 添加图形函数
    function addToMap(evt) {
        if(disFun||areaFun){
            var geometry = evt.geometry;//绘制图形的geometry
            //将绘制的图形添加到地图上去
            var symbol = null;
            switch (geometry.type){
                case "point":
                    symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10,
                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),1),
                        new Color([0,255,0,0.25]));
                    break;
                case "polyline":
                    symbol  = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                        new Color([255,0,0,0.8]),2);
                    break;
                case "polygon":
                    symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2),
                        new Color([255,255,0,0.25]));
                    break;
                case "extent":
                    symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),2),
                        new Color([255,255,0,0.25]));
                    break;
            }
            map.graphics.add(new Graphic(geometry,symbol));
            if(disFun){
                inputPoints.splice(0,inputPoints.length);//删除数组中的所有元素
                totleDistance =0.0;
                totalGraphic = null;
            }
            else if(areaFun){
                //设置面积和长度的参数
                var areasAndLengthsParameters =new AreasAndLengthsParameters();
                areasAndLengthsParameters.lengthUnit = GeometryService.UNIT_METER;//设置距离单位
                areasAndLengthsParameters.areaUnit = GeometryService.UNIT_SQUARE_KILOMETERS;//设置面积单位
                geometryService.simplify([geometry],function (simplifiedGeometries) {
                    areasAndLengthsParameters.polygons = simplifiedGeometries;
                    geometryService.areasAndLengths(areasAndLengthsParameters,function (result) {
                        var font =new Font("16px",Font.STYLE_NORMAL,Font.VARIANT_NORMAL,Font.WEIGHT_BOLDER);
                        var areaResult = new TextSymbol(number.format(result.areas[0],{
                            pattern:'#.000'
                        })+"平方公里",font,new Color([204,102,51]));
                        var spoint = new Point(geometry.getExtent().getCenter().x,geometry.getExtent().getCenter().y,map.spatialReference);
                        map.graphics.add(new Graphic(spoint,areaResult));//在地图上显示测量的面积
                    });

                });
            }

        }
    }
    //清空函数
    function clearAction() {
        toolbar.deactivate();//撤销地图绘制功能
        disFun = false;
        areaFun = false;
        map.enableScrollWheelZoom();
        map.graphics.clear();
        var graphicLayerIds = map.graphicsLayerIds;
        var len = graphicLayerIds.length;
        for(var i=0; i<len;i++){
            var gLayer = map.getLayer(graphicLayerIds[i]);
            gLayer.clear();
        }
    }
});

转载自: https://blog.csdn.net/idomyway/article/details/77746190

Legacy Module Require代码 

//basic tools

dojo.require("esri/toolbars/navigation");

dojo.require("esri/toolbars/draw");

dojo.require("esri/tasks/GeometryService");

dojo.require("esri/symbols/Font");

dojo.require("esri/symbols/SimpleMarkerSymbol");

dojo.require("esri/symbols/SimpleLineSymbol");

dojo.require("esri/symbols/SimpleFillSymbol");

dojo.require("esri/symbols/TextSymbol");

dojo.require("esri/Color");

dojo.require("dojo/number");

dojo.require("esri/graphic");

dojo.require("esri/tasks/LengthsParameters");

dojo.require("esri/geometry/Point");

dojo.require("esri/geometry/Polyline");

dojo.require("esri/tasks/AreasAndLengthsParameters");

function initBasicTool(map) {//初始化方法,传入map对象,

    //创建地图操作对象

    var navToolbar = new esri.toolbars.Navigation(map);

    //toolbar工具条

    var toolbar = new esri.toolbars.Draw(map);

    //调用esri自带的服务(在arcgis server Manger中,记得开启服务)

    var geometryService = new esri.tasks.GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");

    var totleDistance = 0.0; //总距离

    var totalGraphic = null; //存储点集合

    var disFun = false; //距离测量

    var areaFun = false; //面积测量

    var inputPoints = []; //存储生成点的集合

    var startFont = new esri.symbol.Font('12px').setWeight(esri.symbol.Font.WEIGHT_BOLD); //定义文字样式

    var makerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 8,

        new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([204, 102, 51]), 1),

        new esri.Color([158.184, 71, 0.65])); //定义标记点样式

    //给按钮添加绑定事件

    $(".functionWrap").click(function (event) {

        //获得按钮的文本信息

        navToolbar.deactivate();

        var value = $(this).attr('title');

        switch (value) {

            case "平移":

                navToolbar.activate(esri.toolbars.Navigation.PAN);

                break;

            case "拉框缩小":

                navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);

                break;

            case "拉框放大":

                navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);

                break;

            case "全图":

                map.centerAndZoom(([110, 38.5]), 5);

                break;

            case "距离测量":

                distanceMeasure();

                break;

            case "面积测量":

                areaMeasure();

                break;

            case "清除标记":

                clearAction();

                break;

        }

    });

    //长度量算

    function distanceMeasure() {

        map.enableScrollWheelZoom();

        disFun = true;

        areaFun = false;

        toolbar.activate(esri.toolbars.Draw.POLYLINE);

    }

    //面积量算

    function areaMeasure() {

        map.enableScrollWheelZoom();

        disFun = false;

        areaFun = true;

        toolbar.activate(esri.toolbars.Draw.POLYGON);

    }

    // 量算功能触发

    map.on("click", function (evt) {

        mapClick(evt);

    });

    //触发完成的事件

    toolbar.on("draw-end", function (evt) {

        addToMap(evt);

    });

    //生成两点之间的连线

    toolbar.setLineSymbol(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 0, 0]), 2));

    //量算函数

    function mapClick(evt) {

        if (disFun) {

            inputPoints.push(evt.mapPoint);

            var textSymbol;

            if (inputPoints.length === 1) {

                textSymbol = new esri.symbol.TextSymbol("起点", startFont, new esri.Color([204, 102, 51]));

                textSymbol.setOffset(0, -20);

                map.graphics.add(new esri.Graphic(evt.mapPoint, textSymbol));

            }

            map.graphics.add(new esri.Graphic(evt.mapPoint, makerSymbol));

            if (inputPoints.length >= 2) {

                //    设置距离测量的参数

                var lengthParams = new esri.tasks.LengthsParameters();

                lengthParams.distanceUnit = esri.tasks.GeometryService.UNIT_METER;

                lengthParams.calculationType = "preserveShape";

                var p1 = inputPoints[inputPoints.length - 2];

                var p2 = inputPoints[inputPoints.length - 1];

                if (p1.x === p2.x && p1.y === p2.y) {

                    return;

                }

                //    z在两点之间划线将两点链接起来

                var polyline = new esri.geometry.Polyline(map.spatialReference);

                polyline.addPath([p1, p2]);

                lengthParams.polylines = [polyline];

                // 根据参数,动态的计算长度

                geometryService.lengths(lengthParams, function (distance) {

                    var _distance = dojo.number.format(distance.lengths[0] / 1000);

                    totleDistance += parseFloat(_distance); //计算总长度

                    var beetwentDistances = _distance + "千米";

                    var tdistance = new esri.symbol.TextSymbol(beetwentDistances, startFont, new esri.Color([204, 102, 51]));

                    tdistance.setOffset(40, -3);

                    map.graphics.add(new esri.Graphic(p2, tdistance));

                    if (totalGraphic) {

                        map.graphics.remove(totalGraphic);

                    }

                    var total = dojo.number.format(totleDistance, {

                        pattern: "#.000"

                    });

                    //    设置总长度的显示样式,并添加到地图上

                    var totalSymbol = new esri.symbol.TextSymbol("总长度:" + total + "千米", startFont, new esri.Color([204, 102, 51]));

                    totalSymbol.setOffset(40, -15);

                    totalGraphic = map.graphics.add(new esri.Graphic(p2, totalSymbol));

                });

            }

        }

    }

    // 添加图形函数

    function addToMap(evt) {

        if (disFun || areaFun) {

            var geometry = evt.geometry; //绘制图形的geometry

            //将绘制的图形添加到地图上去

            var symbol = null;

            switch (geometry.type) {

                case "point":

                    symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10,

                        new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 0, 0]), 1),

                        new esri.Color([0, 255, 0, 0.25]));

                    break;

                case "polyline":

                    symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,

                        new esri.Color([255, 0, 0, 0.8]), 2);

                    break;

                case "polygon":

                    symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,

                        new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 0, 0]), 2),

                        new esri.Color([255, 255, 0, 0.25]));

                    break;

                case "extent":

                    symbol = new esri.symbol.SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

                        new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 0, 0]), 2),

                        new esri.Color([255, 255, 0, 0.25]));

                    break;

            }

            map.graphics.add(new esri.Graphic(geometry, symbol));

            if (disFun) {

                inputPoints.splice(0, inputPoints.length); //删除数组中的所有元素

                totleDistance = 0.0;

                totalGraphic = null;

            } else if (areaFun) {

                //设置面积和长度的参数

                var areasAndLengthsParameters = new esri.tasks.AreasAndLengthsParameters();

                areasAndLengthsParameters.lengthUnit = esri.tasks.GeometryService.UNIT_METER; //设置距离单位

                areasAndLengthsParameters.areaUnit = esri.tasks.GeometryService.UNIT_SQUARE_KILOMETERS; //设置面积单位

                geometryService.simplify([geometry], function (simplifiedGeometries) {

                    areasAndLengthsParameters.polygons = simplifiedGeometries;

                    geometryService.areasAndLengths(areasAndLengthsParameters, function (result) {

                        var font = new esri.symbol.Font("16px", esri.symbol.Font.STYLE_NORMAL, esri.symbol.Font.VARIANT_NORMAL, esri.symbol.Font.WEIGHT_BOLDER);

                        var areaResult = new esri.symbol.TextSymbol(dojo.number.format(result.areas[0], {

                            pattern: '#.000'

                        }) + "平方公里", font, new esri.Color([204, 102, 51]));

                        var spoint = new esri.geometry.Point(geometry.getExtent().getCenter().x, geometry.getExtent().getCenter().y, map.spatialReference);

                        map.graphics.add(new esri.Graphic(spoint, areaResult)); //在地图上显示测量的面积

                    });

                });

            }

        }

    }

    //清空函数

    function clearAction() {

        toolbar.deactivate(); //撤销地图绘制功能

        disFun = false;

        areaFun = false;

        map.enableScrollWheelZoom();

        map.graphics.clear();

        var graphicLayerIds = map.graphicsLayerIds;

        var len = graphicLayerIds.length;

        for (var i = 0; i < len; i++) {

            var gLayer = map.getLayer(graphicLayerIds[i]);

            gLayer.clear();

        }

    }

}



Have any Question or Comment?

发表评论

您的电子邮箱地址不会被公开。

CAPTCHAis initialing...