从零开始的VUE项目-11（轨迹回放）

原创已于 2022-10-19 21:54:17 修改 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #elementui

于 2022-04-20 17:50:34 首次发布

vue项目从0到1 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用JavaScript和Esri API在地图上实现轨迹移动功能，包括配置config.js文件、创建Tra_movement_alarm.js中的关键函数，以及调用和控制小车移动。还提到如何通过随机经纬度点进行模拟，以及控制开始和暂停按钮操作。

代码svn地址（用户名：liu，密码;123）
实现结果：
在这里插入图片描述
忘记抄哪里的了，找了半天没有找到，找到了再改成转载
1,config.js文件里添加下列内容

//轨迹移动使用
window.isPos = true;   //判断小车是否暂停
window.start = 0;      //小车当前点
window.end = 0;        //小车下一个点
window.speed = 1;      //速度

2，util文件夹下新建Tra_movement_alarm.js文件：
将下面代码粘贴到里面

import esriLoader from "esri-loader"
/**
 * 移动轨迹
 * @param {Array[][]} moveTra   轨迹点数组： 例:[[116.895, 36.6513], [116.972, 36.773], [117.089212, 36.65343],……]
 * @param {Number} speed       移动速度：单位 ms
 * @param {Array[]}    attrCar      小车对象属性：例：["imageUrl",imageWidth,imageHeight]
 */
var graphicOfCar;
export const movementInit = (map, moveTra, speed, attrCar, colorTra) => {
        esriLoader.loadCss("https://js.arcgis.com/3.18/esri/css/esri.css");
        esriLoader.loadModules(
                [
                    'esri/geometry/Point',
                    'esri/symbols/PictureMarkerSymbol',
                    'esri/geometry/Polyline',
                    'esri/SpatialReference',
                    'esri/symbols/SimpleLineSymbol',
                    'esri/graphic',
                    'dojo/domReady!',
                ])
            .then(([
                Point,
                PictureMarkerSymbol,
                Polyline,
                SpatialReference,
                SimpleLineSymbol,
                Graphic
            ]) => {
                //初始化轨迹  【选择保留】
                if (window.isPos == true && window.start == 0) {
                    var polyline = new Polyline(moveTra)
                    if (null == colorTra) {
                        var lineSymbol = new SimpleLineSymbol(
                            SimpleLineSymbol.STYLE_DASH,
                            new esri.Color([0, 255, 0]),
                            2
                        )
                    } else {
                        var lineSymbol = new SimpleLineSymbol(
                            SimpleLineSymbol.STYLE_DASH,
                            new esri.Color(colorTra),
                            2
                        )
                    }
                    var graphicOfLine = new Graphic(polyline, lineSymbol)
                    map.graphics.add(graphicOfLine)
                        //初始化小车对象
                    var point = new Point(moveTra[0][0], moveTra[0][1])
                    var pictureMarkerSymbol = new PictureMarkerSymbol(
                        attrCar[0],
                        attrCar[1],
                        attrCar[2]
                    )
                    graphicOfCar = new Graphic(point, pictureMarkerSymbol)
                    map.graphics.add(graphicOfCar)
                    graphicOfCar.geometry.x = moveTra[0][0]
                    graphicOfCar.geometry.y = moveTra[0][1]
                     //小车显示范围，不加这几句代码，则一定比例尺的范围下下小车会不显示
                    graphicOfCar._extent.xmax=118
                    graphicOfCar._extent.xmin=117
                    graphicOfCar._extent.ymax=37
                    graphicOfCar._extent.ymin=36
                    //若还不行再加上下面四句
                    //graphicOfCar._extent.cache._parts[0].extent.xmax=118
                    //graphicOfCar._extent.cache._parts[0].extent.xmin=117
                    //graphicOfCar._extent.cache._parts[0].extent.ymax=37
                    //graphicOfCar._extent.cache._parts[0].extent.ymin=36
                    move(map, 0, 1, speed, graphicOfCar, moveTra)
                } else {
                    move(map, window.start, window.end, speed, graphicOfCar, moveTra)
                }
            })
    }
    //根据序列点坐标 进行移动
function move(map, start, end, rush, car, points) {
    rush = window.speed / 10
        //先算第一个点和第二个点的关系  之后一次算每个点和下一个点的关系
    var x1 = points[start][0]
    var y1 = points[start][1]
    var x2 = points[end][0]
    var y2 = points[end][1]
    var p = (y2 - y1) / (x2 - x1) //斜率
    //var v = 0.001 //距离  距离越小 位置越精确
    var v=0.00001*window.speed
    var moving = setInterval(function() {
        //分别计算 x,y轴方向速度
        if (Math.abs(p) == Number.POSITIVE_INFINITY) {
            //无穷大
            if (p == Number.POSITIVE_INFINITY) {
                car.geometry.y += v
            } else {
                car.geometry.y -= v
            }
        } else {
            if (x2 < x1) {
                car.geometry.x -= (1 / Math.sqrt(1 + p * p)) * v
                car.geometry.y -= (p / Math.sqrt(1 + p * p)) * v
                    //计算汽车角度
                car.symbol.angle = CalulateXYAnagle(x1, y1, x2, y2)
            } else {
                car.geometry.x += (1 / Math.sqrt(1 + p * p)) * v
                car.geometry.y += (p / Math.sqrt(1 + p * p)) * v
                    //计算汽车角度
                car.symbol.angle = CalulateXYAnagle(x1, y1, x2, y2)
            }
        }
        //图层刷新
        map.graphics.redraw()
        if (window.isPos == false) {
            window.start = start
            window.end = end
            clearInterval(moving)
        }
        if (
            Math.abs(car.geometry.x - x2) <= v * 4 &&
            Math.abs(car.geometry.y - y2) <= v * 4
        ) {
            // 误差累计，会造成跳过结束判断
            car.geometry.x = x2
            car.geometry.y = y2
            clearInterval(moving)
            start++
            end++
            if (end < points.length) move(map, start, end, rush, car, points)
        }
    }, rush)
}
//计算小车移动角度
function CalulateXYAnagle(startx, starty, endx, endy) {
    var tan =
        (Math.atan(Math.abs((endy - starty) / (endx - startx))) * 180) / Math.PI +
        90 //车头旋转角度（根据图片调整）
    if (endx > startx && endy > starty) {
        //第一象限
        return -tan + 180
    } else if (endx > startx && endy < starty) {
        //第二象限
        return tan
    } else if (endx < startx && endy > starty) {
        //第三象限
        return tan - 180
    } else {
        //第四象限
        return -tan
    }
}

3，引用js文件里的移动方法

import {
  movementInit
} from "../../util/Tra_movement_alarm.js";

4，轨迹回放方法

 //回放轨迹方法
    guijiMap () { 
          //地图对象
          let map = window.map;
          //初始速度
          var carspeed = this.speed;
          var arr_jwd=[]
          for (let i = 0; i < this.allList.length; i++) {
            var array_jdwd = [];
            //经度
            var lon = this.allList[i].X
            //纬度
            var lat =  this.allList[i].Y
            array_jdwd.push(lon);
            array_jdwd.push(lat);
            arr_jwd.push(array_jdwd);
          }
          //轨迹点数组
          var points0 = JSON.parse(JSON.stringify(arr_jwd));
          this.points = points0;
          //小车
          var carattr = [carImage, 20, 35];
          //轨迹线颜色
          var color0 = [0, 255, 0];
          movementInit(map, points0, carspeed, carattr, color0);
    },

小车图片：在这里插入图片描述

如果后台暂时没有数据，可以前端先随机一些经纬度点使用，方法如下：

//产生十个随机经纬度点坐标
    randomLonandLat () {
      var arr_jwd = [];
      for (var i = 0; i < 10; i++) {
        var array_jdwd = [];
        //经度
        var lon = Math.random().toFixed(3) * (117.158 - 117.092) + 117.092;
        //纬度
        var lat = Math.random().toFixed(3) * (36.673 - 36.644) + 36.644;
        array_jdwd.push(lon);
        array_jdwd.push(lat);
        arr_jwd.push(array_jdwd);
      }
      return arr_jwd;
    },

即将原先guijiMap方法里的

var points0 = JSON.parse(JSON.stringify(arr_jwd));

改成：

var points0 = JSON.parse(JSON.stringify(this.randomLonandLat()));

5,现在我们来使用这个guijiMap方法，
新建“开始”按钮和“暂停”按钮
开始按钮对应的方法：

 //开始轨迹移动
    startMove () {
      window.speed = this.speed;
      this.startState = true;
      this.endState = false;
      window.isPos = true;
      let map = window.map;
      let carspeed = 10;
      let points0 = this.points;
      var carattr = [carImage, 20, 35];
      var color0 = [0, 255, 0];
      //默认开始的移动
      if (window.start == 0) {
        this.guijiMap();
      }
      //由暂停开始的移动
      else {
        movementInit(map, points0, carspeed, carattr, color0);
      }
    },

暂停按钮对应的方法：

  //暂停轨迹移动
    endMove () {
      this.startState = false;
      this.endState = true;
      window.isPos = false;
      window.start = 1;
    },

完整代码