arcgis js 根據坐標畫軌跡XML/HTML codeC# codeJavaScript code |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <script type="text/javascript"> function GetCoord(){ var AX=document.getElementById("TxtX").value; var AY=document.getElementById("TxtY").value; if(AX==''){ alert('缺少經度坐標！'); return; } if(isNaN(AX)){ alert('經度坐標必須為數字！'); return; } if(AY==''){ alert('缺少緯度坐標！'); return; } if(isNaN(AY)){ alert('緯度坐標必須為數字！'); return; } var message='X='+AX+'&Y='+AY; var context="MyMap"; <%=m_LocateByXY%> } function LinkLocate(){ var taskId=document.getElementById("taskId").value; var taskLineId='taskId='+taskId; var context="MyMap"; <%=m_TaskLine%> } </script> <div style="width: 100%"> <div> <table> <tr> <td align="left"> 任務ID：<asp:textbox id="taskId" runat="server"></asp:textbox> <input id="linkLocateBtn" type="button" value="線路定位" onclick="LinkLocate()" /> </td> </tr> <tr> <td align="left"> X坐標：<asp:textbox id="TxtX" runat="server"></asp:textbox> Y坐標：<asp:textbox id="TxtY" runat="server"></asp:textbox> <input id="btnLocateBtn" type="button" value="單點定位" onclick="GetCoord()" /> </td> </tr> </table> </div> <div style="float: right;"> <esri:toolbar id="Toolbar1" runat="server" buddycontroltype="Map" group="Toolbar1_Group" height="28px" toolbaritemdefaultstyle-backcolor="Transparent" toolbaritemdefaultstyle-font-names="Arial" toolbaritemdefaultstyle-font-size="Smaller" toolbaritemdisabledstyle-backcolor="Transparent" toolbaritemdisabledstyle-font-names="Arial" toolbaritemdisabledstyle-font-size="Smaller" toolbaritemdisabledstyle-forecolor="Gray" toolbaritemhoverstyle-backcolor="Transparent" toolbaritemhoverstyle-font-bold="True" toolbaritemhoverstyle-font-italic="True" toolbaritemhoverstyle-font-names="Arial" toolbaritemhoverstyle-font-size="Smaller" toolbaritemselectedstyle-backcolor="Transparent" toolbaritemselectedstyle-font-bold="True" toolbaritemselectedstyle-font-names="Arial" toolbaritemselectedstyle-font-size="Smaller" webresourcelocation="/aspnet_client/ESRI/WebADF/" width="300px"> <ToolbarItems> <esri:Tool ClientAction="DragRectangle" DefaultImage="esriZoomIn.png" HoverImage="esriZoomIn.png" JavaScriptFile="" Name="MapZoomIn" SelectedImage="esriZoomIn.png" ServerActionAssembly="ESRI.ArcGIS.ADF.Web.UI.WebControls" ServerActionClass="ESRI.ArcGIS.ADF.Web.UI.WebControls.Tools.MapZoomIn" Text=" " ToolTip="放大" /> <esri:Tool ClientAction="DragRectangle" DefaultImage="esriZoomOut.png" HoverImage="esriZoomOut.png" JavaScriptFile="" Name="MapZoomOut" SelectedImage="esriZoomOut.png" ServerActionAssembly="ESRI.ArcGIS.ADF.Web.UI.WebControls" ServerActionClass="ESRI.ArcGIS.ADF.Web.UI.WebControls.Tools.MapZoomOut" Text=" " ToolTip="縮小" /> <esri:Tool ClientAction="DragImage" DefaultImage="esriPan.png" HoverImage="esriPan.png" JavaScriptFile="" Name="MapPan" SelectedImage="esriPan.png" ServerActionAssembly="ESRI.ArcGIS.ADF.Web.UI.WebControls" ServerActionClass="ESRI.ArcGIS.ADF.Web.UI.WebControls.Tools.MapPan" Text=" " ToolTip="漫游" /> <esri:Command ClientAction="" DefaultImage="esriZoomFullExtent.png" HoverImage="esriZoomFullExtent.png" JavaScriptFile="" Name="MapFullExtent" SelectedImage="esriZoomFullExtent.png" ServerActionAssembly="ESRI.ArcGIS.ADF.Web.UI.WebControls" ServerActionClass="ESRI.ArcGIS.ADF.Web.UI.WebControls.Tools.MapFullExtent" Text=" " ToolTip="全部" /> <esri:Command BuddyItem="MapForward" ClientAction="ToolbarMapBack" DefaultImage="images/backward.png" Disabled="True" DisabledImage="images/backward_disabled.png" HoverImage="images/backward.png" JavaScriptFile="" Name="MapBack" SelectedImage="images/backward.png" Text=" " ToolTip="前一視野" /> <esri:Command BuddyItem="MapBack" ClientAction="ToolbarMapForward" DefaultImage="images/forward.png" Disabled="True" DisabledImage="images/forward_disabled.png" HoverImage="images/forward.png" JavaScriptFile="" Name="MapForward" SelectedImage="images/forward.png" Text=" " ToolTip="后一視野" /> </ToolbarItems> <BuddyControls> <esri:BuddyControl Name="MyMap" /> </BuddyControls> </esri:toolbar> </div> <div style="position: relative; top: 0px;"> <esri:map id="MyMap" runat="server" mapresourcemanager="MapResourceManager1" width="100%" height="472px"> </esri:map> <esri:mapresourcemanager id="MapResourceManager1" runat="server"> <ResourceItems> <esri:MapResourceItem Definition="<Definition DataSourceDefinition="In Memory" DataSourceType="GraphicsLayer" Identity="" ResourceDefinition="" DataSourceShared="True" />" DisplaySettings="visible=True:transparency=0:mime=True:imgFormat=PNG8:height=100:width=100:dpi=96:color=:transbg=False:displayInToc=True:dynamicTiling=" LayerDefinitions="" Name="graph" /> <esri:MapResourceItem Definition="<Definition DataSourceDefinition="localhost" DataSourceType="ArcGIS Server Local" Identity="To set, right-click project and 'Add ArcGIS Identity'" ResourceDefinition="Layers@HSGIS" DataSourceShared="True" />" DisplaySettings="visible=True:transparency=0:mime=True:imgFormat=PNG32:height=100:width=100:dpi=96:color=-32513:transbg=True:displayInToc=True:dynamicTiling=True" LayerDefinitions="" Name="MyLayers" /> </ResourceItems> </esri:mapresourcemanager> </div> <div style="position: absolute; top: 113px;"> <table> <tr> <td align="center"> <esri:navigation id="Navigation1" runat="server" map="MyMap" displayimageurl="images/directional_arrows_N.gif" height="52px" width="52px" size="44"> <DisplayCharacter FontName="ESRI North" CharacterIndex="58"></DisplayCharacter> </esri:navigation> <esri:zoomlevel id="ZoomLevel1" runat="server" map="MyMap" /> </td> </tr> </table> </div> </div> </form> <%-- 鼠標移動，顯示坐標，一定要放在MainMap定義之后--%> <script language="javascript" type="text/javascript"> Sys.Application.add_init(initialize); function initialize() { m_MainMap = $find('MyMap'); m_MainMap.add_mouseMove(MapCoordsMouseMove); } function MapCoordsMouseMove(sender, args) { var coords = args.coordinate; window.status = '經度X: ' + coords.get_x().toFixed(6) + ', 緯度Y:' + coords.get_y().toFixed(6); } </script> </body> </html>
#region Page_Load protected void Page_Load(object sender, EventArgs e) { MyMap.PrimaryMapResource = "MyLayers"; m_LocateByXY = Page.ClientScript.GetCallbackEventReference(this, "'LocateByXY:'+message", "processCallbackResult", "context", "postBackError", true); m_TaskLine = Page.ClientScript.GetCallbackEventReference(this, "'TaskLineId:'+taskLineId", "processCallbackResult", "context", "postBackError", true); } #endregion public void RaiseCallbackEvent(string eventarges) { string tmpLocateInfo = ""; if (eventarges.StartsWith("LocateByXY:")) //單點定位 { tmpLocateInfo = eventarges.Substring(11, eventarges.Length - 11); System.Collections.Specialized.NameValueCollection nameValueCollection = CallbackUtility.ParseStringIntoNameValueCollection(tmpLocateInfo); double x = Convert.ToDouble(nameValueCollection["X"]); double y = Convert.ToDouble(nameValueCollection["Y"]); CallJavaScriptPos(x.ToString(), y.ToString()); } else if (eventarges.StartsWith("TaskLineId:"))//軌跡回放 { tmpLocateInfo = eventarges.Substring(18, eventarges.Length - 18); string taskLineInfo = "", taskLinePoint = ""; string[] str; ArrayList taskLine_XY_Info = taskLineLocate(tmpLocateInfo); foreach(string i in taskLine_XY_Info) { str = i.Split(','); taskLinePoint += "<Point x='" + str[0] + "' y='" + str[1] + "' />"; } taskLineInfo = "<root><TRACK>" + taskLinePoint + "</TRACK></root>"; taskLineInfo = taskLineInfo.Replace("%20", " "); GetXml(Server.UrlDecode(taskLineInfo)); } } private void GetXml(string AXml) { int i = 0, j = 0, k = 0, n = 0, tmpValidNum = 0; Double tmpPreValidX = 0, tmpPreValidY = 0; string tmpSegmentName = "", tmpFieldName, tmpFieldValue = "", tmpMessage = ""; string tmpGPS_X = "", tmpGPS_Y = ""; if (AXml == "") return; DataSet tmpDs = new DataSet(); tmpDs.ReadXml(new System.IO.MemoryStream(System.Text.Encoding.UTF8.GetBytes(AXml.ToUpper()))); tmpMessage = ""; //遍歷段 for (i = 0; i < tmpDs.Tables.Count; i++) { DataTable tmpDt = tmpDs.Tables[i]; tmpSegmentName = tmpDt.TableName; //遍歷行 for (j = 0; j < tmpDt.Rows.Count; j++) { DataRow tmpDr = tmpDt.Rows[j]; //遍歷列 for (k = 0; k < tmpDt.Columns.Count; k++) { tmpFieldName = tmpDt.Columns[k].Caption; tmpFieldValue = tmpDr[k].ToString(); if ((tmpSegmentName == "POINT") && (tmpFieldName == "X")) { tmpGPS_X = tmpFieldValue; } else if ((tmpSegmentName == "POINT") && (tmpFieldName == "Y")) { tmpGPS_Y = tmpFieldValue; } } if (tmpSegmentName == "POINT") { n = m_XYInfos.Length; System.Array.Resize(ref m_XYInfos, n + 1); m_XYInfos[n].X = Convert.ToDouble(tmpGPS_X); m_XYInfos[n].Y = Convert.ToDouble(tmpGPS_Y); } } } for (n = 0; n < m_XYInfos.Length; n++) { tmpGPS_X = m_XYInfos[n].X.ToString(); tmpGPS_Y = m_XYInfos[n].Y.ToString(); if (n == 0) { tmpPreValidX = m_XYInfos[n].X; tmpPreValidY = m_XYInfos[n].Y; tmpMessage = tmpMessage + " " + tmpGPS_X + " " + tmpGPS_Y + ";"; tmpValidNum = tmpValidNum + 1; } else { if (m_XYInfos.Length < 20) { tmpPreValidX = m_XYInfos[n].X; tmpPreValidY = m_XYInfos[n].Y; tmpMessage = tmpMessage + " " + tmpGPS_X + " " + tmpGPS_Y + ";"; tmpValidNum = tmpValidNum + 1; } } } if ((tmpMessage.Length > 0) && (tmpValidNum >= 2)) { tmpMessage = tmpMessage.Substring(0, tmpMessage.Length - 1); System.Array.Resize(ref m_XYInfos, 0); CallJavaScriptTrack(tmpMessage); } } #region 根據任務線路ID獲取點坐標 private ArrayList taskLineLocate(string taskLinkId) { ArrayList taskLineInfo = new ArrayList(); if (taskLinkId == "1") { taskLineInfo.Add("121.356369,29.576957"); taskLineInfo.Add("121.356487,29.575034"); taskLineInfo.Add("121.358017,29.573622"); taskLineInfo.Add("121.355663,29.573484"); taskLineInfo.Add("121.351818,29.571836"); } else if (taskLinkId == "2") { taskLineInfo.Add("121.359920,29.573995"); taskLineInfo.Add("121.361431,29.574799"); taskLineInfo.Add("121.365708,29.575760"); taskLineInfo.Add("121.365041,29.576310"); } return taskLineInfo; } #endregion //單點定位調 private void CallJavaScriptPos(string AGPS_X, string AGPS_Y) { string scriptBlock = @" SetPos('" + AGPS_X + "','" + AGPS_Y + "')"; ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult cr = ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult.CreateJavaScript(scriptBlock); MyMap.CallbackResults.Add(cr); m_CallbackResults = MyMap.CallbackResults.ToString(); } //軌跡定位回放 private void CallJavaScriptTrack(string taskLineInfo) { string scriptBlock = @" SetTrack('" + taskLineInfo + "')"; ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult cr = ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult.CreateJavaScript(scriptBlock); MyMap.CallbackResults.Add(cr); m_CallbackResults = MyMap.CallbackResults.ToString(); } //把處理結果返回給客戶端 public string GetCallbackResult() { return m_CallbackResults; }
var m_MainMap; //賦初值放在地圖加載完后的initialize函數中 var m_x1, m_y1, m_x2, m_y2, IsFirst = true; var m_Tracks = new Array(); var m_Gpss = new Array(); var m_TrackArr = new Array(); var m_i; var m_TrackTimeHandle, m_FlashTimeHandle; var m_Params, m_TotalLength; var m_PosInfos = new Array(4); var m_TrackTime = 2000, m_FlashTime = 1000; //軌跡回放間隔,單點定位閃爍間隔 var lineInfo; //存放坐標點集合字符串 //單點定位調 function SetPos(AX, AY) { m_x1 = AX; m_y1 = AY; ClearFlag(); m_i = 0; m_FlashTimeHandle = setInterval("FlashPt()"); } function ClearFlag() { for (var i = m_MainMap._graphicFeatures.length - 1; i >= 0; i--) { m_MainMap.removeGraphic(m_MainMap._graphicFeatures[i]); } } function FlashPt() { if (m_i >= 15) { clearInterval(m_FlashTimeHandle); m_FlashTimeHandle = null; m_i = 0; m_SliderPos = 0; return; } if (m_i % 2 == 0) { var useAnimation = true; var zoomFactor = 1; var CurPoint = new ESRI.ADF.Geometries.Point(parseFloat(m_x1), parseFloat(m_y1)); if (m_i == 0) { m_MainMap.panTo(CurPoint, true); m_MainMap.zoom(zoomFactor, new ESRI.ADF.Geometries.Point(parseFloat(parseFloat(m_x1), parseFloat(m_y1))), true); } AddflagPoint(CurPoint); m_MainMap.refresh(); } else { ClearFlag(); } m_i = m_i + 1; } function AddflagPoint(APoint) { //添加點擊標記 var style = null; if (ESRI.ADF.Geometries.Point.isInstanceOfType(APoint)) { //注意路徑寫法，與父頁面的后台調用方式有關 //如果父頁面的后台是：Server.Transfer(tmpUrl);，意味着當前指針還在調用者所在的路徑中,就必須用 ./Images/Man.png //如果父頁面的后台是：Response.Redirect(tmpUrl);意味着當前指針已經在當前頁面所在的路徑中中了,就必須用 ../Images/Man.png //圓點圖標顯示時 style = new ESRI.ADF.Graphics.MarkerSymbol("images/Location.gif", 15, 15); //圖片manPt.png 16*16 即為添加的點擊標記。//0, 16為相對圖片的偏移 像素,可視具體圖標而定，比如小旗子則為:0,16，小人則為:16/2,16/2 } tmpFlagPt1 = $create(ESRI.ADF.Graphics.GraphicFeature, { "id": "我的位置", "geometry": APoint, "symbol": style }); // debugger; m_MainMap.addGraphic(tmpFlagPt1); } //軌跡回放 function SetTrack(AStr) { var i, j, tmpStr, x, y; ClearFlag(); m_Tracks = AStr.split(";"); m_i = 0; m_SliderBarMax = m_Tracks.length; for (i = 0; i < m_Tracks.length; i++) { tmpStr = m_Tracks[i]; m_TrackArr[i] = new TrackArray(tmpStr, "", 0, 0, 0); m_Gpss = tmpStr.split(" "); m_TrackArr[i].TimeText = m_Gpss[0]; m_TrackArr[i].x = m_Gpss[1]; m_TrackArr[i].y = m_Gpss[2]; m_TrackArr[i].dis = m_Gpss[3]; } m_i = 0; //繪制軌跡 ShowTrack(); //軌跡回放 m_TrackTimeHandle = setInterval("Go2Pt()", m_TrackTime); } function TrackArray(AStr, ATimeText, Ax, Ay, ADis) { this.Str = AStr; this.TimeText = ATimeText; this.x = Ax; this.y = Ay; this.dis = ADis; } function ShowTrack() { var i, CurPoint, PrePoint; var tmpMinx, tmpMiny, tmpMaxx, tmpMaxy; ClearFlag(); var useAnimation = true; var zoomFactor = 0.3; var str = new Array(); for (i = 0; i < m_Tracks.length; i++) { CurPoint = new ESRI.ADF.Geometries.Point(parseFloat(m_TrackArr[i].x), parseFloat(m_TrackArr[i].y)); if (i > 0) { PrePoint = new ESRI.ADF.Geometries.Point(parseFloat(m_TrackArr[i - 1].x), parseFloat(m_TrackArr[i - 1].y)); AddLine(PrePoint, CurPoint); } } GetTrackExtent(); //必須是整形 118.76845,32.04069,118.806683,32.0448017 tmpMinx = parseFloat(m_x1); tmpMiny = parseFloat(m_y1); tmpMaxx = parseFloat(m_x2); tmpMaxy = parseFloat(m_y2); m_MainMap.set_extent(new ESRI.ADF.Geometries.Envelope(tmpMinx, tmpMiny, tmpMaxx, tmpMaxy)); } //獲取軌跡視野 function GetTrackExtent() { var i; m_x1 = 99999; m_y1 = 99999; m_x2 = -99999; m_y2 = -99999; for (i = 0; i < m_Tracks.length; i++) { if (m_TrackArr[i].x < m_x1) { m_x1 = m_TrackArr[i].x; } if (m_TrackArr[i].y < m_y1) { m_y1 = m_TrackArr[i].y; } if (m_TrackArr[i].x > m_x2) { m_x2 = m_TrackArr[i].x; } if (m_TrackArr[i].y > m_y2) { m_y2 = m_TrackArr[i].y; } } } function ClearPrePt() { for (var i = m_MainMap._graphicFeatures.length - 1; i >= 0; i--) { if ((m_MainMap._graphicFeatures[i]._id == "我的位置") || (m_MainMap._graphicFeatures[i]._id == "我的提示") || (m_MainMap._graphicFeatures[i]._id == "我的時間")) { m_MainMap.removeGraphic(m_MainMap._graphicFeatures[i]); } } } function AddLine(APrePoint, ACurPoint) { AddflagPoint(APrePoint); var newpath = new ESRI.ADF.Geometries.CoordinateCollection(); // var tmpPt1 = new ESRI.ADF.Geometries.Point(APrePoint.get_x(), APrePoint.get_y()); // var tmpPt2 = new ESRI.ADF.Geometries.Point(ACurPoint.get_x(), ACurPoint.get_y()); newpath.add(APrePoint); newpath.add(ACurPoint); var newPolyline = new ESRI.ADF.Geometries.Polyline(); newPolyline.addPath(newpath); var trackLineSymbol = new ESRI.ADF.Graphics.LineSymbol(); trackLineSymbol.set_lineColor('blue'); trackLineSymbol.set_width(6); trackLineSymbol.set_cursor('crosshair'); trackLineSymbol.set_opacity(0.7); trackLine = $create(ESRI.ADF.Graphics.GraphicFeature, { "id": "我的線", "geometry": newPolyline, "symbol": trackLineSymbol }); m_MainMap.addGraphic(trackLine); } function Go2Pt() { if (m_i >= m_TrackArr.length) { clearInterval(m_TrackTimeHandle); m_TrackTimeHandle = null; m_i = 0; alert("軌跡回放結束。"); return; } //補充線 CheckLineAdd(); var useAnimation = true; var zoomFactor = 0.3; var CurPoint = new ESRI.ADF.Geometries.Point(parseFloat(m_TrackArr[m_i].x), parseFloat(m_TrackArr[m_i].y)); if (m_i > 0) { ClearPrePt(); } m_MainMap.panTo(CurPoint, true); AddflagPoint(CurPoint); m_i = m_i + 1; } function CheckLineAdd() { var i, CurPoint, PrePoint; if (IsExistsLine() == false) { for (i = 0; i < m_Tracks.length; i++) { CurPoint = new ESRI.ADF.Geometries.Point(parseFloat(m_TrackArr[i].x), parseFloat(m_TrackArr[i].y)); if (i > 0) { PrePoint = new ESRI.ADF.Geometries.Point(parseFloat(m_TrackArr[i - 1].x), parseFloat(m_TrackArr[i - 1].y)); AddLine(PrePoint, CurPoint); } } } } function IsExistsLine() { for (var i = m_MainMap._graphicFeatures.length - 1; i >= 0; i--) { if (m_MainMap._graphicFeatures[i]._id == "我的線") { return true; } } return false; }
原文鏈接：http://bbs.csdn.net/topics/390217423