15.gis车辆轨迹回放之openlayers

原创

已于 2023-09-27 14:48:04 修改 · 377 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #arcgis

于 2023-08-24 16:54:30 首次发布

本文描述了一个使用JavaScript和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