hik-map/amap/methods/moveto/index.ts

- 提炼自浙江海康智联科技有限公司中后台产品的交互语言和视觉风格。 - 开箱即用的高质量 Vue 组件。

/*
author cuijin
version 1.0.0
time 2022-15-16
*/
import loadMarker from '../marker/index';
import { warnFilter } from './warn';
import { moveObj } from './interface';
import coordtransform from 'coordtransform';
/**
 *      用于通过ws在地图上展示车辆实时移动位置等
 *
 *      coordtransform：经纬度转换（84-高德） 默认：false
 *      autoRotation：自动计算车辆行驶过程中的航向角 默认：false
 *      heading：设置车辆行驶过程中的航向角 默认：0度
 *必填  lnglat：行驶至此坐标点
 *      duration：marker行驶到下一点需要的动画移动时间，默认：0 单位：毫秒
 *      img：行驶的车辆图片
 *      size：行驶车辆的大小 [宽度，长度]
 *必填  id：行驶车辆的唯一标识
 *      delete：当ws在设定秒数没有推送此marker的id，则在地图上删除此marker 默认5秒
 *      followcenter：启用地图中心点跟随 默认：false，当存在多个maker时，请勿开启此功能
 *      followheading：启用地图旋转角度跟随 默认：false，规格：180或360
 *      mileage：当两个坐标点相差超过固定米数后再让车辆移动（主要解决密集点数车头晃动问题，但会导致轻微延迟）
 */
const idList = [];
const marketList = [];
const rotationList = [];

let mapAngle = 0;
let mapDiff = 0;
let initialOneTime = true;
let throttleStatus = true;

let deleteStatus = 0;
const moveTo = function (mapInstance, e: moveObj) {
  if (deleteStatus === 0) {
    deleteMarker(mapInstance, e.deleteTime);
    deleteStatus = 1;
  }
  if (warnFilter(e).status === 'lnglatfalse') {
    return;
  }
  if (warnFilter(e).status === 'idfalse') {
    return;
  }
  //设置默认图片
  if (warnFilter(e).status === 'imgfalse') {
    e.img = warnFilter(e).content;
  }
  //设置marker默认大小
  if (warnFilter(e).status === 'sizefalse') {
    e.size = warnFilter(e).content;
  }
  //设置默认deletime时间
  if (!e.deleteTime) {
    e.deleteTime = 5;
  }

  if (e.coordtransform) {
    e.lnglat = coordtransform.wgs84togcj02(e.lnglat[0], e.lnglat[1]);
  }
  if (e.follow) {
    mapInstance.map.setCenter(e.lnglat, false, e.duration);
  }
  const myDate = new Date().getTime();
  if (idList.indexOf(e.id) == -1) {
    // mapInstance.map.setCenter(e.lnglat);
    idList.push(e.id);
    const markerObj = {
      img: e.img,
      size: e.size,
      position: e.lnglat,
      type: 'marker',
    };
    const marker = loadMarker(mapInstance, markerObj);
    marker.getExtData().time = myDate;
    marker.getExtData().id = e.id;
    marketList.push(marker);
  } else {
    for (let i = 0, len = marketList.length; i < len; i++) {
      if (marketList[i].getExtData().id == e.id) {
        const currentPosition = [marketList[i].getPosition().lng, marketList[i].getPosition().lat];
        const currentDis = mapInstance.AMap.GeometryUtil.distance(currentPosition, e.lnglat);
        const currentMileage = !e.mileage ? 0 : e.mileage;
        //TODO
        marketList[i].getExtData().time = myDate;
        if (currentDis >= currentMileage) {
          mapInstance.AMap.plugin(['AMap.MoveAnimation'], () => {
            marketList[i].moveTo(e.lnglat, {
              duration: e.duration || 0,
              autoRotation: e.heading || e.heading !== undefined ? false : true,
            });
          });
          if (e.heading) {
            marketList[i].setAngle(e.heading);
          }
        }
      }
    }
  }
  if (e.rotation || e.rotation !== undefined) {
    let heading = e.heading;
    if (e.rotation === 180) {
      if (heading < 0) {
        heading = 360 + heading;
      }
    }
    throttleRotation(mapInstance, heading, e.rotationFrequency);
  }
};
/*
throttleStatus:节流旋转地图
*/
function throttleRotation(mapInstance, heading, frequency) {
  if (!throttleStatus) {
    return;
  }
  throttleStatus = false;
  setTimeout(() => {
    if (heading !== mapAngle) {
      rotationMap(mapInstance, heading, frequency);
    }
    throttleStatus = true;
  }, frequency);
}
function deleteMarker(mapInstance, deleteTime) {
  setInterval(() => {
    const myDate = new Date().getTime();
    marketList.map((arr, index) => {
      const diffTime = (myDate - arr.getExtData().time) / 1000;
      if (diffTime >= deleteTime) {
        mapInstance.map.remove(marketList[index]);
        idList.splice(index, 1);
        marketList.splice(index, 1);
      }
    });
  }, 1000);
}
/*
initialOneTime:控制初始角度只被赋值一次
initialAngle：初始角度
rotationList：角度合计，通过合计计算出相邻两个角度的角度差
mapDiff：角度差
*/
function rotationMap(mapInstance, heading, frequency) {
  if (initialOneTime) {
    mapAngle = heading;
    initialOneTime = false;
  }
  rotationList.push(heading);
  if (rotationList.length === 2) {
    if (rotationList[0] >= 270 && rotationList[1] <= 90) {
      //第四象限转向第一象限
      mapDiff = 360 - rotationList[0] + rotationList[1];
    } else if (rotationList[0] <= 90 && rotationList[1] >= 270) {
      //第一象限转向第四象限
      mapDiff = -(360 - rotationList[1] + rotationList[0]);
    } else {
      mapDiff = rotationList[1] - rotationList[0];
    }
    mapAngle = mapAngle + mapDiff;
    mapInstance.map.setRotation(-mapAngle, false, frequency);
    rotationList.shift();
  }
}
export default moveTo;