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

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

/*
author cuijin
version 1.0.0
time 2022-15-16
*/
import loadMarker from '../marker/index';
import { warnFilter } from './warn';
import coordtransform from 'coordtransform';
/*
holographic() 全息路口车辆展示（周边车辆展示）
      coordtransform 是否需要将WGS-84坐标系转为高德坐标系
      autoRotation 行驶过程中自动摆正行驶车辆的航向角
必填  lnglat 全息车辆的目的经纬度
必填  id 全息车辆的唯一id
      size 全息车辆的大小
      img 全息车辆图片
      deleteTime 当ws在设定秒数没有推送此辆车的id，则在地图上删除此辆车,单位：秒
      duration 车辆行驶到下一点需要的动画移动时间,单位：毫秒
      mileage 当后端传送的坐标点达到固定米数后，再让车辆移动（主要解决密集点数车头晃动问题，会导致轻微延迟）,单位：米
      disLnglat 基准点
      dis 展示以基准点为中心，设定半径内的全息数据
      markerLabel 车辆相关信息展示，不传则不展示
*/
/*
deleteMarker() 通过时间戳匹配所有id，设定秒数不推送数据后，在地图上删掉此marker
*/
const idList: any = [];
const marketList: any = [];
let deleteOneTime = 0;
const holographic = function (mapInstance, data, markerLabel) {
  if (!mapInstance.map) {
    console.warn('地图实例为空，请在地图加载完成后再执行业务逻辑');
    return;
  }
  const myDate = new Date().getTime();
  if (data.disLnglat && data.disLnglat.length === 2) {
    const datumPoint = mapInstance.AMap.GeometryUtil.distance(data.lnglat, data.disLnglat);
    if (datumPoint > data.dis) {
      return;
    }
  }

  if (deleteOneTime === 0) {
    if (!data.deleteTime) {
      data.deleteTime = 1;
    }
    //执行删除方法
    deleteMarker(mapInstance, data.deleteTime);
    deleteOneTime = 1;
  }
  if (warnFilter(data).status === 'lnglatfalse') {
    return;
  }
  if (warnFilter(data).status === 'idfalse') {
    return;
  }
  //设置默认图片
  if (warnFilter(data).status === 'imgfalse') {
    data.img = warnFilter(data).content;
  }
  //设置默认移动距离
  if (warnFilter(data).status === 'mileagefalse') {
    data.mileage = warnFilter(data).content;
  }
  //设置marker默认大小
  if (warnFilter(data).status === 'sizefalse') {
    data.size = warnFilter(data).content;
  }

  //设置默认deletime时间
  if (!data.deleteTime) {
    data.deleteTime = 1;
  }
  if (data.coordtransform) {
    data.lnglat = coordtransform.wgs84togcj02(data.lnglat[0], data.lnglat[1]);
  }
  if (idList.indexOf(data.id) == -1) {
    idList.push(data.id);
    const markerObj = {
      type: 'marker',
      img: data.img,
      size: data.size,
      position: data.lnglat,
      id: data.id,
      time: myDate,
      lnglat: data.lnglat,
    };
    const marker = loadMarker(mapInstance, markerObj);
    /*设置第一次使用设备传入航向角，之后使用地图自己计算角度 */
    if (data.oneTimeHeading) {
      marker.setAngle(data.oneTimeHeading);
    }
    //是否展示车辆相关信息
    let marker_title = null;
    // 如果text内容为空则不创建
    if (markerLabel && markerLabel.text && markerLabel.text !== '') {
      markerLabel.position = data.lnglat;
      marker_title = loadMarker(mapInstance, markerLabel);
    }
    marketList.push({
      marker: marker,
      title: marker_title,
    });
  } else {
    for (let i = 0; i < marketList.length; i++) {
      if (marketList[i].marker.getExtData().id == data.id) {
        mapInstance.AMap.plugin(['AMap.MoveAnimation'], () => {
          const dis = mapInstance.AMap.GeometryUtil.distance(
            marketList[i].marker.getExtData().lnglat,
            data.lnglat,
          );
          if (dis >= data.mileage) {
            /*使用设备传入的航向角 */
            if (!data.autoRotation) {
              marketList[i].marker.setAngle(data.heading);
              data.autoRotation = false;
            }
            marketList[i].marker.moveTo(data.lnglat, {
              duration: data.duration ? data.duration : 1000,
              autoRotation: data.autoRotation,
            });
            if (marketList[i].title) {
              if (markerLabel.text === '' || !markerLabel.text) {
                //如果text未传入，隐藏text
                marketList[i].title.hide();
              } else {
                //如果text传入，展示text
                marketList[i].title.show();
                marketList[i].title.setText(markerLabel.text);
              }
              marketList[i].title.moveTo(data.lnglat, {
                duration: data.duration ? data.duration : 1000,
              });
            }
            if (!marketList[i].title) {
              if (markerLabel && markerLabel.text && markerLabel.text !== '') {
                //第一次传入时text为空，后续传入text，则重新创建text
                markerLabel.position = data.lnglat;
                marketList[i].title = loadMarker(mapInstance, markerLabel);
              }
            }
          }
        });
        marketList[i].marker.getExtData().lnglat = data.lnglat;
        marketList[i].marker.getExtData().time = myDate;
        if (marketList[i].title) {
          marketList[i].title.getExtData().lnglat = data.lnglat;
          marketList[i].title.getExtData().time = myDate;
        }
      }
    }
  }
};
function deleteMarker(mapInstance, deleteTime) {
  setInterval(() => {
    const myDate = new Date().getTime();
    marketList.map((arr, index) => {
      const diffTime = (myDate - arr.marker.getExtData().time) / 1000;
      if (diffTime >= deleteTime) {
        mapInstance.map.remove(marketList[index].marker);
        if (marketList[index].title) {
          mapInstance.map.remove(marketList[index].title);
        }
        idList.splice(index, 1);
        marketList.splice(index, 1);
      }
    });
  }, 500);
}
export default holographic;