zoukankan      html  css  js  c++  java
  • ArcGisJS实现地图常用工具条、距离测量和面积测量(非官方实例)

    常用地图工具包括:平移、拉框缩小、拉框放大、全图、距离测量、面积测量、清除标记,距离测量、面积测量没有使用官方自带的组件代码。

    1.距离测量

    2.面积测量

    3.源代码

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>测量工具 - 3.18</title>
        <meta charset="utf-8" />
        <link rel="Stylesheet" type="text/css" href="http://127.0.0.1/api/arcgis_js_api/library/3.18/3.18/esri/css/esri.css" />
        <script type="text/javascript">
            //下面这段代码必须放到下面几个脚本文件的上面,否则会错误
            var dojoConfig = {
                api_url: "127.0.0.1/api/arcgis_js_api/library/3.18/3.18",
                async : false,
                isDebug : true,
                parseOnLoad : true,
                mblHideAddressBar : false,
                packages : [{
                    name: "lib",
                    location: location.pathname.replace(//[^/]+$/, '') + '/lib'
                }]
            };
        </script>
        <script type="text/javascript" src="http://127.0.0.1/api/arcgis_js_api/library/3.18/3.18/init.js"></script>
        <style type="text/css">
            html, body {
                margin:0px;
                height:100%;
            }
            #map_canvas {
                100%;
                height:100%;
                margin:0px auto;
            }
            #map_tools {
                position: absolute;
                right: 10px;
                top:10px;
            }
        </style>
        <script type="text/javascript">
            var map;
            require([
                "esri/map",
                "esri/layers/ArcGISTiledMapServiceLayer",
                "esri/toolbars/navigation",
                "esri/toolbars/draw",
                "esri/tasks/GeometryService",
                "esri/symbols/Font",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "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, ArcGISTiledMapServiceLayer, Navigation, Draw, GeometryService, Font,
                        SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, TextSymbol, Color,
                        number, Graphic, LengthsParameters, Point, Polyline, AreasAndLengthsParameters, domAttr) {
                //创建底图
                map = Map("map_canvas");
                var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
                map.addLayer(basemap);
                //创建地图操作对象
                var navToolbar = new Navigation(map);
                //boolbar工具条
                var toolbar = new Draw(map);
                //调用esri自带的服务(在arcgis server Manger中,记得开启服务)
                var geometryService = new GeometryService("http://192.168.0.206:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
                var totalDistance = 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])
                ); //定义标记样式
                //给按钮添加绑定事件
                dojo.query(".functionWrap").forEach(function(node, index) {
                    dojo.connect(node, "onclick", function(evt) {
                        switch(node.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);
                }
                //触发完成的事件
                toolbar.on("draw-end", function(evt) {
                    addToMap(evt);
                });
                //生成两点之间的连线
                toolbar.setLineSymbol(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2));
                //量算功能触发
                map.on("click", function(evt) {
                    mapClick(evt);
                });
                //添加图形函数
                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); //删除数组中的所有元素
                            totalDistance = 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 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);
                                totalDistance += 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(totalDistance, {
                                    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 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();
                    }
                }
            });
        </script>
    </head>
    <body>
        <div id="map_canvas"></div>
        <div id="map_tools">
            <input type="button" class="functionWrap" value="平移" />
            <input type="button" class="functionWrap" value="拉框缩小" />
            <input type="button" class="functionWrap" value="拉框放大" />
            <input type="button" class="functionWrap" value="全图" />
            <input type="button" class="functionWrap" value="距离测量" />
            <input type="button" class="functionWrap" value="面积测量" />
            <input type="button" class="functionWrap" value="清除标记" />
        </div>
    </body>
    </html>

    注意:上面的代码使用的是本地的ArcGis API,如果本地没有,请改为官方在线API才可以显示出来。

    如果需要源代码文件或者有疑问的,可以Q我,149012959,请注明原因!

  • 相关阅读:
    [Oracle]快速生成大量模拟数据的方法
    [Oracle]Oracle Fail Safe 与 SQLNET.AUTHENTICATION_SERVICES关系
    [Oracle]构筑TDE 环境的例子
    [Oracle]包含了MVIEW的表领域,在进行导出,表领域改名,再导入后,MVIEW会消失不见。
    [python][spark]wholeTextFiles 读入多个文件的例子
    [Spark][Python]RDD flatMap 操作例子
    Android 仿知乎创意广告
    移动端强大的富文本编辑器richeditor-android
    Python-Flask实现电影系统管理后台
    俄罗斯方块-C语言-详注版
  • 原文地址:https://www.cnblogs.com/xiaocai0923/p/10472282.html
Copyright © 2011-2022 走看看