15.gis车辆轨迹回放之openlayers

准备数据

// 含属性点位
var points = [];
//移动车辆速度
var moveSpeed = 500;//移动速度
//所有移动的坐标
var allMovePoints = [];
//所有移动的坐标索引
var allMovePointsIndex = [];
var movings = [];

操作

开始暂停恢复停止

export const start = (datas) => {
  if (datas && datas.length) {
    clean();
    addLayer()
    datas.forEach((items, index) => {
      allMovePointsIndex.push(0)
      let pointArray = [];
      if (items && items.length) {
        let pointindex = []
        items.forEach((item) => {
          if (item.LNG && item.LAT) {
            pointindex.push(item);
            pointArray.push([Number(item.LNG), Number(item.LAT)]);
          }
        });
        points.push(pointindex)
        if (pointArray && pointArray.length) {
          creatCarLine(pointArray, pointindex);
          createCarIcon(pointArray[0][0], pointArray[0][1], pointArray[1][0], pointArray[1][1], index);
          let allMovePoint = getAllMovePoint(pointArray, 50);
          allMovePoints.push(allMovePoint)
          //进行移动
          let moving = setInterval(() => {
            showPoint(index)
          }, moveSpeed);
          movings.push(moving)
        }
      }
    })
  }
};


const removeLayer = (id) => {
  for (let layerTmp of window.$olMap.getLayers().getArray()) {
    if (layerTmp.get("id") === id) {
      window.$olMap.removeLayer(layerTmp);
    }
  }
};
const addLayer = () => {
  // 轨迹
  let vectorLayer = new VectorLayer({
    id: "carline",
    source: new VectorSource({ features: [] }),
    style: new Style({
      stroke: new Stroke({
        width: 6,
        color: "blue",
      })
    })
  });

  // 活动轨迹
  let hdvectorLayer = new VectorLayer({
    id: "hdcarline",
    source: new VectorSource({ features: [] }),
    style: new Style({
      stroke: new Stroke({
        width: 6,
        color: "black",
      })
    })
  });
  // 正常点
  let zcvectorLayer = new VectorLayer({
    id: "zcpointid",
    source: new VectorSource({ features: [] }),
    style: function (feature) {

      return new Style({
        image: new Icon({
          src: zcdwimg,
          scale: [0.4, 0.4],
        }),
        zIndex: 10,
      })
    }
  });
  // 起始点
  let sevectorLayer = new VectorLayer({
    id: "qspointid",
    source: new VectorSource({ features: [] }),
    style: function (feature) {
      let imgs = { start: startimg, end: endimg }
      return new Style({
        image: new Icon({
          src: imgs[feature.get("staus")],
          scale: [1, 1],
        }),
        zIndex: 11,
      })
    }
  });
  // 超标点
  let cbvectorLayer = new VectorLayer({
    id: "cbpointid",
    source: new VectorSource({ features: [] }),
    style: new Style({
      image: new Icon({
        src: ycimg,
        scale: [0.5, 0.5],
      })
    })
  });
  // 活动车辆
  var carLayer = new VectorLayer({
    id: "carpoint",
    source: new VectorSource({ features: [] }),
    style: function (feature) {
      return new Style({
        image: new Icon({
          rotation: feature.get("angle"),
          scale: [0.7, 0.7],
          src: carPic
        })
      })
    }
  });
  window.$olMap.addLayer(zcvectorLayer)
  window.$olMap.addLayer(vectorLayer)
  window.$olMap.addLayer(hdvectorLayer)
  window.$olMap.addLayer(cbvectorLayer)
  window.$olMap.addLayer(sevectorLayer)

  window.$olMap.addLayer(carLayer)
};
// 车辆暂停
export const stopMove = () => {
  movings.forEach((moving, index) => {
    clearInterval(moving);
    movings[index] = undefined
  })

};
// 车辆继续
export const goOn = () => {
  movings.forEach((moving, index) => {
    if (moving !== undefined) {
      clearInterval(moving); // 清除移动
    }
    movings[index] = setInterval(() => {
      showPoint(index)
    }, moveSpeed);

  })



};
// 车辆返回
export const back = () => {
  movings.forEach((moving, index) => {
    if (moving != null) {
      clearInterval(moving); // 清除移动
    }
    allMovePointsIndex[index] = 0;

    let hdlinelayer = getLayerByid("hdcarline");
    if (hdlinelayer) {
      let pf = hdlinelayer.getSource().getFeatures()
      if (pf.length > 0) {
        hdlinelayer.getSource().clear()
      }
    }
    movings[index] = setInterval(() => {
      showPoint(index)
    }, moveSpeed);

  })
};
// 清除
export const clean2 = () => {
  movings.forEach((moving, index) => {
    if (moving != null) {
      clearInterval(moving); // 清除移动
    }
  })

  let carlayer = getLayerByid("carpoint");
  if (carlayer) {
    carlayer.getSource().clear()
  }
  let hdcarline = getLayerByid("hdcarline");
  if (hdcarline) {
    hdcarline.getSource().clear()
  }
};

初始化

通过已有轨迹数据按速度生成新的加密点的轨迹数据，及该点的方向通过start调用开启循环调用

export const createCarIcon = (x1, y1, x2, y2, index) => {
  var transRotate = getAngle(x1, y1, x2, y2);
  var carOverLay = new Feature({
    angle: transRotate,
    id: "carpoint",
    index: index,
    geometry: new Point([x1, y1])
  });
  let player = getLayerByid("carpoint")
  player.getSource().addFeature(carOverLay)
};


function getAngle(lng_a, lat_a, lng_b, lat_b) {
  var a = (90 - lat_b) * Math.PI / 180;

  var b = (90 - lat_a) * Math.PI / 180;

  var AOC_BOC = (lng_b - lng_a) * Math.PI / 180;

  var cosc = Math.cos(a) * Math.cos(b) + Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC);

  var sinc = Math.sqrt(1 - cosc * cosc);

  var sinA = Math.sin(a) * Math.sin(AOC_BOC) / sinc;

  var A = Math.asin(sinA) * 180 / Math.PI;

  var res = 0;

  if (lng_b > lng_a && lat_b > lat_a) res = A;
  else if (lng_b > lng_a && lat_b < lat_a) res = 180 - A;
  else if (lng_b < lng_a && lat_b < lat_a) res = 180 - A;
  else if (lng_b < lng_a && lat_b > lat_a) res = 360 + A;
  else if (lng_b > lng_a && lat_b == lat_a) res = 90;
  else if (lng_b < lng_a && lat_b == lat_a) res = 270;
  else if (lng_b == lng_a && lat_b > lat_a) res = 0;
  else if (lng_b == lng_a && lat_b < lat_a) res = 180;
  // res=res-80
  // 角度转弧度
  return Math.PI / 180 * res;

}

const formatLength = (pointArray) => {
  var length = 0;
  for (var i = 0, ii = pointArray.length - 1; i < ii; ++i) {
    var c1 = pointArray[i];

    var c2 = pointArray[i + 1];

    length += getDistance(c1, c2);
  }
  return length;
}

const getCenterPoint = (pointDoubleArray, cell) => {
  cell = cell == undefined ? 50 : cell;
  var twolength = formatLength(pointDoubleArray);
  if (twolength !== 0) {
    var rate = twolength / cell; //比例 默认5m/点
    var step = Math.ceil(rate); //步数(向上取整)
    var arr = new Array(); //定义存储中间点数组
    var c1 = pointDoubleArray[0]; //头部点
    var c2 = pointDoubleArray[1]; //尾部点
    var x1 = c1[0], y1 = c1[1];
    var x2 = c2[0], y2 = c2[1];
    for (var i = 1; i < step; i++) {
      var coor = {};
      coor.x = ((x2 - x1) * i) / rate + x1;
      coor.y = ((y2 - y1) * i) / rate + y1;
      arr.push(coor); //此时arr为中间点的坐标
    }
    arr.push({ x: c2[0], y: c2[1] });
    return arr;
  } else {
    return [];
  }
};

/*得到所有要移动的点位*/
export const getAllMovePoint = (pointArray, cell) => {
  cell = cell == undefined ? 50 : cell;
  var brr = new Array();
  brr.push({ x: pointArray[0][0], y: pointArray[0][1] }); //添加起点
  for (var i = 0; i < pointArray.length - 1; i++) {
    var coor1 = pointArray[i];
    var coor2 = pointArray[i + 1];
    var crr = getCenterPoint([coor1, coor2], cell);
    for (var a = 0; a < crr.length; a++) {
      brr.push(crr[a]);
    }
  }

  return brr;
};

export const showPoint = (index) => {
  if (allMovePointsIndex[index] + 1 < allMovePoints[index].length) {
    var firstPoint = allMovePoints[index][allMovePointsIndex[index]];
    var secondPoint = allMovePoints[index][allMovePointsIndex[index] + 1];
    var transRotate = getAngle(firstPoint.x, firstPoint.y, secondPoint.x, secondPoint.y);
    var carlayer = getLayerByid("carpoint");
    let cars = carlayer.getSource().getFeatures().filter(ite => ite.values_.index === index)
    if (cars.length > 0) {
      carlayer.getSource().removeFeature(cars[0])
    }
    let po = [allMovePoints[index][allMovePointsIndex[index]].x, allMovePoints[index][allMovePointsIndex[index]].y]
    var carOverLay = new Feature({
      angle: transRotate,
      id: "carpoint",
      index: index,
      geometry: new Point(po)
    });
    carlayer.getSource().addFeature(carOverLay)
    // 活动线轨迹
    let hdlinelayer = getLayerByid("hdcarline");
    if (hdlinelayer) {
      let pf = hdlinelayer.getSource().getFeatures()
      if (pf.length > 0) {
        let coors = pf[0].getGeometry().getCoordinates()
        coors.push(po)
        pf[0].getGeometry().setCoordinates(coors)
      } else {
        let hdroute = new LineString([po, po]);
        let hdrouteFeature = new Feature({
          geometry: hdroute,
        });
        hdlinelayer.getSource().addFeature(hdrouteFeature)
      }
    }
    allMovePointsIndex[index]++;
  } else {
    if (movings[index] !== undefined) {
      clearInterval(movings[index]) // 清除移动
    }
  }
};


export const creatCarLine = (pointArray, pointindex) => {
  // 线
  let vectorLayer = getLayerByid("carline")
  var route = new LineString(pointArray);
  var routeFeature = new Feature({
    geometry: route,
  });
  vectorLayer.getSource().addFeature(routeFeature)
  //点 
  let zcvectorLayer = getLayerByid("zcpointid")
  let sevectorLayer = getLayerByid("qspointid")
  let cbvectorLayer = getLayerByid("cbpointid")
  let le = pointArray.length
  pointArray.forEach((item, index) => {
    let staus = "zcd"
    if (index == 0) {
      staus = "start"
    } else if (index == (le - 1)) {
      staus = "end"
    }
    pointindex[index].zs = le
    pointindex[index].ds = index + 1
    let f = new Feature({
      staus: staus,
      attributes: pointindex[index],
      geometry: new Point(item),
    })
    if (pointindex[index].EXCEEDING !== "未超标") {
      cbvectorLayer.getSource().addFeature(f);
    } else {
      zcvectorLayer.getSource().addFeature(f);
    }

    if (index == 0 || (index == le - 1)) {
      sevectorLayer.getSource().addFeature(f);
    }
  });

  window.$olMap.getView().fit(routeFeature.getGeometry(),
    { duration: 1000 })

};

结果展示