SQLserver空间数据的保存及编辑（以Polygon为例）

注意

SQLServer 所用的Geometry一般的开发语言并不包含，所以需要转化，如图，最简便的转化是用Polygon包含。

SQL语句

//插入语句（编辑语句应该不用给出了）
INSERT INTO table_name (polygon,...) VALUES (POLYGON((X1 Y1,X2 Y2,X3 Y3,X1 Y1)),....)
//从表中读出空间数据支持传到程序中
SELECT polygon.ToString() AS geom FROM table_name WHERE ID=...

用Openlayer来交互实现保存和修改（删除太简单就不说了）

JS部分的增加，核心是弄懂openlayer对polygon的封装，而传到后台就是实现保存语句了，不同框架方式不同，不详细介绍。

    /**
     * 空间数据的增加
     * @param fenceid 唯一标识值
     */
    function addFence(fenceid){
    	//定义交互方式
		var draw = new ol.interaction.Draw({
			source: olkit.fenceSource,
			type: 'Polygon'	
		});
		map.addInteraction(draw); //添加绘制
		
		//绘制结束的回调函数
		draw.on('drawend',function(evt){
			var currentfea = evt.feature; //当前要素
			var coor = currentfea.getGeometry().getCoordinates(); //当前要素几何坐标（重要，数据库只能存坐标）
			var geoCoor  = coor[0]; //起点终点一致（解去js的封装）
			for (var i=0,l=geoCoor.length; i<l; i++){
				geoCoor[i] = geoCoor[i].join(' '); //xy用空格分隔
			}
			
			$.messager.confirm("Tips", "确定保存吗？", function (data) {
	            if (data) {
	            	draw.setActive(false); //停止绘制功能
	            	$.ajax({
            			url:  _$base + '/gis/map/addPolygon', //后台
            			type: 'POST',
            			data: {'fenceid':fenceid,'polygon':geoCoor.join(',')},//传ID及坐标
            			success: function(rs){ //rs是自定义的JSON
            				if(rs.code == "FAIL"){
                        		$.messager.alert('提示',rs.msg);
                        	}else{
                        		$.messager.alert('提示',rs.msg);
                        		window.history.go(-1); //网页后退
                        	}
            			},
            			error: true
            		});
	            }
	            else {
	            	olkit.fenceSource.clear(); //清除要素
	       			map.removeInteraction(draw); //删除绘制
	            }
			});
		});
    }

JS部分的编辑，通过modify来实现更新

/**
     * 编辑
     * @param fenceid id
     * @param polygon 空间数据
     */
    function editFence(fenceid,polygon){
    	$.messager.confirm("Tips", "确定进行编辑吗？", function (data) {
            if (data) {
            	//利用已知坐标进行绘制
            	var gis = polygon.substring(10,polygon.length-2).split(', '); //截去Polygon包含
            	var temp = new Array();
            	var point = new Array();
            	for(var i=0;i<gis.length;i++){
            		temp[i] = gis[i].split(' ');
            		point.push([parseFloat(temp[i][0]),parseFloat(temp[i][1])]); //重要：一定要以压入的方式来生成coordinates，不然modify不响应
            	}
            	var po = [point]; //重新封装
            	var feature = new ol.Feature({
            		  geometry: new ol.geom.Polygon(po) //添加要素
            		});
            	
            	olkit.fenceSource.addFeature(feature);
            	olkit.fenceSource.refresh();

            	//定义交互方式
        		var select = new ol.interaction.Select({wrapX: false});
        		map.addInteraction(select); //添加选择
        		
        		//选中要素
                select.on('select',function(){
        			if(select.getFeatures()){
        				console.log(select.getFeatures());
        				$('#popupItem').dialog(); //打开属性设置框
        				
        				var modify = new ol.interaction.Modify({
        			        features: select.getFeatures()
        			      });
        				map.addInteraction(modify);
        				
        				//保存按钮的点击
        				$('#saveBtn').on('click',function() {
        					var currentfea = select.getFeatures().item(0);
        		        	var coor = currentfea.getGeometry().getCoordinates(); //当前要素几何坐标
        					var geoCoor  = coor[0]; //起点终点一致
        					for (var i=0,l=geoCoor.length; i<l; i++){
        						geoCoor[i] = geoCoor[i].join(' '); //xy用空格分隔
        					}

        					//传参
        					$.ajax({
            	       			url: _$base + '/gis/map/addPolygon',
            	       			type: 'POST',
            	       			data: {'fenceid':fenceid,'polygon':geoCoor.join(',')},
            	       			success: function(rs){
            	       				if(rs.code == "FAIL"){
            	                   		$.messager.alert('Tips',rs.msg);
            	                   	}else{
            	                   		$.messager.alert('Tips',rs.msg);
            	                   	}
            	       			},
            	       			error: true     
            			    });														
        				});
        				//取消按钮点击
        				$('#saveBtn').linkbutton({
        			        onClick: function() {
        			        	olkit.fenceSource.clear(); //清除围栏要素
        			        	map.removeInteraction(modify); //删除编辑
        			        	map.removeInteraction(select); //删除选择
        			        	window.history.go(-1);
        			        }
        				});
           		    }
                });
            }else{
            	window.history.go(-1);
            }
    	});
    	
    }