7、连接sql数据库获取坐标绘制Graphics

连接sql数据库获取坐标绘制Graphics

1、建立数据库，存储点位信息如下：

数据库名称：SDB;

表名称：SDB_Node

NodeID X Y

1 33 33

2 100 100

3 44 100

2、连接数据库，读取信息！

本例采用将后台读取的坐标信息按照一定格式拼接成字符串的形式传回js，然后再在js中将字符串中的坐标信息截成单个的坐标，然后绘制Graphic

注意，因为js是前台代码，所以要在后台建一个公共的字符串存储坐标信息。

public string XY = "";//存储坐标信息 

protected void conn() 

{ 

string SConnstr = ConfigurationSettings.AppSettings["SDB_conn"]; 

SqlConnection Sqlconn = new SqlConnection(SConnstr); 

Sqlconn.Open(); 

string div_sqlstr = "select X,Y from SDB_node"; 

SqlCommand mycommand = new SqlCommand(div_sqlstr, Sqlconn); 

SqlDataReader myReader = mycommand.ExecuteReader(); 

while(myReader.Read()) 

{ 

XY = myReader["X"] +","+ myReader["Y"]+";"+XY; 

} 

Response.Write(XY); 

Sqlconn.Close(); 

}

程序中的string XY便是坐标信息，在前台js中接受。

3、前台接收字符串，并处理获取到单个坐标：

以下是添加点的处理：

点击按钮后触发事件：

function toXY_onclick() 

{ 

var myvalue="<%=XY%>"//获取坐标字符串 

while(myvalue!="")//判断是否截取完毕 

{ 

var d_position=myvalue.indexOf(",")//获取字符串长度 

var X_Str=myvalue.substring(0,d_position);//截取“，”前的字符串，即为X坐标 

var f_position=myvalue.indexOf(";") 

var Y_Str=myvalue.substring(d_position+1,f_position);//截取“；”前的字符串，即为Y坐标 

myvalue=myvalue.substring(f_position+1,myvalue.length); 

var cPoint=new esri.geometry.Point()//定义点 

cPoint.x=X_Str;//为点赋予坐标 

cPoint.y=Y_Str; 

map.centerAt(cPoint);//以该点为中心显示 

addGeometry(cPoint);//调用公共函数addGeometry执行添加点操作 

} 

}

公共函数addGeometry（）编写：

function addGeometry(Geo) 

{ 

var symbol;//定义样式 

switch (Geo.type) { 

case "point": 

symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25])); 

break; 

case "polyline": 

symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1); 

break; 

case "polygon": 

symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25])); 

break; 

case "extent": 

symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25])); 

break; 

case "multipoint": 

symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([255,255,0,0.5])); 

break; 

} 

var graphic = new esri.Graphic(Geo, symbol);//将geometry赋予样式并成为Graphics 

map.graphics.add(graphic);//执行添加 

}

4、添加线：

线的添加使用线的addPath方法，其参数可以是坐标点集、坐标数组等；

实现代码为（使用坐标数组）：

//添加线 

function addline_onclick() { 

var cLine=new esri.geometry.Polyline(); 

var myvalue="<%=XY%>" 

var iarry=new Array(); 

var i=0; 

while(myvalue!="") 

{ 

iarry[i]=new Array(); 

var d_position=myvalue.indexOf(",") 

var X_Str=myvalue.substring(0,d_position); 

var f_position=myvalue.indexOf(";") 

var Y_Str=myvalue.substring(d_position+1,f_position); 

myvalue=myvalue.substring(f_position+1,myvalue.length); 

iarry[i][0]=X_Str; 

iarry[i][1]=Y_Str; 

i++; 

} 

cLine.addPath(iarry); 

addGeometry(cLine); 

}

5、添加面同添加线，其赋予坐标的方法为：addRing

主要代码为：

function addpolygon_onclick() { 

var cPolygon=new esri.geometry.Polygon(); 

var iarry=new Array(); 

var myvalue="<%=XY%>" 

var iarry=new Array(); 

var i=0; 

while(myvalue!="") 

{ 

iarry[i]=new Array(); 

var d_position=myvalue.indexOf(",") 

var X_Str=myvalue.substring(0,d_position); 

var f_position=myvalue.indexOf(";") 

var Y_Str=myvalue.substring(d_position+1,f_position); 

myvalue=myvalue.substring(f_position+1,myvalue.length); 

iarry[i][0]=X_Str; 

iarry[i][1]=Y_Str; 

i++; 

} 

cPolygon.addRing(iarry); 

addGeometry(cPolygon); 

}

6、程序效果图：