修改圖層要素，要求圖層爲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>
