連接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、 程序效果圖: