增加图层要素，要求图层为FeatureServer
添加站点或线路，需先将站点和线路FeatureServer图层加载至地图上
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>InsertGraphic</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;
}
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'
require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/graphic","esri/layers/FeatureLayer",
"esri/toolbars/draw","dojo/domReady!"],
function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer, Graphic, FeatureLayer, Draw) {
/* code goes here */
map = new Map("map", {
center: [120.075892, 31.526844],
zoom: 8,//缩放等级
logo: false, //logo
slider: false, //缩小按钮
});
//-------------增加站点时需用到，不可少-------------
//获取点击位置的座标
dojo.connect(map, "onLoad", function () {
dojo.connect(map, "onMouseDown", showCoordinates);
});
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">
<button onclick="showbtnXZ(0)">新增站点</button>
<button onclick="showbtnXZ(1)">新增线路</button>
</div>
</body>
</html>
<script>
var layerx;
var layery;
var OB;
//显示座标的回调函数，参数是evt
function showCoordinates(evt) {
//从事件中获取mapPoint
layerx = Math.round(evt.mapPoint.getLongitude() * 10000000) / 10000000;
layery = Math.round(evt.mapPoint.getLatitude() * 10000000) / 10000000;
}
//根据形参调用方法
function showbtnXZ(id) {
//showbtnXZ(0)：代表站点
if (id == 0) {
OB = felayers[id].graphics.length;
console.log(OB)
add(id);
}
//showbtnXZ(1)：代表线路
if (id == 1) {
OB = felayers[id].graphics.length;
add(id);
}
}
var drawlayer;
var polylineAtt;
var drawToolbar;
//根据id进行增加站点 或 线路
function add(id) {
//要素图层
drawlayer = felayers[id];
//要素的属性结构——这里应该改为自动的
polylineAtt = {};
for (var i = 0; i < felayers[id].fields.length; i++) {
var item = felayers[id].fields[i].name;
//console.log(item)
//原字段转换为中文
if (item == "bianhao") {
item = "编号";
}
if (item == "linename") {
item = "线路名称";
}
if (item == "stationnam") {
item = "站点名称";
}
if (item == "type") {
item = "类型";
}
if (item == "QDZ") {
item = "起点站";
}
if (item == "ZDZ") {
item = "终点站";
}
if (item == "Distance") {
item = "距离";
}
if (item == "Time") {
item = "时间";
}
polylineAtt[item] = "";
}
var geometryType = drawlayer.geometryType;
//实例化一个绘图工具
drawToolbar = new esri.toolbars.Draw(map);
//选择绘制要素,并开始绘制
switch (geometryType) {
case "esriGeometryPoint":
drawToolbar.activate(esri.toolbars.Draw.POINT);
break;
case "esriGeometryPolyline":
drawToolbar.activate(esri.toolbars.Draw.POLYLINE);
break;
case "esriGeometryPolygon":
drawToolbar.activate(esri.toolbars.Draw.POLYGON);
break;
}
//绘制完成事件
drawToolbar.on("draw-end", function (evt) {
//绘制结束
drawToolbar.deactivate();
//投影座标系（3857）转地理座标系（4326）
features = evt;
features.geometry = esri.geometry.webMercatorToGeographic(evt.geometry);
features.target = evt.target;
var content = "";
for (item in polylineAtt) {
//经纬度自动添加
if (item == "X" || item == "Y") {
if (item == "X") {
content += "<p style='float:right'>" + item + "：<input type=txt id=d" + item + " value=" + layerx + " readonly=readonly></p>";
}
if (item == "Y") {
content += "<p style='float:right'>" + item + "：<input type=txt id=d" + item + " value=" + layery + " readonly=readonly></p>";
}
}
else {
if (item == "OBJECTID") {
content += "<p style='float:right'>" + item + "：<input type=txt id=d" + item + " value=" + (OB * 1 + 1) + " readonly=readonly></p>";
}
else {
content += "<p style='float:right'>" + item + "：<input type=txt id=d" + item + "></p>";
}
}
}
//content = content + "<iframe name=hd style=display:none;></iframe>";
//content = content + "<form id='Form1' method='post' action='upload.ashx' enctype='multipart/form-data' target='hd'>"
//content = content + "<input id=txt name=Test style=display:none /><input type=file id=file1 name=upfile /><input type=submit value=上传 onclick='return checksn()' /></form>"
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=create(features," + id + ") 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=quxiao() value=取消 /><p>";
map.infoWindow.setTitle("新增");
map.infoWindow.setContent(content);
map.infoWindow.show();
});
}
//-----------取消时的事件-----------
function quxiao() {
map.infoWindow.hide();
}
//--------新增时的事件--------
//需要注意的是必须为Graphic添加OBJECTID属性，并且类型为数值型
//Number();
function create(features, id) { //features：新增点的座标
//新增的字段
for (item in polylineAtt) { //polylineAtt：新增的站点的字段的详细信息
/**
* 清楚图层要素属性，进行重新赋值
*/
//---图层0：站点---
if (item == "OBJECTID") {
polylineAtt["OBJECTID"] = Number(document.getElementById("d" + item).value);
}
if (item == "X") {
polylineAtt["X"] = Number(document.getElementById("d" + item).value);
}
if (item == "Y") {
polylineAtt["Y"] = Number(document.getElementById("d" + item).value);
}
if (item == "编号") {
delete polylineAtt["编号"];
polylineAtt["bianhao"] = document.getElementById("d" + item).value;
}
if (item == "线路名称") {
delete polylineAtt["线路名称"];
polylineAtt["linename"] = document.getElementById("d" + item).value + "-(新增)";
}
if (item == "站点名称") {
delete polylineAtt["站点名称"];
polylineAtt["stationnam"] = document.getElementById("d" + item).value + "-(新增)";
}
if (item == "类型") {
delete polylineAtt["类型"];
polylineAtt["type"] = document.getElementById("d" + item).value + "-(新增)";
}
if (item == "上客流量") {
delete polylineAtt["上客流量"];
polylineAtt["上客流量"] = document.getElementById("d" + item).value;
}
if (item == "下客流量") {
delete polylineAtt["下客流量"];
polylineAtt["下客流量"] = document.getElementById("d" + item).value;
}
//---图层1：线路---
if (item == "OBJECTID") {
polylineAtt["OBJECTID"] = Number(document.getElementById("d" + item).value);
}
if (item == "编号") {
delete polylineAtt["编号"];
polylineAtt["bianhao"] = document.getElementById("d" + item).value;
}
if (item == "线路名称") {
delete polylineAtt["线路名称"];
polylineAtt["linename"] = document.getElementById("d" + item).value + "-(新增)";
}
if (item == "类型") {
delete polylineAtt["类型"];
polylineAtt["type"] = document.getElementById("d" + item).value + "-(新增)";
}
if (item == "起点站") {
delete polylineAtt["起点站"];
polylineAtt["QDZ"] = document.getElementById("d" + item).value;
}
if (item == "终点站") {
delete polylineAtt["终点站"];
polylineAtt["ZDZ"] = document.getElementById("d" + item).value;
}
if (item == "距离") {
delete polylineAtt["距离"];
polylineAtt["Distance"] = Number(document.getElementById("d" + item).value);
}
if (item == "时间") {
delete polylineAtt["时间"];
polylineAtt["Time"] = Number(document.getElementById("d" + item).value);
}
if (item == "x") {
delete polylineAtt["x"];
polylineAtt["x"] = Number(document.getElementById("d" + item).value);
}
if (item == "y") {
delete polylineAtt["y"];
polylineAtt["y"] = Number(document.getElementById("d" + item).value);
}
if (item == "公交客流量") {
delete polylineAtt["公交客流量"];
polylineAtt["公交客流量"] = Number(document.getElementById("d" + item).value);
}
if (item == "发车间隔") {
delete polylineAtt["发车间隔"];
polylineAtt["发车间隔"] = Number(document.getElementById("d" + item).value);
}
if (item == "车辆编号") {
delete polylineAtt["车辆编号"];
polylineAtt["车辆编号"] = Number(document.getElementById("d" + item).value);
}
}
map.infoWindow.hide();
//console.log(features) 新增点座标
//console.log(polylineAtt) 新增的站点的字段的详细信息
var newGraphic = new esri.Graphic(features.geometry, null, polylineAtt);
//map.graphics.add(features);
drawlayer.applyEdits([newGraphic], null, null, callback);
}
//回执函数callback
function callback(result) {
console.log(result)
if (result[0].success == true) {
alert("添加成功！");
}
else if (result[0].success != true) {
alert("添加失败！");
}
}
</script>
