【转】arcgis js 根据坐标画轨迹

 

arcgis js 根据坐标画轨迹

XML/HTML code

C# code

JavaScript code

 
 
 
 
 
 
 
 
 
 
  • XML/HTML 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="&lt;Definition DataSourceDefinition=&quot;In Memory&quot; DataSourceType=&quot;GraphicsLayer&quot; Identity=&quot;&quot; ResourceDefinition=&quot;&quot; DataSourceShared=&quot;True&quot; /&gt;"                        
                        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="&lt;Definition DataSourceDefinition=&quot;localhost&quot; DataSourceType=&quot;ArcGIS Server Local&quot; Identity=&quot;To set, right-click project and 'Add ArcGIS Identity'&quot; ResourceDefinition=&quot;Layers@HSGIS&quot; DataSourceShared=&quot;True&quot; /&gt;"                        
                        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;
}

 

 原文链接:http://bbs.csdn.net/topics/390217423

 

posted @ 2013-04-17 16:19  沉默的猿  阅读(5844)  评论(0编辑  收藏  举报
AmazingCounters.com
给我写信