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

最新推荐文章于 2022-05-15 15:38:46 发布
最新推荐文章于 2022-05-15 15:38:46 发布
阅读量884 收藏
点赞数
分类专栏： # 地图__ArcGIS Api For JS 文章标签： arcgis server arcgis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jie_1997/article/details/106877736
版权

删除图层要素，要求图层为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>
风轻轻~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ArcGIS JS中featureLayer增删改查
HaHaHaHaHaMiGua的博客
07-12 542
ArcGIS JS中featureLayer增删改查
ArcGIS Javascript学习笔记（二）创建地图应用程序
阿狸的梦想的专栏
04-19 1129
介绍创建一个简单的地图界面 a) 页面样式以及api脚本的引用 使用ArcGIS JavaScript API 首先需要在HTML Head中引用两个外部文件：css样式文件与JavaScript脚本文件。 b)   脚本的编写 完成上面的API引用后，就可以在脚本标签中添加地图应用，因为ArcGIS JavaScript API是建立在D
【转】arcgis 10 JSAPI2.0编辑空间数据注意事项
weixin_30721899的博客
04-26 101
1.在使用编辑功能的时候必须把服务发布成feature Service （在服务的属性里面把feature access 选项勾选上）； 2.数据必须存放在sde里面，普通数据（点线面）不需要注册版本，如果要编辑几何网络等高级数据，则要注册版本； 3.确保代理页面已经添加到web服务器。详细可查看http://www.gisall.com/?uid-122747-action-viewspac...
ArcGIS API For Javascript之编辑服务器端图层(通过要素服务feature进行增删改查 )
u012123612的博客
12-15 8243
引言 需求服务器端图层编辑 1实现 2实现结果 21添加操作 22删除要素操作 23更新要素可以看到objectid1的alias属性为A区宿舍 24当修改之后点击查询按钮结果 3全部代码 1.引言      在现实需求中，我们不仅仅需要编辑客户端图层，也有可能去编辑服务器端图层，要想编辑服务器端的图层，必须要将地图发布为：要素服务。       如何发布要素服务请看：ArcGIS Serv
一文让你彻底掌握ArcGisJS地图管理的秘密
kiba518的博客
08-16 947
使用ArcGis开发地图 引用ArcGisJS 使用ArcGisJS开发地图，首先需要引入ArcGis的Js文件和CSS文件，引入方式有两种，一种是官网JS引用，一种是本地JS引用。如下： 官网JS引用 <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css"> &lt...
ArcGIS API for JavaScript实现分图层显示
GISXX
06-22 4022
文章首发于GISGO | GIS | 地理信息科学 - GIS研究中心：http://www.gisgo.top/ 大家都知道，当用ArcGIS发布地图服务时，是把整个地图文档所有图层都发布出去的，如果展示的时候只想显示某个图层怎么办呢？或许你会用FeatureLayer，这样做当然也能实现，但是在地图文档中设置的渲染样式将会失效，你得重新设置渲染，这样就费时费力了。其实在A...
ArcGIS API For Javascript之离线部署
wulafly的博客
04-12 2856
ArcGIS API For Javascript之离线部署
WebGIS从基础到开发实践代码(基于ArcGIS API for JavaScript)
06-08
2.1ArcGIS API for JavaScript版的Hello World 2.2ArcGIS API for JavaScript与Dojo 2.2.1ArcGIS API for JavaScript的构成 2.2.2ArcGIS API for JavaScript与Dojo的关系 2.3开发与调试工具 2.3.1集成开发环境 2.3.2...
ArcGIS For JavaScript4.8离线API
10-24
**ArcGIS for JavaScript 4.8 离线API详解** ArcGIS for JavaScript 是Esri公司推出的一款强大的地理信息系统（GIS）开发库，主要用于构建基于Web的地理信息应用。4.8版本是其一个重要的里程碑，提供了丰富的地图...
arcgis api for js大连地图路径导航系统.zip
最新发布
06-19
《ArcGIS API for JavaScript在大连地图路径导航系统中的应用详解》 ArcGIS API for JavaScript是Esri公司开发的一款强大的Web地图开发工具，它允许开发者在网页上创建交互式的地图应用程序。在“arcgis api for js...
JS使用ArcGis调用各种地图实例
01-23
通过深入学习ArcGIS JavaScript API文档和实践上述示例，你将能熟练地在你的Web应用中集成和控制各种地图服务。同时，不断更新和完善你的地图应用，以满足用户的需求和体验，这是成为一位优秀的WebGIS开发者的关键...
Arcgis Javascript（四）图层相关操作（获取、层级、添加、删除、清空）
yiyueqinghui的博客
10-21 7939
1，图层的获取 首先从map中获取layer主要是利用getLayer(id)这个方法，其中传入参数为layer的id（唯一字符串）； 这里的id是我们当时创建layer时创建的（如果不写会有默认id）。如下图。记住这个id，我们可以直接得到layer。 var graphicsLayer = new GraphicsLayer({id:'layer_id'}); var layer = ma...
ArcGIS API for JavaScript - FeatureLayer对要素进行applyEdits删除操作无效
idomyway的博客
12-01 1566
前言     在项目中，通过FeatureLayer的applyEdits方法实现对数据库要素的增删改查，在对要素进行增加和修改的时候都没问题， 但是在进行删除的时候一直无效，报noEdits错误。     全网查询了以后终于在https://blog.csdn.net/feeysus/article/details/39006757中找到了答案 解决方法     在一个页面中，不要对一个
arcgis js 移除某一个点_夯实JS系列变量、作用域和内存问题
weixin_36429993的博客
12-25 198
基本类型和引用类型在ECMAScript中，变量分为基本类型和引用类型两种。基本类型就是存储简单的数据段。而引用类型指的是那些可能由多个值构成的对象。在ECMAScript中，基本类型包括：Undefined、Null、Boolean、Number和String。这些基本类型的对象都是按值访问的。所以js中我们可以直接操作他们。但是引用类型如Object等，是按照引用来操作的。并非直接操...
arcgis api for javascript 3.33 清空、删除图层
YangZe的博客
10-09 3896
var nameRemoveLayer = ""; nameRemoveLayer = map.getLayer(图层ID); // 清空图层 nameRemoveLayer.clear(); // 删除图层 map.removeLayer(nameRemoveLayer)
arcgis api for js4.x 图层要素的增删改
baicai_123的专栏
08-18 2067
0、获取要编辑的图层，并加载到的视图上 self.editLayerServer = new FeatureLayer({ url: self.editLayerUrl, title: '待编辑图层', id: 'polygonMapServer', layerCNName: '待编辑图层', }) self.mapView.map.add(..
arcgis api for javascript 4.x, 删除绘制的点、线、面
mf_717714的博客
07-17 3346
1，在视图mapView 上添加的点线面 // 删除所有 mapView.graphics.removeAll(); // 删除一个 const pointGraphic = new Graphic({geometry, symbol}) mapView.graphics.remove(pointGraphic); // 删除多个 mapView.graphics.removeMany([pointGraphic, polylineGraphic]); 2, GraphicsLayer图层上的点线面
ARCGIS Server 10.4站点出错，重新创建站点，服务不需要重新发布
orange_lee1的博客
08-29 4848
在虚拟机里C盘安装arcgis server， 后来将E盘空间不足，将E盘扩容了，硬盘扩容的时候并没有动C盘，但扩容后ARCGIS server本身的服务和发布的服务都不见了，通过重启服务或修复ARCGIS Server均未解决。 Server自带的服务不见了。 已发布的数据服务也不可见：   判断是站点出问题了。 需重建站点，重建站点前备份配置文件：   解决办法：...
ArcGIS API for JavaScript SketchViewModel实现增加点、线、面、矩形、圆形与删除功能
QY1021371614的博客
05-15 2352
ArcGIS API for JavaScript SketchViewModel实现增加点、线、面、矩形、圆形与删除功能
ArcGIS API for Javascript 开发指南
在应用开发中，我们需要了解如何集成开发环境和 API，如何准备 ArcGIS API for Javascript 离线部署，如何使用智能提示等。 * 集成开发环境和 API：需要安装 Node.js、Dojo、ArcGIS API for Javascript 等工具和库...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值