ArcGIS API For JavaScript - 修改图层中的站点、线路

拼搏现实的明天。 2021-07-26 01:46 337阅读 0赞

## 修改图层要素，要求图层为FeatureServer ##

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

@{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>UpdateView</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", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolbars/edit", 
                "esri/layers/FeatureLayer", "dojo/_base/array", "dojo/_base/event","dojo/domReady!"],
                function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer, Edit, FeatureLayer, arrayUtils, event) {
                    /* 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）
                            }
                        }
                    });
                    //-------------双击线路进行修改，需先将线路图层加载到地图上-------------------
                    map.on("layers-add-result", initEditing);//不可少
                    //双击线路修改  initEditing的方法
                    function initEditing(evt) {
    
                        var currentLayer = null;
                        var layers = arrayUtils.map(evt.layers, function (result) {
                            return result.layer;
                        });
                        var editToolbar = new Edit(map);   //map:地图
                        editToolbar.on("deactivate", function (evt) {
                            currentLayer.applyEdits(null, [evt.graphic], null);
                        });
    
                        arrayUtils.forEach(layers, function (layer) {
                            var editingEnabled = false;
                            layer.on("dbl-click", function (evt) {
                                event.stop(evt);
                                //双击的要素不可为point
                                if (evt.graphic.geometry.type == "point") {
    
                                }
                                else {
                                    if (editingEnabled === false) {
                                        editingEnabled = true;
                                        editToolbar.activate(Edit.EDIT_VERTICES, evt.graphic);
                                    } else {
                                        currentLayer = this;
                                        editToolbar.deactivate();
                                        editingEnabled = false;
                                    }
                                }
                            });
                        });
                    }
    
                });
        </script>
    </head>
    <body>
        <div id="map"></div>
        <div class="list">
            <div>修改站点</div>
            <input type="text" id="updataStationSearchText" placeholder="请输入将要修改站点的名称关键字" />
            <button onclick="executeUpdataStation(dojo.byId('updataStationSearchText').value);">查询修改站点</button>
            <select id="StationUpdata" onchange="UpdataStation()"></select>
            <div class="content-title">修改线路</div>
            <input type="text" id="updataLineSearchText" placeholder="请输入将要修改线路的名称关键字" />
            <button onclick="executeUpdataLine(dojo.byId('updataLineSearchText').value);">查询修改线路</button>
            <select id="LineUpdata" onchange="UpdataLine()"></select>
        </div>
    </body>
    </html>
    <script>
        /**
         * 修改站点（FeatureServer图层）
         * 先查询，再修改
         * param updataStationSearchText
         */
        //执行executeUpdataStation方法，根据updataStationSearchText模糊查询站点
        function executeUpdataStation(updataStationSearchText) {
            var queryTask = new esri.tasks.QueryTask(FeatStationURL);
            var query = new esri.tasks.Query();
            query.where = ("stationnam like '%" + updataStationSearchText + "%'");
            query.returnGeometry = true;
            query.outFields = ["*"];
            queryTask.execute(query, addStationUpdata);
        }
        //执行addStationUpdata方法，将查询到的站点放入select中
        function addStationUpdata(featureSet) {
            var feature = featureSet.features;
            var innerhtml = "";
            var temp = [];
            for (var i = 0; i < feature.length; i++) {
                var graphic = feature[i];
                if (temp.indexOf(graphic.attributes.stationnam) == -1) {
                    temp.push(graphic.attributes.stationnam);
                    var StationId = graphic.attributes.OBJECTID;
                    innerhtml += '<option id="' + StationId + '" value="javascript:positionFeatureStation(' + '"' + updataStationSearchText + '"' + ')">' + graphic.attributes.stationnam + '</option>';
                }
            }
            document.getElementById("StationUpdata").innerHTML = '<option>---请选择---</option>' + innerhtml;
        }
    
        //根据站点select框所选的站点，进行定位显示，修改站点
        var pointX;
        var pointY;
        function UpdataStation() {
            var id = $("#StationUpdata option:selected").attr('id');
            var staname = $("#StationUpdata 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, postionStation);
    
            function postionStation(featureSet) {
                console.log(featureSet)
                var sGrapphic;
                var arr = [];
                var graphics = featureSet.features;
                for (var i = 0; i < graphics.length; i++) {
                    cGrapphic = graphics[i];
                    if ((cGrapphic.attributes) && cGrapphic.attributes.OBJECTID == id) {
                        pointX = cGrapphic.attributes.X;
                        pointY = cGrapphic.attributes.Y;
                        //要素图层
                        drawlayer = felayers[0];  //注意：图层不可错
                        polylineAtt = {};
                        for (var i = 1; i < felayers[0].fields.length; i++) {  //felayers[0]（站点）图层
                            //要素图层的字段名称
                            var item = felayers[0].fields[i].name;
                            console.log(item)
                            //图层字段转换为中文
                            if (item == "bianhao") {
                                item = "编号";
                            }
                            if (item == "linename") {
                                item = "线路名称";
                            }
                            if (item == "stationnam") {
                                item = "站点名称";
                            }
                            if (item == "type") {
                                item = "类型";
                            }
                            polylineAtt[item] = "";
                        }
                        var content = "";
                        var fields = "";
                        console.log(polylineAtt)
                        for (item in polylineAtt) {
                            if (item == "OBJECTID") {
                                fields = "OBJECTID";
                            }
                            if (item == "编号") {
                                fields = "bianhao";
                            }
                            if (item == "线路名称") {
                                fields = "linename";
                            }
                            if (item == "站点名称") {
                                fields = "stationnam";
                            }
                            if (item == "类型") {
                                fields = "type";
                            }
                            if (item == "X") {
                                fields = "X";
                            }
                            if (item == "Y") {
                                fields = "Y";
                            }
                            if (item == "上客流量") {
                                fields = "上客流量";
                            }
                            if (item == "下客流量") {
                                fields = "下客流量";
                            }
                            content += "<p style='float:right'>" + item + "：<input type=txt id=d" + item + " value=" + cGrapphic.attributes[fields] + "></p>";
                            arr.push(cGrapphic.attributes[fields]);
                        }
                        //修改框
                        content += "<p style='float:right'><input type=button style='float:right;width:115px;line-height:25px;background-color:#0170c1;color:#fff;border: 1px solid #fff;border-radius: 5px;' id =newok onclick=updatefeSta(cGrapphic) value=修改  /><input type=button style='float:right;width:115px;line-height:25px;background-color:#0170c1;color:#fff;border: 1px solid #fff;border-radius: 5px;' id =qx onclick=quxiaoSta() value=取消  /><p>";
                        //content += "<input type=button id =newok onclick=updatefe(cGrapphic) value=修改  />";
                        if (arr[0] == undefined || cGrapphic.attributes[fields] != undefined) {
    
                        }
                        if (arr[arr.length - 1] == cGrapphic.attributes[fields] && cGrapphic.attributes[fields] != undefined) {
                            map.infoWindow.setTitle("修改");
                            map.infoWindow.setContent(content);
                            map.infoWindow.show();
                        }
                        //根据类型设置显示样式
                        switch (cGrapphic.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;
                        }
                        //设置显示样式
                        cGrapphic.setSymbol(symbol);
                        //添加到graphics进行高亮显示
                        map.graphics.add(cGrapphic);
                        sGrapphic = cGrapphic;
                        break;
                    }
                }
                var sGeometry = sGrapphic.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);
                }
                else {
                    var sExtent = sGeometry.getExtent();
                    map.setExtent(sExtent);
                }
            }
        }
    
        /**
         * 取消时的事件
         */
        function quxiaoSta() {
            map.infoWindow.hide();
        }
        /**
         * 修改框中修改的方法updatef
         */
        //修改按钮事件
        function updatefeSta(graphic) { 
            console.log(graphic)
            var isUpdate = false;
            //console.log(polylineAtt)
            for (item in polylineAtt) {
                //所选站点修改字段信息
                var getvalue = document.getElementById("d" + item).value;
                if (item == "OBJECTID") {
                    item = "OBJECTID";
                }
                if (item == "编号") {
                    item = "bianhao";
                }
                if (item == "线路名称") {
                    item = "linename";
                }
                if (item == "站点名称") {
                    item = "stationnam";
                }
                if (item == "类型") {
                    item = "type";
                }
                if (item == "X") {
                    item = "X";
                }
                if (item == "Y") {
                    item = "Y";
                }
                if (item == "上客流量") {
                    item = "上客流量";
                }
                if (item == "下客流量") {
                    item = "下客流量";
                }
                var setvalue = graphic.attributes[item];
                if (getvalue == setvalue) {
                    polylineAtt[item] = setvalue;
                }
                else {
                    polylineAtt[item] = getvalue;
                    graphic.attributes[item] = getvalue;
                    isUpdate = true;
                }
            }
            console.log(polylineAtt)
            if (isUpdate = true) {
                var newGraphic = new esri.Graphic(graphic, null, polylineAtt);
                drawlayer.applyEdits(null, [graphic], null, function () {
                    alert("修改成功！");
                });
            }
            else {
                alert("没有修改！");
            }
            map.infoWindow.hide();
        }
    
    
        /**
         * 修改线路（FeatureServer图层）
         * 先查询,再修改
         * param {any} updataLineSearchText
         */
        //执行executeUpdataLine方法，根据updataLineSearchText模糊查询线路
        function executeUpdataLine(updataLineSearchText) {
            var queryTask = new esri.tasks.QueryTask(FeatLineURL);
            var query = new esri.tasks.Query();
            query.where = ("linename like'%" + updataLineSearchText + "%'");
            query.outFields = ['*'];
            query.returnGeometry = true;
            queryTask.execute(query, addLineUpdata);
        }
        //执行addLineUpdata方法，将查询到的线路放入select中
        function addLineUpdata(featureSet) {
            var feature = featureSet.features;
            var temp = [];
            var innerHtml = "";
            for (var i = 0; i < feature.length; i++) {
                var graphic = feature[i];
                var LineID = graphic.attributes.OBJECTID;
                if (temp.indexOf(graphic.attributes.linename) == -1) {
                    temp.push(graphic.attributes.linename);
                    innerHtml += '<option id="' + LineID + '" value="javascript:postionLineUpdata(' + '"' + updataLineSearchText + '"' + ')">' + graphic.attributes.linename + '</option>';
                }
            }
            document.getElementById("LineUpdata").innerHTML = '<option>---请选择---</option>' + innerHtml;
        }
    
        //根据站点select框所选的线路，进行定位显示，修改线路
        function UpdataLine() {
            var id = $("#LineUpdata option:selected").attr('id');
            var linename = $("#LineUpdata 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, positionLine);
    
            function positionLine(featureSet) {
                var feature = featureSet.features;
                var arr = [];
                var grphic;
                for (var i = 0; i < feature.length; i++) {
                    graphic = feature[i];
                    if ((graphic.attributes) && graphic.attributes.OBJECTID == id) {
                        //要素图层
                        drawlayer = felayers[1];  //注意：图层不可错
                        polylineAtt = {};
                        for (var i = 1; i < felayers[1].fields.length; i++) {  //felayers[1]（线路）图层
                            var item = felayers[1].fields[i].name;
                            //原字段转换为中文
                            if (item == "bianhao") {
                                item = "编号";
                            }
                            if (item == "linename") {
                                item = "线路名称";
                            }
                            if (item == "type") {
                                item = "类型";
                            }
                            if (item == "QDZ") {
                                item = "起点站";
                            }
                            if (item == "ZDZ") {
                                item = "终点站";
                            }
                            if (item == "Distance") {
                                item = "距离";
                            }
                            if (item == "Time") {
                                item = "时间";
                            }
                            polylineAtt[item] = "";
                        }
                        var content = "";
                        var fields = "";
                        for (item in polylineAtt) {
                            if (item == "OBJECTID") {
                                fields = "OBJECTID";
                            }
                            if (item == "编号") {
                                fields = "bianhao";
                            }
                            if (item == "线路名称") {
                                fields = "linename";
                            }
                            if (item == "类型") {
                                fields = "type";
                            }
                            if (item == "起点站") {
                                fields = "QDZ";
                            }
                            if (item == "终点站") {
                                fields = "ZDZ";
                            }
                            if (item == "距离") {
                                fields = "Distance";
                            }
                            if (item == "时间") {
                                fields = "Time";
                            }
                            if (item == "x") {
                                fields = "x";
                            }
                            if (item == "y") {
                                fields = "y";
                            }
                            if (item == "公交客流量") {
                                fields = "公交客流量";
                            }
                            if (item == "发车间隔") {
                                fields = "发车间隔";
                            }
                            if (item == "车辆编号") {
                                fields = "车辆编号";
                            }
                            content += "<p style='float:right'>" + item + "：<input type=txt id=d" + item + " value=" + graphic.attributes[fields] + "></p>";
                            arr.push(graphic.attributes[fields]);
                        }
                        //修改框
                        content += "<p style='float:right'><input type=button style='float:right;width:115px;line-height:25px;background-color:#0170c1;color:#fff;border: 1px solid #fff;border-radius: 5px;' id =newok onclick=updateline(graphic) value=修改  /><input type=button style='float:right;width:115px;line-height:25px;background-color:#0170c1;color:#fff;border: 1px solid #fff;border-radius: 5px;' id =qx onclick=quxiaoLine() value=取消  /><p>";
                        //content += "<input type=button id =newok onclick=updatefe(cGrapphic) value=修改  />";
                        if (arr[0] == undefined || graphic.attributes[fields] != undefined) {
    
                        }
                        if (arr[arr.length - 1] == graphic.attributes[fields] && graphic.attributes[fields] != undefined) {
                            map.infoWindow.setTitle("修改");
                            map.infoWindow.setContent(content);
                            map.infoWindow.show();
                        }
                        //根据类型设置显示样式
                        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]), 3);
                                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;
                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);
                }
                else {
                    var sExtent = sGeometry.getExtent();
                    map.setExtent(sExtent);
                }
            }
        }
    
        /**
         * 取消时的事件
         */
        function quxiaoLine() {
            map.infoWindow.hide();
        }
        /**
         * 修改框中修改的方法updatef
         */
        //上面update（修改）的方法
        function updateline(graphic) {
            var isUpdate = false;
            console.log(polylineAtt)
            for (item in polylineAtt) {
                //所选的想要修改的站点的字段信息
                var getvalue = document.getElementById("d" + item).value;
                if (item == "OBJECTID") {
                    item = "OBJECTID";
                }
                if (item == "编号") {
                    item = "bianhao";
                }
                if (item == "线路名称") {
                    item = "linename";
                }
                if (item == "类型") {
                    item = "type";
                }
                if (item == "起点站") {
                    item = "QDZ";
                }
                if (item == "终点站") {
                    item = "ZDZ";
                }
                if (item == "距离") {
                    item = "Distance";
                }
                if (item == "时间") {
                    item = "Time";
                }
                if (item == "x") {
                    item = "x";
                }
                if (item == "y") {
                    item = "y";
                }
                if (item == "公交客流量") {
                    item = "公交客流量";
                }
                if (item == "发车间隔") {
                    item = "发车间隔";
                }
                if (item == "车辆编号") {
                    item = "车辆编号";
                }
                var setvalue = graphic.attributes[item];
                if (getvalue == setvalue) {
                    polylineAtt[item] = setvalue;
                }
                else {
                    polylineAtt[item] = getvalue;
                    graphic.attributes[item] = getvalue;
                    isUpdate = true;
                }
            }
            if (isUpdate = true) {
                var newGraphic = new esri.Graphic(graphic, null, polylineAtt);
                drawlayer.applyEdits(null, [graphic], null, function () {
                    alert("修改成功！");
                });
            }
            else {
                alert("没有修改！");
            }
            map.infoWindow.hide();
        }
    </script>