增加圖層要素，要求圖層爲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>
