基于Arcgis for Js的web GIS数据在线采集简介
时间:2022-06-13
本文章向大家介绍基于Arcgis for Js的web GIS数据在线采集简介,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在前一篇博文“Arcgis for js之WKT和geometry转换”中实现了wkt和geometry之间的相互转化,博文原文地址为:http://blog.csdn.net/gisshixisheng/article/details/44057453。在本节,接上文,简单讲述基于Arcgis for Js的web GIS数据在线采集。
实现数据的在线采集,最主要的是数据的存储,即将采集到的数据的geometry对象保存下来,并后续可以转换为shp数据。在本文,我的处理方式为将前段绘制的geometry对象转换为wkt形式存储在数据库中,在oracle数据库中,用clob存储wkt即可。
其次,数据在线采集还需满足一下需求:
1、对象绘制;
2、对象的编辑;
3、对象的删除;
4、对象的展示。
下面,看看首先后的效果:
主窗口
选择编辑
绘制完成后提示
点集对象开始编辑
单击地图提示编辑信息
删除提示
删除后的结果
至此,数据的在线采集基本完成,接下来说说实现步骤吧。
1、对象的绘制
对象的绘制是通过Edit来实现的,如下:
var edit = new Edit(map);
var select;
edit.on("deactivate",function(evt){
var geom = evt.graphic.geometry;
var wkt = null;
switch(geom.type){
case "polyline":{
wkt = LineToWKT(geom);
break;
}
case "polygon":{
wkt = PolygonToWKT(geom);
break;
}
default :{
wkt = PointToWKT(geom);
break;
}
}
if(confirm('是否编辑?')){
console.log("编辑:"+wkt);
}
});
map.on("click", function(evt){
edit.deactivate();
});
editItem = function(td){
var tr = td.parentElement;
var objType = tr.id;
var id = tr.cells[0].innerHTML;
var title = tr.cells[1].innerHTML;
$("#itemTitle").html("").html(title);
$("#itemType").val("point");
$("#itemObjtype").val(objType)
$("#editWindow").show();
var draw = new Draw(map);
draw.on("draw-end", function(evt){
map.setMapCursor("default");
var symbol = null,wkt;
switch(evt.geometry.type){
case "polyline":{
symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 3);
wkt = LineToWKT(evt.geometry);
break;
}
case "polygon":{
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 2),
new Color([200,200,200,0.5]));
wkt = PolygonToWKT(evt.geometry);
break;
}
default :{
symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 1),
new Color([0,255,0,0.25]));
wkt = PointToWKT(evt.geometry);
break;
}
}
var graphic = new Graphic(evt.geometry, symbol,{id:$("#itemObjtype").val(),name:$("#itemTitle").html()});
editLayer.add(graphic);
draw.deactivate();
if(confirm('是否绘制?')){
console.log("新建:"+wkt);
}
});
on(dom.byId("editBtn"), "click",function(){
var objType = $("#itemType").val();
switch(objType){
case "polyline":{
draw.activate(esri.toolbars.Draw.POLYLINE);
break;
}
case "polygon":{
draw.activate(esri.toolbars.Draw.POLYGON);
break;
}
default :{
draw.activate(esri.toolbars.Draw.POINT);
break;
}
}
map.setMapCursor("corsshair");
$("#editWindow").hide();
});
}
2、对象的编辑
对象的编辑是通过Edit实现的,如下:
var edit = new Edit(map);
var select;
edit.on("deactivate",function(evt){
var geom = evt.graphic.geometry;
var wkt = null;
switch(geom.type){
case "polyline":{
wkt = LineToWKT(geom);
break;
}
case "polygon":{
wkt = PolygonToWKT(geom);
break;
}
default :{
wkt = PointToWKT(geom);
break;
}
}
if(confirm('是否编辑?')){
console.log("编辑:"+wkt);
}
});
map.on("click", function(evt){
edit.deactivate();
});
editLayer.on("click", function(evt) {
event.stop(evt);
activateToolbar(evt.graphic);
});
function activateToolbar(graphic) {
var tool = 15;
var options = {allowAddVertices: "true", allowDeleteVertices: "true", uniformScaling: "true"};
edit.activate(tool, graphic, options);
select = graphic;
}
3、对象的删除
delItem = function(td){
if(confirm('是否删除?')){
var id = tr.cells[0].innerHTML;
var graphics = editLayer.graphics;
for(var i= 0, dl=graphics.length; i<dl; i++){
var graphic = graphics[i];
if(graphic.attributes.id===id){
editLayer.remove(graphic);
break;
}
}
}
}
最后,就是将绘制的geometry传给后台,主要有两个地方,一个是绘制完成之后,代码中体现在draw的draw-end事件中,一个是在编辑完成之后,代码中体现在edit的deactivate事件中。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法