ArcGIS API For JavaScript - toolbar工具条（测距）、站点要素显隐、线网要素显隐

Myth丶恋晨 2021-07-25 13:10 428阅读 0赞

@{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Draw</title>
        @*加载高德地图*@
        <script type="text/javascript">
            var dojoConfig = {
                async: true,
                parseOnLoad: true,
                packages: [{
                    name: "js",
                    location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
                }]
            };
        </script>
        <script src="~/Scripts/jquery-3.3.1.js"></script>
        <script src="~/Scripts/init.js"></script>
        <link href="~/Content/esri.css" rel="stylesheet" />
        <link href="~/Content/tundra.css" rel="stylesheet" />
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            html, body, #map {
                width: 100%;
                height: 100%;
                position: absolute;
            }
    
            .list {
                width: 12%;
                background-color: rgba(22, 59, 90, 0.8);
                color: #fff;
                position: absolute;
            }
    
            button {
                width: 90%;
                margin: 10px 5%;
                border-radius: 5px;
                height: 26px;
            }
        </style>
        <script>
            var map;
            var urlMap = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer'//总图层
            var stationUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/0'//站点图层
            var lineUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/1'//线路图层
            require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/GeometryService", "esri/tasks/BufferParameters",
                "esri/toolbars/draw", "esri/symbols/Font", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", "dojo/query", "esri/symbols/TextSymbol",
                "esri/graphic", "esri/tasks/LengthsParameters", "esri/geometry/Polyline", "dojo/number", "esri/layers/FeatureLayer",
                "dojo/domReady!"],
                function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer, GeometryService, BufferParameters,
                    Draw, Font, SimpleMarkerSymbol, SimpleLineSymbol, Color, query, TextSymbol,
                    Graphic, LengthsParameters, Polyline, number, FeatureLayer) {
                    /* code goes here */
                    map = new Map("map", {
                        center: [120.075892, 31.526844],
                        zoom: 8,//缩放等级
                        logo: false, //logo
                        slider: false, //缩小按钮
                    });
                    var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
                    var baselayer1 = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
                    map.addLayer(baselayer1);//添加高德地图到map容器
                    map.addLayer(serverLayer);
    
    
                    //-------------toolbar工具条（测距、站点要素显隐、线网要素显隐）---------------
                    var toolbar = new Draw(map);   //map：地图
                    //调用esri自带的服务（在arcgis server Manger中，记得开启服务）
                    var geometryService = new GeometryService("http://xxx: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("button").on("click", function (event) {
                        console.log("111",event)
                        //获得按钮的文本信息
                        var value = this.innerHTML;
                        switch (value) {
                            case "测距":
                                //测距操作
                                map.graphics.clear();
                                distanceMeasure();
                                break;
                            case "站点":
                                //站点
                                map.graphics.clear();
                                Aurlstation();
                                break;
                            case "线网":
                                //线网
                                map.graphics.clear();
                                Xurlline();
                                break;
                        }
                    })
                    //长度量算
                    function distanceMeasure() {
                        map.enableScrollWheelZoom();
                        disFun = true;
                        areaFun = false;
                        toolbar.activate(Draw.POLYLINE);
                    }
                    // 量算功能触发
                    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) {  //上面触发的addToMap方法，触发完成的方法
                        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));
    
                            toolbar.deactivate();
    
                            if (disFun) {
                                disFun = false;
                                inputPoints.splice(0, inputPoints.length);//删除数组中的所有元素
                                totleDistance = 0.0;
                                totalGraphic = null;
                            }
    
                        }
                    }
                    //站点元素
                    var Asta = false;
                    function Aurlstation() {
                        if (Asta) { //默认为显示
                            map.removeLayer(map.getLayer("Fzd"));
                            Asta = false;
                        }
                        else {
                            var featureLayer = new FeatureLayer(stationUrl, {  //stationUrl：站点图层，不可错
                                mode: FeatureLayer.MODE_SNAPSHOT,
                                outFields: ["*"]
                            });
                            featureLayer.id = "Fzd";
                            map.addLayers([featureLayer]);
    
                            Asta = true;
                        }
                    }
                    //线网元素
                    var Xw = false;
                    function Xurlline() {
                        if (Xw) {
                            map.removeLayer(map.getLayer("Fxw"));
                            Xw = false;
                        }
                        else {
                            var featureLayer = new FeatureLayer(lineUrl, {  //urlline：线路图层，不可错
                                mode: FeatureLayer.MODE_SNAPSHOT,
                                outFields: ["*"]
                            });
                            featureLayer.id = "Fxw";
                            map.addLayers([featureLayer]);
    
                            Xw = true;
                        }
                    }
                });
        </script>
    </head>
    <body>
        <div id="map"></div>
        <div class="list">
            <button>测距</button>
            <button>站点</button>
            <button>线网</button>
        </div>
    </body>
    </html>
    <script>
    
    
    </script>