arcgis api for js3.x在地图上绘制地块，为要素添加字段值，并上传到sde数据库。
前提：FeatureLayer的url必须是发布的是要素服务，要素服务在SDE数据库中发布，或者在发布要素服务时注册一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://localhost/3.34/3.34/esri/css/esri.css">
<script src="http://localhost/3.34/3.34/init.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.dkInfoDiv {
position: absolute;
display: none;
height: 200px;
width: 300px;
z-index: 100;
top: 100px;
left: 150px;
}
.dkInfoHeadDiv {
position: absolute;
background-color: #4d4dff;
height: 12%;
width: 100%;
top: 0px;
}
.dkInfoBodyDiv {
position: absolute;
background-color: #e0e0d1;
height: 88%;
width: 100%;
bottom: 0px;
}
.btnUploadSDE {
position: absolute;
background-color: #e0e0d1;
bottom: 5%;
right: 5%;
}
</style>
<script>
require([
"esri/map",
"esri/SpatialReference",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/MapImageLayer",
"esri/layers/GraphicsLayer",
"esri/toolbars/navigation",
"esri/toolbars/draw",
"esri/geometry/Circle",
"esri/units",
"esri/graphic",
"esri/geometry/Extent",
"esri/geometry/geodesicUtils",
"esri/geometry/webMercatorUtils",
"esri/tasks/GeometryService",
"esri/tasks/AreasAndLengthsParameters",
"esri/tasks/LengthsParameters",
"esri/tasks/geometry",
"esri/tasks/PrintTask",
"esri/tasks/PrintTemplate",
"esri/tasks/PrintParameters",
"esri/symbols/LineSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/MarkerSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/TextSymbol",
"esri/symbols/Font",
"esri/dijit/editing/Add",
"esri/dijit/editing/Delete",
"esri/dijit/editing/Update",
"esri/InfoTemplate",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/tasks/FindResult",
"esri/tasks/Geoprocessor",
"esri/tasks/FeatureSet",
"esri/geometry/geometryEngine",
"esri/geometry/Point",
"esri/Color",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
], function(
Map,
SpatialReference,
ArcGISDynamicMapServiceLayer,
ArcGISTiledMapServiceLayer,
FeatureLayer,
MapImageLayer,
GraphicsLayer,
Navigation,
Draw,
Circle,
Units,
Graphic,
Extent,
geodesicUtils,
webMercatorUtils,
GeometryService,
AreasAndLengthsParameters,
LengthsParameters,
Geometry,
PrintTask,
PrintTemplate,
PrintParameters,
LineSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
PictureMarkerSymbol,
MarkerSymbol,
SimpleMarkerSymbol,
TextSymbol,
Font,
Add,
Delete,
Update,
InfoTemplate,
QueryTask,
Query,
IdentifyTask,
IdentifyParameters,
FindTask,
FindParameters,
FindResult,
Geoprocessor,
FeatureSet,
geometryEngine,
Point,
Color,
dom,
on
) {
var startExtent = new esri.geometry.Extent(394447.65239553, 2813852.1189, 491999.92010447, 2862729.8697, new esri.SpatialReference(4549));
//创建地图
var map = Map("viewDiv", {
//extent: startExtent,
basemap: "topo",
center: [120.395907, 36.112175],
zoom: 11,
nav: false,
slider: false,
isDoubleClickZoom: false,
logo: false
});
var ImageMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost/:6080/arcgis/rest/services/qingdao/MapServer");
map.addLayer(ImageMapLayer);
var graphicLayer = new esri.layers.GraphicsLayer({
opacity: 0.6,
visible: true
});
var toolbar = new Draw(map, {
tooltipOffset: 20,
drawTime: 90
});
//toolbar.deactivate();
// toolbar.on("draw-end", addToMap);
// function addToMap(evt) {
// var graphic = new Graphic(evt.geometry, symbol);
// map.graphics.add(graphic);
// };
var DrawSel = true;
$("#drawBtn").click(function() {
if (DrawSel == true) {
//改变按钮颜色
$(this).css("background-color", "#00ffff");
//$(this).css("background-color", "transparent");
//为对象注册事件
toolbar.activate(esri.toolbars.Draw.POLYGON);
dojo.connect(toolbar, "onDrawEnd", function(geometry) {
var symbol = new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color("#0000ff"),
1
);
var fill = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
symbol,
new Color("#ff0000"),
2
);
var graphic = new Graphic(geometry, fill);
graphicLayer.add(graphic);
map.addLayer(graphicLayer);
});
DrawSel = false;
} else {
toolbar.deactivate();
$(this).css("background-color", "#F8F8F8");
DrawSel = true;
}
});
$("#clearBtn").click(function() {
graphicLayer.clear();
});
//打开输入地块信息框
$("#uploadBtn").click(function() {
$(this).css("background-color", "#00ffff");
map.on("click", function(res) {
var geometry = res.graphic.geometry;
var tempGraphicLayer = new esri.layers.GraphicsLayer({
opacity: 1,
visible: true
});
var symbol = new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color("#ff00ff"),
5
);
var graphic = new Graphic(geometry, symbol);
tempGraphicLayer.add(graphic);
map.addLayer(tempGraphicLayer);
$(".dkInfoDiv").css("display", "block");
var mj = $(".dkmj").val();
var xmmc = $(".dkxmmc").val();
var pid = $(".dkpid").val();
$(".btnUploadSDE").click(function() {
if (mj != null && mj != null && mj != null) {
uploadFeaturesToSDE(geometry, mj, xmmc, pid);
} else {
alert("请输入地块信息！");
}
});
});
});
//关闭地块信息框
$(".closeDkInfoDiv").click(function() {
$(".dkInfoDiv").css("display", "none");
});
function uploadFeaturesToSDE(geometry, mj, xmmc, pid) {
//console.log(graphicLayer.graphics);
//要素服务
var drawUpFeaturesLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/uoloadLand/FeatureServer/0");
//var graphicsArr = graphicLayer.graphics;
var attr = {
"AREA": mj,
"XMMC": xmmc,
"PID": pid
};
var inputfeature = {
"attribute": attr,
"geometry": geometry
};
var graphic = new esri.Graphic(inputfeature);
var features = [];
features.push(graphic);
drawUpFeaturesLayer.applyEdits(features, null, null, addResult, ErrorLog);
function addResult(result) {
if (result != null) {
if (result[0]["success"] == true) {
alert("添加成功！")
}
}
};
function ErrorLog(result) {
alert("添加失败！" + JSON.stringify(result));
}
}
});
</script>
</head>
<body>
<div id="viewDiv">
<button id="drawBtn">绘制</button>
<button id="clearBtn">清除</button>
<button id="uploadBtn">上传到SDE</button>
<div class="dkInfoDiv">
<div class="dkInfoHeadDiv">
<p style="position: absolute;left:2px;top:-12px;">地块信息</p>
<img class="closeDkInfoDiv" style="position: absolute;right:2px;top:0px;" src="" alt="X">
</div>
<div class="dkInfoBodyDiv">
<p>面积：<input type="text" class="dkmj" style="position: absolute; left:25%;" placeholder="请输入地块面积"></p>
<p>项目名称：<input type="text" class="dkxmmc" style="position: absolute;left:25%;" placeholder="请输入项目名称"></p>
<p>PID：<input type="text" class="dkpid" style="position: absolute;left:25%;" placeholder="请输入项目PID"></p>
<button class="btnUploadSDE">上传</button>
</div>
</div>
</div>
</body>
</html>
要素类：
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
