【转】arcgis js 根据坐标画轨迹
<!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>
C# code
#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; }
JavaScript code
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; }
本博有部分内容来自网络,如有问题请联系:hebeilijianghua@qq.com,并注明来自博客园。