主要分为以下一个步骤:
1、建立表
2、后台接口
3、前台ajax请求(存储和读取),arcgis js 渲染 图形
详解:
(这里我就以点和线为例,面同线)
1、点的表:
字段名 | 描述 |
id | 主键 |
pointName | 名称 |
pointDecrib | 描述 |
lon | 经度 |
lat | 纬度 |
spatialReference | 空间坐标系 |
createTime | 创建时间 |
线的表:
字段名 | 描述 |
id | 主键 |
lineName | 名称 |
lineDecrib | 描述 |
lineContent | 线信息 |
createTime | 创建时间 |
2、后台接口:
就是一些简单的增删改查,这里我就不具体写了
3、具体我写下前台接受点和线数据存储到数据库中
3.1 点存储
(1) var toolbar_marker = new Draw(map);
//实例化一个 Draw
//设置点的样式,这里我用一张图片,所以定义符号类用的是PictureMarkerSymbol
var markerPicture =new PictureMarkerSymbol("static/img/map/mymark.png",35,35);
//当我们点击标记点时,执行以下方法
toolbar_marker.activate(Draw.POINT);
toolbar_marker.on("draw-end",function (evt) {
markerP(evt);//鼠标点击后执行的方法
});
function markerP(evt) {
var geoStr = JSON.stringify(evt.geometry);//对象转成string才可放进函数的参数
map.infoWindow.resize(270,165);
map.infoWindow.setTitle("请填写标注信息内容:");
var content = "<div>" +
"<div class='drawByUserinput'>名称:<input type='text' id='pointName' name='pointName' /></div>" +
"<div class='drawByUserinput'>描述:<input type='text' id='pointDecrib' name='pointDecrib' /></div>" +
"<div style='text-align:center'>" +
"<input type='button' id='finsh' name='finsh' value='保 存' onclick='finsh("+geoStr+")' />"+
"<input type='button' name='cancel' value='取 消' onclick='cancel()' />" +
"</div>" +
"</div>";
map.infoWindow.setContent(content);
map.infoWindow.show(evt.geometry);
var gra =new Graphic(evt.geometry,markerPicture);
markerTempGraphic.add(gra);//markerTempGraphic是我用来保存标记信息图形的 自定义的一个图层
toolbar_marker.deactivate();
}
finsh=function(data){
var pointName =$("#pointName").val();
var pointDecrib =$("#pointDecrib").val();
if(pointName==""||pointDecrib==""){
$('.tips').initTips({ // 这个是一个弹出框的设置参数,不用理会
toastType:'error',
message:"不允许输入空值!",// 内容区域 动态生成div时,将根据ajax获取的数据并拼接好的html字符串放到此处即可
space:10, // 通知窗之间上下间隔 单位px(默认值为8)
firstSpace:8, // 第一个提示框距离页面 上方或(下,左,右)的距离 (默认值为8)
width: '150',
margin:15 // 提示框 距离左右两边的距离 (默认值15px)
});
return;
}
$.get("markerPoint/addPoint",
{pointName:pointName,
pointDecrib:pointDecrib,
lon:data.x,
lat:data.y,
spatialReference:data.spatialReference.wkid},
function(result){
if(result){
markerTempGraphic.clear();
$('.tips').initTips({ //弹出框设置参数
toastType:'success',
message:"保存成功!",// 内容区域 动态生成div时,将根据ajax获取的数据并拼接好的html字符串放到此处即可
space:10, // 通知窗之间上下间隔 单位px(默认值为8)
firstSpace:8, // 第一个提示框距离页面 上方或(下,左,右)的距离 (默认值为8)
width: '150',
margin:15 // 提示框 距离左右两边的距离 (默认值15px)
});
}
},"json");
}
cancel =function(){
markerTempGraphic.clear();
map.infoWindow.hide();
}
$(".close").click(function() {
cancel();
})
3.2 线存储
// 线样式
var lineSymbol = new SimpleLineSymbol().setColor(new dojo.Color([255, 0, 0 ]), 3);
//构建画图工具
var toolbar4 = new Draw(map);// 构建Draw
//创建保存标绘图层
glLine = new GraphicsLayer({ id: "drawLine" });
map.addLayer(glLine);
//当我们点击标记线时
toolbar4.activate(Draw.POLYLINE);//激活画图工具为折线
map.setMapCursor("pointer");//鼠标变为pointer
//画图完成后执行
toolbar4.on("draw-complete",addGraphic);
function addGraphic(evt) {
toolbar4.deactivate();
map.enableMapNavigation();
var symbol;//标注的符号
if (evt.geometry.type === "polyline") {
symbol = lineSymbol;
geo = evt.geometry.getPoint(0, 0);
}
else if (evt.geometry.type === "polygon"){
symbol = fillSymbol;
geo = evt.geometry.getExtent().getCenter();
}
var gra = new Graphic(evt.geometry, symbol);
glLine1.add(gra);
//定义信息框
map.infoWindow.resize(270,165);
map.infoWindow.setTitle("请填写标注信息内容:");
var geoStr = JSON.stringify(evt.geometry);//对象转成string才可放进函数的参数
var content ="<form id='drawByUser'>" +
"<div class='drawByUserinput'>名称:<input type='text' id='pointName' name='pointName' /></div>" +
"<div class='drawByUserinput'>描述:<input type='text' id='pointDecrib' name='pointDecrib' /></div>" +
"<div style='text-align:center'>" +
"<input type='button' id='finsh01' name='finsh01' value='保 存' onclick='finsh("+geoStr+")' />"+
"<input type='button' name='cancel01' value='取 消' onclick='cancel("+geoStr+")' />" +
"<input type='hidden' id='geometry' name='geometry' value='"+geoStr+"' />" +
"</div>" +
"</form>";
map.infoWindow.setContent(content);
$(".actionList").removeClass("hidden");
var btn="<span onclick='finsh("+geoStr+")'>保存</span><span onclick='cancel("+geoStr+")'>取消</span>";
map.infoWindow.show(geo);
}
点、线、面存储思路不同就是点存储 我把它空间信息(经度、纬度、空间参考系)拆开存储,而线和面我是直接将他们的geometry 转成字符串存储到表中的
3.3 读取数据库中点信息进行展示:
ajax请求数据库获取到点数据我就不写了,直接写js渲染的方法:
function showPoint(data) {
var jd=parseFloat(data.LONGITUDE);
var wd=parseFloat(data.LATITUDE);
var point = new Point(jd, wd, new SpatialReference({wkid:4326}));
//var selfPoint =new Point([parseFloat(data.LONGITUDE),parseFloat(data.LATITUDE)],new SpatialReference({wkid:4490}));
//进行属性设置
var atr ={"POINTNAME":data.POINTNAME,"POINTDESCRIBE":data.POINTDESCRIBE,"id":data.ID,"type":"point"};
var infoTemplate = new InfoTemplate("标注信息","名称:"+data.POINTNAME+" <br/>描述:"+data.POINTDESCRIBE+" <br/><button style='text-align: center;float: right;right: 80px;' id="+data.ID+" >编辑该标注</button><button style='text-align: center;float: right;right: 20px;' id="+data.ID+" >删除该标注</button>");
textSym =new TextSymbol(data.POINTNAME).setColor(
new Color([38,51,226])).setAlign(Font.DECORATION_LINETHROUGH).setFont(
new Font("18px").setWeight(Font.WEIGHT_BOLD).setFamily("微软雅黑")).setOffset(20,10);
selfGeo = new Graphic(point,marker,atr,infoTemplate);
map.graphics.add(selfGeo);
map.graphics.add(new Graphic(point,textSym));
//点击删除按钮
$(".contentPane").on("click","#"+data.ID,function(){
deletePoint(data.ID);
});
}
3.4 读取数据库中线的信息进行展示:
我就直接上根据我建的表拿到的数据,前台js怎么处理数据的代码了哈
//显示标注线
function showLine(data){
//将String解析为OBJ对象
var lineJson = JSON.parse(data.LINECONTENT);
//设置OBJ对象,并对该对象进行属性赋值
var selfLine = {};
selfLine.paths = lineJson.paths;
selfLine.spatialReference = lineJson.spatialReference;
//得出目标线
var selfPolyline = new Polyline(selfLine);
var type="polyline";
//线条样式
var routeSelf = new SimpleLineSymbol().setColor(new dojo.Color([1, 181, 181,0.75])).setWidth(3);
//进行属性设置(前两个是做信息框用的,后两个是删除用的)
var attr={"name":data.LINENAME,"decribe":data.LINEDECRIB,"id":data.ID,"type":"polyline","geometry":data.LINECONTENT};
//var infoTemplate = new InfoTemplate("信息","边界名称: "+data.LINENAME+" <br/>边界描述: "+data.LINEDECRIB+" <br/>创建时间: "+data.CREATETIME+" <br/><button style='text-align: center;float: right;right: 20px;' id="+data.ID+" >删除该标注</button>");
//得出目标图形
/* var textSym =new TextSymbol(data.lineName).setColor(
new Color([186,85,211])).setAlign(Font.DECORATION_LINETHROUGH).setFont(
new Font("14px").setWeight(Font.WEIGHT_BOLD).setFamily("微软雅黑")).setOffset(35,10);*/
var selfGeo = new Graphic(selfPolyline, routeSelf,attr,null);
glLine.add(selfGeo);
}
3.5 附带一个显示面的吧:
(表结构同线表)
//显示标注面
function showArea(data){
//将String解析为OBJ对象
var areaJson = JSON.parse(data.AREACONTENT);
//设置OBJ对象,并对该对象进行属性赋值
var selfArea = {};
selfArea.rings = areaJson.rings;
selfArea.spatialReference = areaJson.spatialReference;
//得出目标面
var selfPolygon = new Polygon(selfArea);
//面样式
//进行属性设置(前两个是做信息框用的,后两个是删除用的)
var atr={"name":data.AREANAME,"decribe":data.AREADECRIB,"id":data.ID,"type":"polygon","geometry":data.AREACONTENT};
/* var infoTemplate = new InfoTemplate("信息","区域名称: "+data.AREANAME+" <br/>区域描述:"+data.AREADECRIB+" <br/>创建时间: "+data.CREATETIME+" <br/><button style='text-align: center;float: right;right: 20px;' id="+data.ID+" >删除该标注</button>");
$(".esriPopup a").find("span").html("快速定位");*/
//得出目标图形
/* var textSym =new TextSymbol(data.areaName).setColor(
new Color([186,85,211])).setAlign(Font.DECORATION_LINETHROUGH).setFont(
new Font("14px").setWeight(Font.WEIGHT_BOLD).setFamily("微软雅黑")).setOffset(35,10);*/
var selfGeo = new Graphic(selfPolygon, fillSymbol,atr,null);
glArea.add(selfGeo);
/* glArea.add(new Graphic(selfPolygon,textSym));*/
}
今天写的有点乱,比较简洁, 过完年上班第一天啊,心有点静不下来!!!大家凑合看看哈