arcgis 要素服务增删改查

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>WebGIS</title>
        <link rel="stylesheet" type="text/css" href="../3.27/dijit/themes/tundra/tundra.css" />
        <link rel="stylesheet" type="text/css" href="../3.27/esri/css/esri.css" />
        <script type="text/Javascript" src="../3.27/init.js"></script>
        <style type="text/css">
            .MapClass {
                width: 100%;
                height: 500px;
                border: 1px solid #000;
            }
        </style>
        <script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">
            var map;
            require(["esri/map",
                    "dojo/on",
                    "dojo/query",
                    "esri/layers/ArcGISDynamicMapServiceLayer",
                    "esri/toolbars/draw",
                    "esri/layers/FeatureLayer",
                    "esri/graphic", "esri/dijit/editing/Add",
                    "esri/dijit/editing/Delete", "esri/dijit/editing/Update", "esri/tasks/query", "dojo/json",
                    'esri/Evented',
                    'esri/tasks/PrintTemplate',
                    'esri/tasks/PrintTask',
                    'esri/tasks/PrintParameters',
                    'esri/request',
                    'esri/config',
                    'dojo/_base/array',
                    'dojo/dom',
                    'dojo/parser',
                    "esri/InfoTemplate",
                    "dojo/domReady!"
                ],
                function(Map, on, query, ArcGISDynamicMapServiceLayer, Draw, FeatureLayer, Graphic, Add, Delete, Update, Query,
                    jsonUtil,
                    Evented,
                    PrintTemplate,
                    PrintTask,
                    PrintParameters,
                    esriRequest,
                    esriConfig,
                    arrayUtils,
                    dom,
                    parser,
                    InfoTemplate
                ) {


                    var featureUrl = "http://localhost:6080/arcgis/rest/services/ZC/aa/FeatureServer/0";
                    var baseUrl = "http://localhost:6080/arcgis/rest/services/ZC/zc/MapServer";


                    //map = new esri.Map("MyMapDiv");
                    map = new Map("MyMapDiv", {
                        basemap: 'osm',
                        center: [113.851625, 23.373552],
                        zoom: 10
                    })
                    var layer = new ArcGISDynamicMapServiceLayer(baseUrl);
                    //map.addLayer(layer);
                    var infoTemplate = new InfoTemplate("Attributes", "name:${name}");
                    var layers = new FeatureLayer(featureUrl, {
                        id: "lay",
                        mode: FeatureLayer.MODE_SNAPSHOT,
                        infoTemplate: infoTemplate,
                        outFields: ["*"]
                    });
                    map.addLayer(layers);
                    /*map.on('click',function(evt){
                        console.log(evt.mapPoint);
                    })*/

                    //用于操作的要素图层，注意我们是操作的宿舍楼图层
                    var featureLayer = new FeatureLayer(featureUrl, {
                        mode: FeatureLayer.MODE_SNAPSHOT,
                        //              infoTemplate: infoTemplate,
                        outFields: ["*"]
                    });
                    //map.addLayer(featureLayer);
                    //在添加要素时，利用Draw工具获得geometry对象
                    var d = new Draw(map, {
                        showTooltips: true
                    });
                    //要操作的graphic
                    var g;
                    query("button").on("click", function(event) {
                        debugger;
                        var value = this.innerHTML;
                        switch (value) {
                            case "添加要素":
                                d.activate(Draw.POLYGON);
                                /*var aajson = {
                        geometry:{
                            spatialReference: {wkid: 4326, latestWkid: 4326},
                            x:  "113.05923821722959",
                            y: "23.839534074518017"
                        },
                        symbol:null,
                        attributes:{
                            //"OBJECTID": 227,
                            "农作物输出":"" ,
                            "土壤本底值": "0.132294",
                            "大气沉降": "0.036585",
                            "年净累积率": "0.000436",
                            "年净累积量": "1.169477",
                            "灌溉水输入": "1.098019",
                            "点位编号": "333-33-33",
                            "纬度": "23.83083",
                            "经度": "113.17028",
                            "肥料输入": "0.280426"
                        }
                    }
                    var graphic = new Graphic(aajson);
                    
                    var add=new Add({
                        "featureLayer":featureLayer,//给哪一个要素图层添加要素
                        "addedGraphics":[graphic]    //用于添加的要素
                    })
                    //执行添加函数
                    add.performRedo();
                    //刷新视图
                    layer.refresh();*/
                                break;
                            case "删除要素":
                                //创建Graphic对象，删除OBJECTID为34的元素，
                                //因为OBJECTID是主键，所以只需要指定主键即可
                                //                  var data =[];
                                //                  for(var i=0;i<227;i++){
                                //                      var gg=new Graphic("","",{
                                //                      "OBJECTID":i
                                //                      //点位编号: "333-33-33"
                                //                  });
                                //                      data.push(gg)
                                //                  }

                                delEle();
                                g = new Graphic("", "", {
                                    "OBJECTID": 2
                                    //点位编号: "333-33-33"
                                });
                                //创建删除对象
                                var de = new Delete({
                                    "featureLayer": featureLayer,
                                    "deletedGraphics": [g]
                                    //"deletedGraphics":data
                                });
                                //执行删除结果
                                //de.performRedo();
                                //刷新图层
                                //layer.refresh();
                                break;
                            case "修改要素":
                                //用于修改要素的函数,查询更新为36的要素
                                updateFeature(1);
                                break;
                            case "查询要素":
                                //用于查询要素的函数，查询主键为36的要素
                                searchFeather(1);
                                break;
                        }
                    });

                    function delEle() {
                        var html = "";
                        for (var i = 0; i < map.getLayer("lay").graphics.length; i++) {

                            html += '<option value="' + map.getLayer("lay").graphics[i].attributes["OBJECTID"] + '">' + map.getLayer("lay")
                                .graphics[i].attributes["OBJECTID"] + '</option>'
                        }
                        $("#sel").html(html);
                        $("#sel").show();
                    }
                    $("#sel").change(function() {
                        //alert($(this).val())
                        g = new Graphic("", "", {
                            "OBJECTID": $(this).val()
                            //点位编号: "333-33-33"
                        });
                        //创建删除对象
                        var de = new Delete({
                            "featureLayer": featureLayer,
                            "deletedGraphics": [g]
                            //"deletedGraphics":data
                        });
                        //执行删除结果
                        de.performRedo();
                        //刷新图层
                        setTimeout(function() {
                            layers.refresh();
                        }, 2000)
                        $("#sel").hide();
                    })


                    //当画图完毕时，添加要素
                    on(d, "draw-complete", function(result) {
                        //要素只赋予了geometry，属性信息为空
                        var infoTemplate = new InfoTemplate("Attributes", "name:${name}");
                        var graphic = new Graphic(result.geometry, null, {
                            "name": "tt"
                        }, infoTemplate);
                        //var graphic = new Graphic(result.geometry, null,{});
                        var add = new Add({
                            "featureLayer": featureLayer, //给哪一个要素图层添加要素
                            "addedGraphics": [graphic] //用于添加的要素
                        })

                        //执行添加函数
                        add.performRedo();
                        //刷新视图
                        setTimeout(function() {
                            layers.refresh();
                        }, 2000)
                        //layers.refresh();
                        //关闭绘图对象
                        d.deactivate();
                    });
                    //根据id修改要素
                    function updateFeature(id) {
                        //注意:（第二个参数）这里传入一个回调函数，用于处理查询出来的数据
                        searchFeather(id, function(result) {
                            //获得旧的要素
                            var oldgraphic = result[0];
                            //新的要素
                            //var newgraphic=new Graphic(oldgraphic.toJson());
                            var oldjson = oldgraphic.toJson();
                            oldjson.attributes["name"] = "kk"
                            var newgraphic = new Graphic(oldjson);
                            //将alias属性修改为:修改后的A区宿舍
                            //newgraphic.attributes.农作物输出="0.245553";
                            //创建更新对象
                            var update = new Update({
                                "featureLayer": featureLayer,
                                "postUpdatedGraphics": [newgraphic], //修改之后的要素
                                "preUpdatedGraphics": [oldgraphic] //修改之前的要素
                            })
                            //执行刷新操作
                            update.performRedo();
                            //刷新视图
                            //layer.refresh();
                            setTimeout(function() {
                                layers.refresh();
                            }, 2000)
                            console.log("修改成功");

                        })

                    }
                    //根据id查询要素
                    function searchFeather(id, callback) {
                        //得到要素图层的主键属性
                        var idProperty = featureLayer.objectIdField;
                        //定义查询参数
                        var query = new Query();
                        //是否返回几何形状
                        query.returnGeometry = false;
                        //图层的主键名称（根据自己要求修改）
                        //query.objectIds = [id];
                        //查询条件1=1意思是：只根据主键查询，忽略where子句
                        query.where = "1=1";
                        //进行查询
                        featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(result) {
                            //如果callback不存在，说明仅仅是查询操作
                            if (!callback) {
                                alert(result.length);
                                //因为我们根据主键查询，一定只有一个元素
                                var graphic = result[0];
                                //获得属性
                                var attributes = graphic.attributes;
                                //得到该属性信息转换成字符串
                                var result = jsonUtil.stringify(attributes)
                                //将结果弹出一下
                                alert(result);
                            } else //如果callback存在，说明是更新操作
                            {
                                callback(result);
                            }

                        });
                    }




                });


        </script>
    </head>
    <body>
        <div id="MyMapDiv" class="MapClass"></div>
        <button class="btn">添加要素</button>
        <button class="btn">删除要素</button>
        <button class="btn">修改要素</button>
        <button class="btn">查询要素</button>
        <select id='sel' style='display: none;'>
            <option value="请选择"></option>
        </select>
    </body>
</html>
复制代码

 

posted @   小鱼写代码的过往  阅读(163)  评论(0)  编辑  收藏  举报
相关博文：
· arcgis for js 4.25 加载缓存服务
· arcgis for js 4.x wmts切片图层服务加载
· arcgis 添加要素并获取objectId
· Acrgis jsapi 地图基本属性 事件 工具 测距等
· ArcGIS常用属性查询
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示
点击右上角即可分享
微信分享提示