ArcGIS API For JavaScript - 删除图层中的站点、线路

川长思鸟来 2021-07-26 01:03 429阅读 0赞

## 删除图层要素，要求图层为FeatureServer ##

#### 删除站点或线路，需先将站点和线路FeatureServer图层加载至地图上 ####

@{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>DeleteView</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;
            }
    
            input, select, button {
                width: 90%;
                margin: 10px 5%;
                border-radius: 5px;
                height: 26px;
            }
        </style>
        <script>
            var map;
            var felayers = [];
            var urlMap = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer'
            var Feamap = 'http://xxx:6080/arcgis/rest/services/njcs/FeatureServer'
            var FeatStationURL = 'http://xxx:6080/arcgis/rest/services/njcs/FeatureServer/0'
            var FeatLineURL = 'http://xxx:6080/arcgis/rest/services/njcs/FeatureServer/1'
            require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "js/gaodeLayer", "esri/layers/FeatureLayer", "esri/toolbars/draw", "esri/toolbars/edit",
                "dojo/_base/array", "dojo/_base/event", "esri/geometry/Polyline", "esri/geometry/Point", "esri/geometry/Circle", "dojo/domReady!"],
                function (Map, ArcGISDynamicMapServiceLayer, gaodeLayer, FeatureLayer, Draw, Edit, arrayUtils, event, Polyline, Point, Circle) {
                    /* 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);
    
                    //加载图层（FeatureServer）：layer图层
                    //onload 事件会在页面或图像加载完成后立即发生
                    dojo.connect(serverLayer, "onLoad", function (layers) {   //ArcGISDynamicMapServiceLayer  ：MapServer图层，不可错
                        //layers.layerInfos.length：layers所有图层的个数
                        for (var i = 0; i < layers.layerInfos.length; i++) {
                            console.log(layers.layerInfos)
                            //所有图层
                            var infos = layers.layerInfos;
                            //layers下标图层中的名称（name）
                            var name = infos[i].name;
                            //layers下标图层中的编号（id）
                            var id = infos[i].id;
                            //将要素地图服务加载进来，这里是将所有的要素图层都添加进来了，可以进行编辑处理
                            //Feamap中图层的id
                            var tcurl = Feamap + "/" + id + "";    //FeatureServer图层（Feamap），不可错
                            felayers[i] = new FeatureLayer(tcurl,
                                {
                                    //按需加载feature
                                    mode: FeatureLayer.MODE_ONDEMAND,
                                    outFields: ["*"]
                                });
    
                            if (i == 2) {
                                //layers-add-result事件绑定的行为是addLayers([ ]),不是addLayer()
                                map.addLayers([felayers[0], felayers[1]]);//站点图层（0）；线路图层（1）
                            }
                        }
                    });
                });
        </script>
    </head>
    <body>
        <div id="map"></div>
        <div class="list">
            <div>删除站点</div>
            <input type="text" id="DeleteStationSearchText" placeholder="请输入将要删除站点的名称关键字" />
            <button onclick="executeDeleteStation(dojo.byId('DeleteStationSearchText').value);">查询</button>
            <select id="StationDelete" onchange="DeleteStation()"></select>
            <div>删除线路</div>
            <input type="text" id="DeleteLineSearchText" placeholder="请输入将要删除线路的名称关键字" />
            <button onclick="executeDeleteLine(dojo.byId('DeleteLineSearchText').value);">查询</button>
            <select id="LineDelete" onchange="DeleteLine()"></select>
        </div>
    </body>
    </html>
    
    <script>
        /**
         * 删除站点
         * 先查询，后删除
         * param {any} DeleteLineSearchText
         */
        //执行executeDeleteStation方法，根据DeleteStationSearchText模糊查询站点
        function executeDeleteStation(DeleteStationSearchText) {
            var queryTask = new esri.tasks.QueryTask(FeatStationURL);
            var query = new esri.tasks.Query();
            query.where = ("stationnam like '%" + DeleteStationSearchText + "%'");
            query.returnGeometry = true;
            query.outFields = ["*"];
            queryTask.execute(query, addStationDelete);
        }
        //执行addStationDelete方法，将查询到的站点放入select中
        function addStationDelete(featureSet) {
            var feature = featureSet.features;
            var temp = [];
            var innerhtml = "";
            for (var i = 0; i < feature.length; i++) {
                var graphic = feature[i];
                if (temp.indexOf(graphic.attributes.stationnam) == -1) {
                    var staId = graphic.attributes.OBJECTID;
                    temp.push(graphic.attributes.stationnam);
                    innerhtml += '<option id="' + staId + '" value="javascript:postionDeleteStation(' + '"' + DeleteLineSearchText + '"' + ')">' + graphic.attributes.stationnam + '</option>';
                }
            }
            document.getElementById("StationDelete").innerHTML = '<option>---请选择---</option>' + innerhtml;
        }
        //根据站点select框所选的站点，进行定位显示，删除站点
        function DeleteStation() {
            var id = $("#StationDelete option:selected").attr('id');
            var staname = $("#StationDelete option:selected").text();
    
            var queryTask = new esri.tasks.QueryTask(FeatStationURL);
            var query = new esri.tasks.Query();
            query.where = "stationnam = '" + staname + "'";
            query.returnGeometry = true;
            query.outFields = ["*"];
            queryTask.execute(query, positionStationDelete);
    
            function positionStationDelete(featureSet) {
                var feature = featureSet.features;
                for (var i = 0; i < feature.length; i++) {
                    var graphic = feature[i];
                    if (graphic.attributes.OBJECTID == id) {
                        var pointX = graphic.attributes.X;
                        var pointY = graphic.attributes.Y;
    
                        setTimeout(function () {
                            /**
                             * 删除站点
                             * 要素图层（不可错）：图层1    站点图层
                             */
                            drawlayer = felayers[0];
                            polylineAtt = {};
                            for (var i = 0; i < length; i++) {
                                var item = felayers[0].fields[i].name;
                                polylineAtt[item] = "";
                            }
                            //删除
                            polylineAtt["OBJECTID"] = graphic.attributes["OBJECTID"];
                            var newGraphic = new esri.Graphic(graphic.geometry, null, polylineAtt);
                            drawlayer.applyEdits(null, null, [newGraphic], function () {
                                alert("站点删除成功");
                            })
                        }, 2000)
    
                        //根据类型设置显示样式
                        switch (graphic.geometry.type) {
                            case "point":
                                var point = new esri.geometry.Point(pointX, pointY);
                                var labelSymbol = new esri.symbol.PictureMarkerSymbol('/Content/ceshi.gif', 25, 25);
                                var marker2 = new esri.Graphic(point, labelSymbol);
                                map.graphics.add(marker2);
    
                                break;
                            case "polyline":
                                var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1);
                                break;
                            case "polygon":
                                var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
                                break;
                        }
                        //设置显示样式
                        graphic.setSymbol(symbol);
                        //添加到graphics进行高亮显示
                        map.graphics.add(graphic);
                    }
                }
                var sGeometry = graphic.geometry;
                //当点击的名称对应的Geometry为点类型时进行地图中心定位显示
                if (sGeometry.type == "point") {
                    //var hsymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]),2), new dojo.Color([255,0,0,0.25]));
                    //sGrapphic.setSymbol(hsymbol);
                    var cPoint = new esri.geometry.Point();
                    console.log(sGeometry)
                    cPoint.x = sGeometry.x;
                    cPoint.y = sGeometry.y;
                    map.centerAt(cPoint);
                }
                //当点击的名称对应的Geometry为线或面类型时获取Geometry的Extent进行中心定位显示
                else {
                    var sExtent = sGeometry.getExtent();
                    map.setExtent(sExtent);
                }
            }
        }
    
    
        /**
         * 删除线路
         * 先查询，后删除
         * param {any} DeleteLineSearchText
         */
        //执行executeDeleteLine方法，根据updataLineSearchText模糊查询线路
        function executeDeleteLine(DeleteLineSearchText) {
            var queryTask = new esri.tasks.QueryTask(FeatLineURL);
            var query = new esri.tasks.Query();
            query.where = "linename like '%" + DeleteLineSearchText + "%'";
            query.returnGeometry = true;
            query.outFields = ['*'];
            queryTask.execute(query, addLineDelete);
        }
        //执行addLineDelete方法，将查询到的线路放入select中
        function addLineDelete(featureSet) {
            var feature = featureSet.features;
            var temp = [];
            var innerhtml = "";
            for (var i = 0; i < feature.length; i++) {
                var graphic = feature[i];
                if (temp.indexOf(graphic.attributes.linename) == -1) {
                    var lineId = graphic.attributes.OBJECTID;
                    innerhtml += '<option id="' + lineId + '" value="javascript:postionDeleteLine(' + '"' + DeleteLineSearchText + '"' + ')">' + graphic.attributes.linename + '</option>';
                }
            }
            document.getElementById("LineDelete").innerHTML = '<option>---请选择---</option>' + innerhtml;
        }
    
        //根据站点select框所选的线路，进行定位显示，删除线路
        function DeleteLine() {
            var id = $("#LineDelete option:selected").attr('id');
            var linename = $("#LineDelete option:selected").text();
    
            var queryTask = new esri.tasks.QueryTask(FeatLineURL);
            var query = new esri.tasks.Query();
            query.where = "linename = '" + linename + "'";
            query.returnGeometry = true;
            query.outFields = ['*'];
            queryTask.execute(query, positionLineDelete);
            
            function positionLineDelete(featureSet) {
                var feature = featureSet.features;
                for (var i = 0; i < feature.length; i++) {
                    var graphic = feature[i];
                    if (graphic.attributes.OBJECTID == id) {
    
                        setTimeout(function () {
                            /**
                             * 删除线路
                             * 要素图层（不可错）：图层1     线路图层
                             */
                            drawlayer = felayers[1];
                            polylineAtt = {};
                            for (var i = 0; i < length; i++) {
                                var item = felayers[1].fields[i].name;
                                polylineAtt[item] = "";
                            }
                            //删除
                            polylineAtt["OBJECTID"] = graphic.attributes["OBJECTID"];
                            var newGraphic = new esri.Graphic(graphic.geometry, null, polylineAtt);
                            drawlayer.applyEdits(null, null, [newGraphic], function () {
                                alert("线路删除成功");
                            })
                        }, 2000)
                        //根据类型设置显示样式
                        switch (graphic.geometry.type) {
                            case "point":
                                var point = new esri.geometry.Point(pointX, pointY);
                                var labelSymbol = new esri.symbol.PictureMarkerSymbol('/Content/ceshi.gif', 25, 25);
                                var marker2 = new esri.Graphic(point, labelSymbol);
                                map.graphics.add(marker2);
    
                                break;
                            case "polyline":
                                var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1);
                                break;
                            case "polygon":
                                var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
                                break;
                        }
                        //设置显示样式
                        graphic.setSymbol(symbol);
                        //添加到graphics进行高亮显示
                        map.graphics.add(graphic);
                    }
                }
                var sGeometry = graphic.geometry;
                //当点击的名称对应的Geometry为点类型时进行地图中心定位显示
                if (sGeometry.type == "point") {
                    //var hsymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]),2), new dojo.Color([255,0,0,0.25]));
                    //sGrapphic.setSymbol(hsymbol);
                    var cPoint = new esri.geometry.Point();
                    console.log(sGeometry)
                    cPoint.x = sGeometry.x;
                    cPoint.y = sGeometry.y;
                    map.centerAt(cPoint);
                }
                //当点击的名称对应的Geometry为线或面类型时获取Geometry的Extent进行中心定位显示
                else {
                    var sExtent = sGeometry.getExtent();
                    map.setExtent(sExtent);
                }
            }
        }
    
    </script>