基于arcgis js标注点线面并存储到数据库

于 2019-02-12 17:39:43 发布
阅读量2.8k 收藏 13
点赞数 2
分类专栏： ArcGIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KK_bluebule/article/details/86680875
版权

主要分为以下一个步骤：

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));*/
}

今天写的有点乱，比较简洁， 过完年上班第一天啊，心有点静不下来！！！大家凑合看看哈

Giser_往事随风
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Giser_往事随风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值