ArcGIS JS API 匀速移动的小车

        前言:标题说了是匀速移动的小车,那么速度就是m/s,地图坐标系是以米为单位的投影坐标系,而不该是经纬度的地理坐

标系,虽然地理坐标和投影坐标可以相互转换。该案例的小车速度设定的是45m/100ms,地图区域是青岛。。。

        操作说明:

                       1、打开页面,单击右上角“绘制路线”,在地图上绘制一条折线。

                       2、单击“开始移动”,小车由起点匀速运动到终点。(在移动过程中或者匀速到终点后,重复单击“开始移动”,小车

                             从头开始移动)。

                       3、在单击“绘制路线”,重复 步骤1和步骤2。

页面效果:

核心代码:

     deltaX=0;
     deltaY=0;
     startIdx=0;
     endIdx=1;
     clearInterval(timer);
     carLyr.clear();
     curPosition=new Point(points[0][0],points[0][1],map.spatialReference);
     var vec ={x:points[endIdx][0]-points[startIdx][0],y:points[endIdx][1]-points[startIdx][1]};
     var tmpAngle=Math.atan2(vec.y,vec.x);
     angle=(tmpAngle-Math.PI/2)/Math.PI*180;
     var picSymbol =  new PictureMarkerSymbol({
         "url":"img/car.png",
         "height":32,
         "width":18,
         "type":"esriPMS",
         "angle": angle,
     });
     carGraphic=new Graphic(curPosition,picSymbol);
     carLyr.add(carGraphic);
     timer=setInterval(function () {
         if (deltaX!=0||deltaY!=0){
             curPosition=new Point(curPosition.x+deltaX,curPosition.y+deltaY,map.spatialReference);
             if (points[endIdx][0]>points[startIdx][0]&&curPosition.x>points[endIdx][0]) {
                 changeDir()
             }else if(points[endIdx][0]<points[startIdx][0]&&curPosition.x<points[endIdx][0]){
                 changeDir()
             }else if(points[endIdx][1]>points[startIdx][1]&&curPosition.y>points[endIdx][1]){
                 changeDir()
             }else if(points[endIdx][1]<points[startIdx][1]&&curPosition.y<points[endIdx][1]){
                 changeDir()
             }
             var picSymbol =  new PictureMarkerSymbol({
                 "url":"img/car.png",
                 "height":32,
                 "width":18,
                 "type":"esriPMS",
                 "angle": angle,
             });
             carGraphic.setGeometry(curPosition)
             carGraphic.setSymbol(picSymbol)
         }else {
             curPosition=new Point(curPosition.x+deltaX,curPosition.y+deltaY,map.spatialReference);
             var vec ={x:points[endIdx][0]-points[startIdx][0],y:points[endIdx][1]-points[startIdx][1]};
             var tmpAngle=Math.atan2(vec.y,vec.x);
             deltaX=Math.cos(tmpAngle)*speed;
             deltaY=Math.sin(tmpAngle)*speed;
             angle=(tmpAngle-Math.PI/2)/Math.PI*180;
             var picSymbol =  new PictureMarkerSymbol({
                 "url":"img/car.png",
                 "height":32,
                 "width":18,
                 "type":"esriPMS",
                 "angle": angle,
             });
             carGraphic.setGeometry(curPosition)
             carGraphic.setSymbol(picSymbol)
         }
     },100)

完整案例:https://download.csdn.net/download/shijie_nihao/11634510

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值