修改图层要素，要求图层为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>
5358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
