xzlz_JczWeb/src/components/GdMap/mapUtil.js

import emitter from "@/utils/eventBus.js";

export function MapUtil(map) {
  let _that = this;
  _that.mMap = map; //地图对象
  _that._self = {};//图层对象
  _that._CustomDraw = null;//自定义绘图
  _that.polygonGeo = null;//边界
  _that.idsBox = {} //存放id的容器（需要某个标记单个删除的时候存储）
  _that.isCheck = false
  /**
   * 设置地图中心点以
   * @param {*} location 中心坐标 [jd,wd]
   * @param {*} zoomLevel 层级  10
   */
  MapUtil.prototype.setMapCenter = (location, zoomLevel) => {
    map.mapboxGLMap.setCenter(location);
    map.mapboxGLMap.setZoom(zoomLevel);
  };

  /**
   * 撒点.鼠标滑动展示内容
   * @param {*} coords 坐标 geojson
   * @param {*} icon 图标
   * @param {*} flag 标识
   */
  MapUtil.prototype.showPoint = (res) => {
    let { coords, icon, flag, iconH } = res
    if (!coords) return;
    if (!_that._self[flag]) _that._self[flag] = [];
    let pointList = coords.map((it, index) => {
      let text = it.kfdMc || it.wzBc || it.gajgmc || it.xm || it.jczmc;
      let obj = {
        position: [it.jd, it.wd],
        userData: { deviceSn: 'text' + index, area: text },
        id: it.id,
        text: text,
        data: it
      }
      if (it.jd && it.wd) return obj;
    });

    const point = map.createdPoint(pointList, {
      image: icon,//对应上面的图片名称
      scale: 1,
      highlightImage: iconH ? iconH : icon,//高亮图标
      labelOption: {
        pixelOffset: [0, -2],
        allShow: false,
        fontSize: '18px',
        fontWeight: 600,
        fontColor: '#000000'
      }
    })
    _that._self[flag].push(point)


    point.addEventListener("click", (val) => {
      let data = val.data ? JSON.parse(val.data) : {};
      // point.highlight(data.id) //高亮展示选中的点位
      _that.openInfoDetail(flag, [data]) //点击打开详情
    })
  }

  /**
   * 撒点
   * @param {*} coords 坐标 geojson
   * @param {*} icon 图标
   * @param {*} flag 标识
   * @param {*} showTitle 是否展示标题
   */

  MapUtil.prototype.makerSki = (res) => {
    let { coords, icon, flag, showTitle, size, offset } = res
    if (!coords) return;
    if (!_that._self[flag]) _that._self[flag] = []; //存储地图标识的容器
    if (!_that.idsBox[flag]) _that.idsBox[flag] = []; //存储id的容器
    if (flag == 'rx') {
      _that.handlePolice(coords, icon, flag, showTitle)
    } else {
      coords.forEach(item => {
        let el = document.createElement("img");
        el.src = item.icon || icon;
        el.style.width = size ? size : "25px";
        if (flag.includes('jczMap_')) el.style.width = '45px';
        if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag, '', offset) //展示标题
        const marker = map.Marker(el, [item.jd, item.wd], { anchor: 'bottom', offset: [0, 0] })
        el.addEventListener("click", () => {
          _that.openInfoDetail(flag, item) //点击打开详情
        })
        _that._self[flag].push(marker)
        _that.idsBox[flag].push(item.id)
      });
    }
  };


  // 警力处理展示
  MapUtil.prototype.handlePolice = (coords, icon, flag, showTitle) => {
    // 01-大型车辆-DXCL， 02-小型车辆=XXCL，03-摩托车-MTC，04-其他车辆-QTCL，05-重型车辆-ZXCL，06-风控车-FKC，07-巡逻车-XLC，08-装甲车-ZJC
    coords.forEach(item => {
      let el = document.createElement("img");
      let jcIcon = require(`@/assets/point/police-car-bx.png`);
      switch (item.lx) {
        case '01': // 特警
          jcIcon = require(`@/assets/point/specialPolice.png`);
          break;
        case '02': // 交警
          jcIcon = require(`@/assets/point/trafficPolice.png`);
          break;
        case '03': // 派出所民警
          jcIcon = require(`@/assets/point/peoplePolice.png`);
          break;
        default: // 默认图标
          jcIcon = require(`@/assets/point/specialPolice.png`);
          break;
      }
      if (item.zzlx == 1) jcIcon = require(`@/assets/point/by.png`); //便衣
      let cllxList = item.cllx ? item.cllx.split(',') : [];

      if ((cllxList.includes('03') || cllxList.includes('04')) && item.lx == '02') jcIcon = require(`@/assets/point/xljmtc.png`); //交警-摩托车
      if ((cllxList.includes('03') || cllxList.includes('04')) && item.lx == '01') jcIcon = require(`@/assets/point/tjc.png`); //特警-摩托车
      if (cllxList.includes('08') || cllxList.includes('06')) jcIcon = require(`@/assets/point/zjc.png`); //装甲车

      el.src = jcIcon;
      let isShoeCar = cllxList.includes('03') || cllxList.includes('08') //车辆类型
      // el.style.width = isShoeCar ? '38px':"25px"; //图片大小
      // if(cllxList.includes('08')) el.style.height = '40px'
      if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag) //展示标题
      _that.shouIcon(item, [item.jd, item.wd]); // 展示装备图标

      let offset = isShoeCar ? [-10, 0] : [0, 0];
      if (cllxList.includes('08')) offset = [-12, -10]
      const marker = map.Marker(el, [item.jd, item.wd], { anchor: 'bottom', offset: offset })
      el.addEventListener("click", () => {
        _that.openInfoDetail(flag, item) //点击打开详情
      })
      _that._self[flag].push(marker)
      _that.idsBox[flag].push(item.id)
    });
  }

  // 信息框展示
  MapUtil.prototype.makerShowTitle = (item, points, flag, text, offset) => {

    let T = flag == 'rx' ? 'rxTitle' : 'Title'
    let flagT = flag + T;
    if (!_that._self[flagT]) _that._self[flagT] = [];

    // 展示名字
    let textTitle = item.jzMc ? item.jzMc : item.fzrXm + '警组';
    if (flag == 'sbwz_car' || flag == 'sbwz_sb' || flag == 'sbwz_zfjly') textTitle = item.sbmc;
    if (flag == 'gapText') textTitle = text;
    if (flag == 'bxd' || flag == "search_bxd") textTitle = item.bxdMc;
    // 设置样式
    const el = document.createElement('div');
    if (flag == 'hm') {
      // 直接设置元素样式属性，避免对象赋值的兼容性问题
      el.style.fontSize = '12px';
      el.style.color = '#ffffffff';
      el.style.fontWeight = 'bold';
      el.style.textAlign = 'center';
      el.style.backgroundColor = '#1891ff82';
      el.style.padding = '2px';
      // 添加额外的样式属性以确保良好的显示效果
      el.style.borderRadius = '4px';
      el.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.3)';
      el.style.zIndex = '1000';
    }

    el.className = 'makerTitle';
    if (flag == 'sbwz_car' || flag == 'sbwz_sb' || flag == 'sbwz_zfjly' || flag == 'bxd' || flag == "search_bxd") el.className = 'makerTitlezb';
    if (flag == 'rx') {
      if (item.xfzt == '0') el.classList.add('makerTitleLine');
      else if (item.xfzt == '1') el.classList.add('makerTitlecj');
      else el.classList.add('makerTitleUnLine');
    }
    if (flag == 'gapText') el.className = 'makerTitleGapText';

    // 渲染
    el.innerHTML = textTitle;
    const marker = map.Marker(el, points, { anchor: 'bottom', offset: offset ? offset : [0, -50] })
    _that._self[flagT].push(marker)
  }



  /**
   * 装备图标
   * @param {点位数据} data
   * @param {点} point
   */
  MapUtil.prototype.shouIcon = (data, point) => {
    if (!_that._self.gpsZb) _that._self.gpsZb = []
    var qxIcon = require(`@/assets/point/qx.png`); //qixie
    var zfjlyIcon = require(`@/assets/point/interphone.png`); // 对讲机
    var clIcon = require(`@/assets/point/car.png`); // 车辆
    let jyqx = typeof data.jyqx == "string" ? JSON.parse(data.jyqx) : data.jyqx ? data.jyqx : [];
    let txzb = typeof data.txzb == "string" ? JSON.parse(data.txzb) : data.txzb ? data.txzb : [];
    let pbcl = typeof data.pbcl == "string" ? JSON.parse(data.pbcl) : data.pbcl ? data.pbcl : [];
    let list = []
    let cl = (pbcl && pbcl.length > 0) ? true : false; // 车辆
    let zb = (txzb && txzb.length > 0) ? true : false; // 智能装备
    let qx = (jyqx && jyqx.length > 0) ? true : false; // 常用装备
    if (zb) {
      let el = document.createElement("img");
      el.style.width = "15px"
      el.src = zfjlyIcon;
      const makerZb = map.Marker(el, point, { anchor: 'bottom', offset: [20, -26] })
      list.push(makerZb)
    }
    if (qx) {
      let elqx = document.createElement("img");
      elqx.style.width = "15px"
      elqx.src = qxIcon;
      const makerQx = map.Marker(elqx, point, { anchor: 'bottom', offset: [20, -10] })
      list.push(makerQx)
    }
    if (cl) {
      let elcl = document.createElement("img");
      elcl.style.width = "20px"
      elcl.src = clIcon;
      const makerCl = map.Marker(elcl, point, { anchor: 'bottom', offset: [20, 2] })
      list.push(makerCl)
    }
    _that._self.gpsZb[data.id] = list
  }


  // 自定义展示
  MapUtil.prototype.zdySquire = (obj) => {
    let { points, flag, distance } = obj
    if (!_that._self[flag]) _that._self[flag] = [];
    let textTitle = '距离：' + distance; // 展示名字
    const el = document.createElement('div');
    el.className = 'makerTitle';
    if (flag == 'distance') el.className = 'makerTitleDistance'; // 设置样式
    el.innerHTML = textTitle;
    const marker = map.Marker(el, points, { anchor: 'bottom', offset: [0, -76] }) // 渲染
    _that._self[flag].push(marker)
  }

  /**扩散圆
   * @param coords:[jd,wd]
  */
  MapUtil.prototype.diffusionCircle = (obj) => {
    let { coords, flag, isClear } = obj
    if (!_that._self[flag]) _that._self[flag] = {}
    if (isClear) _that._self[flag].destroy() //destroy销毁，show(false) 移除
    let data = [{ position: coords }]
    _that._self[flag] = map.DiffuseCircle(data, {
      radius: 10,
      color: 'rgba(81,217,254)',//扫描扇形的颜色，必须是十六进制或者rgb
      duration: 30,//圆环与上一个圆环出现的间隔时间。配合speed参数可以调整圆圈的数量
      speed: 4 //圆环移动速度
    })
  }

  /**
   * 聚合撒点
   * @param {*} coords 点位数据 geojson  lng lat
   * @param {*} icon 点位图
   */
  MapUtil.prototype.aggregateScatteringPoint = (obj) => {
    let { coords, icon, flag, isclear, scale, fontColor } = obj;
    let points = coords.map(item => {
      item.lng = item.jd;
      item.lat = item.wd;
      return item
    })
    if (!_that._self[flag]) _that._self[flag] = [];
    if (isclear) _that.removeElement(flag) //移除聚合
    let maker = map.clusterLayer(points, {
      id: flag,
      size: 18,
      pixelRange: 60,
      // gradient:{'1':'#00BFFF','10':'#008000', '100':'#FFA500', '1000':'#FF0000'},//可以自定义图片,把颜色换成图片地址
      gradient: { '1': icon, '10': icon, '100': icon, '1000': icon },//可以自定义图片,把颜色换成图片地址
      fontSize: 14,
      fontColor: fontColor ? fontColor : '#001022',
      style: 'custom',// spiral（螺旋形状），circle(圆圈)，custom(自定义)
      image: icon,
      scale: scale ? scale : 1,
      // highlightImage:icon,
      fontFamily: ['Microsoft YaHei']
    })

    _that._self[flag].push(maker)

    //  聚合的点击一个
    maker.addEventListener("click", (val) => {
      _that.openInfoDetail(flag, [val]) //点击打开详情
    })
    // 聚合的多个
    maker.addEventListener("clusterClick", (val) => {
      _that.openInfoDetail(flag, val) //点击打开详情
    })
  };

  /**
   * 热力图
   * @param {*} coords 数组
   */
  MapUtil.prototype.showHeatDrawing = (res) => {
    let { coords, flag, isclear, color } = res;
    if (!_that._self[flag]) _that._self[flag] = [];
    if (isclear) _that.removeElement(flag) //清除热力
    let data = {
      type: 'FeatureCollection',
      features: []
    }
    for (let index = 0; index < coords.length; index++) {
      const item = coords[index];
      let jd = item.lng || item.jd;
      let wd = item.lat || item.wd;
      let mag = item.count <= 10 ? 1.4 : (item.count > 10 && item.count <= 50) ? 1.6 : 1.9;
      let obj = {
        properties: { mag },
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [jd, wd, 0.1] }
      }
      data.features.push(obj)
    }
    let colors = { '0': 'rgba(23,102,172,0)', '0.5': 'rgb(209,229,240)', '1': 'rgb(178,24,43)' }
    if (color) colors = { '0': color[0], '0.5': color[1], '1': color[2] }
    let heartmap = map.HeatMap(data, { colors })
    _that._self[flag].push(heartmap)
  };


  // 清除所有
  MapUtil.prototype.removeAll = () => {
    for (let key in _that._self) {
      console.log(key, 'key');
      if (key != 'rx' && key != 'gpsZb' && !key.includes('rxTitle')) {
        let list = _that._self[key]
        for (let i = 0; i < list.length; i++) {
          const el = list[i];
          console.log(el, 'el');
          if (el && typeof el == 'object') el.destroy() //destory()销毁 , show(false) false:隐藏  true ：展示
          else _that.removePlot(key)
        }
        _that._self[key] = [];
      }
    }
  }

  /**
   * 删除图层要素
   * @param {*} layer 唯一标识
   */
  MapUtil.prototype.removeElement = (layer) => {
    //警力装备
    if (layer == 'gpsZb') {
      for (let key in _that._self.gpsZb) {
        let item = _that._self.gpsZb[key]
        if (item && item.length > 0) {
          for (let child in item) { item[child].destroy() }
          _that._self.gpsZb[key] = []
        }
      }
    }
    if (layer == 'rx') _that.idsBox[layer] = [];
    // 其他图层
    if (!_that._self[layer]) return false;

    if (layer !== 'gpsZb') {
      for (let i = 0; i < _that._self[layer].length; i++) {
        const el = _that._self[layer][i];
        el.destroy()//destory()销毁 , show(false) false:隐藏  true ：展示
      }
      _that._self[layer] = [];

      // d带标题的撒点
      let T = layer == 'rx' ? 'rxTitle' : 'Title'
      let flagT = layer + T;
      if (!_that._self[flagT]) return false;
      for (let i = 0; i < _that._self[flagT].length; i++) {
        const el = _that._self[flagT][i];
        el.destroy()//destory()销毁 , show(false) false:隐藏  true ：展示
      }
      _that._self[flagT] = []
    }
  };
  /**
   * 删除图层的某个要素
   * @param {*} layer 唯一标识
   */
  MapUtil.prototype.removeElementOne = (layer, id) => {
    if (!_that.idsBox[layer]) return false;
    let list = _that.idsBox[layer];
    list.forEach((el, index) => {
      if (el == id) {
        _that.idsBox[layer].splice(index, 1);
        if (_that._self[layer][index]) _that._self[layer][index].destroy()
        _that._self[layer].splice(index, 1)
        if (layer == 'rx') {
          let flagT = layer + 'rxTitle';
          if (_that._self[flagT][index]) _that._self[flagT][index].destroy()
          _that._self[flagT].splice(index, 1)
          _that.removeGpsZbOverlayById(id) //删除图标
        }
      }
    })
  };

  // 删除图标装备
  MapUtil.prototype.removeGpsZbOverlayById = (id) => {
    if (_that._self.gpsZb[id]) {
      try {
        let info = _that._self.gpsZb[id]
        if (info) {
          info.forEach(element => { element.destroy() });
          delete _that._self.gpsZb[id]
        }
      } catch (err) { }
    }
  }


  // 绘制数据的初始化
  MapUtil.prototype.Drawplot = (color) => {
    const { point, line, polygon, circle, rectangle, geoJson, remove, enableEdit } = map.draw({
      lineWidth: 2,
      lineColor: 'rgba(233,168,32,1)',
      fillColor: 'rgba(233,168,32,0.5)',
      color: 'rgba(233,168,32,1)',
      pixelSzie: 0,
    })
    _that._CustomDraw = { point, line, polygon, circle, rectangle, geoJson, remove, enableEdit }
  }
  /**
   * 绘制工具
   * @param {*} type 绘制形状
   * (point 点, line 线, circle 圆, polygon 多边形, rectangle 矩形) ,
   * geoJson:根据geojson回显图
   */
  MapUtil.prototype.plot = (res, resFun) => {
    let { flag, color, linecolor, type, coords } = res
    if (!_that._self[flag]) _that._self[flag] = [];
    if (res.isclear) _that.removePlot(flag); //移除绘制工具
    if (res.isclear && (res.type == 'polygon' || res.type == 'line')) _that.removeEara(flag); //移除回显的面和线条
    switch (type) {
      case 'point':
        _that._CustomDraw.point((val) => { _that.handlePlot(val, type, flag, resFun) })
        break;
      case 'rectangle':
        _that._CustomDraw.rectangle((val) => { _that.handlePlot(val, type, flag, resFun) })
        break;
      case 'circle':
        _that._CustomDraw.circle((val) => { _that.handlePlot(val, type, flag, resFun) })
        break;
      case 'polygon':
        _that._CustomDraw.polygon((val) => { _that.handlePlot(val, type, flag, resFun) }, {
          fillColor: color || 'rgba(233,168,32,0.5)',
          lineColor: linecolor || 'rgba(233,168,32,1)',
        })
        break;
      case 'line':
        _that._CustomDraw.line((val) => { _that.handlePlot(val, type, flag, resFun) })
        break;
      case 'geoJson'://返回面
        let json = {
          type: 'FeatureCollection',
          features: [{
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: coords // coords 是三维数组
            },
            id: flag,
            properties: {
              fillColor: color || 'rgba(233,168,32,1)',
              lineColor: linecolor || 'rgba(233,168,32,1)',
            }
          }],
        }
        _that._CustomDraw.geoJson(json, (data) => { _that.handlePlot(data, type, flag, resFun) })
        break;
    }
  }
  /**
   * 处理自定义数据
   * @param {*} val 返回数据
   * @param {*} type 类型
   * @param {*} flag 唯一标识
   * @param {*} resFun 回调
   */
  // 校验
  MapUtil.prototype.handlePlot = (val, type, flag, resFun) => {
    _that._self[flag].push(val.id)
    let coords = val.positionData; //绘制区域
    resFun(coords, type, flag, val);
  }

  /**
   * 移除绘制工具
   * @param {*} flag 唯一标识
   */
  MapUtil.prototype.removePlot = (flag) => {
    if (!_that._self[flag]) return false;
    _that._self[flag].forEach(v => {
      _that._CustomDraw.remove(v)
    })
  }
  /**
   * 移除绘制面
   * @param {*} flag 唯一标识
   */
  MapUtil.prototype.removeEara = (flag) => {
    _that._CustomDraw.remove(flag)
    _that.removePlot(flag)
  }
  /**
   * 创建线
   * @param {*} type 回显形状
   * (solid 实线, dash 虚线, FlowColor 彩虹线, RoadLine 流线
   */
  MapUtil.prototype.createLine = (res) => {
    let { type, coords, isclear, flag, color, width } = res;
    if (!coords) return false; // coords 是数组对象，可以同时撒多条数据
    if (!_that._self[flag]) _that._self[flag] = [];
    if (isclear) _that.removeElement(flag); //移除回显的线条
    let data = coords.map((item, index) => {
      return {
        position: item.coords[0], //二维数组
        text: '',
        id: index,
        userData: {
          name: item.text
        }
      }
    })
    let line = map.createLine(data, {
      color: color ? color : 'rgba(20, 237, 245,1)',
      width: width ? width : 8,
      type,
      highlightColor: 'red',
      labelOption: {
        pixelOffset: [0, -1],
        allShow: false,
        type: 'text',
        fontColor: 'rgba(20, 237, 245,1)'
      }
    })
    _that._self[flag].push(line)
  }





  /**
   * 回显平面- 圆 - 多边形 - 矩形
   * @param {*} type 回显形状
   * type: 'polygon', 'rectangle
      coords = [{
        position:[[[jd,wd],[jd,wd] ---]], //三维数组
        text,//展示的文字
        id, //唯一标识
        FID, //渲染颜色的标识
        userData:{} //存储数据
    }]

   * type:circle
     coords:[jd,wd]  radius:半径

   * @param {*} text 展示的文字
   */
  MapUtil.prototype.echoPlane = (res) => {
    let { type, coords, fontColor, fontSize, text = '', radius = 0, isclear, flag, id = 1, color, linecolor } = res;
    if (!coords) return;
    if (isclear) _that.removeElement(flag)
    if (!_that._self[flag]) _that._self[flag] = [];
    let color1 = color ? color : 'rgba(29,237,245,0.6)'
    let linecolor1 = linecolor ? linecolor : 'rgba(29,237,245,0.6)'
    let style = {
      color: color1,
      outLineColor: linecolor1,
      outLineWidth: 2,
      highlightColor: 'rgba(255,0,0,0.5)',
      labelOption: {
        pixelOffset: [0, 0],
        allShow: true,
        fontColor: fontColor ? fontColor : '#ffffff',
        fontSize: fontSize ? fontSize : '12px'
      }
    }
    let maker;
    // 圆
    if (type == 'circle') {
      let params = [{ center: coords, radius, text, id }]
      maker = map.createCircle(params, style);
    }

    // 矩形
    if (type == 'rectangle') maker = map.createRectangle(coords, style);

    // 多边形
    if (type == 'polygon') maker = map.createPolygon(coords, style);
    _that._self[flag].push(maker);

    maker.addEventListener("click", (val) => {
      if (flag == 'xfq') {
        maker.highlight(val.id) //高亮展示
        emitter.emit('showXFQinfo', val)
        if (val.id == _that.lightHeight) {
          _that.isCheck = !_that.isCheck
          if (_that.isCheck) {
            maker.highlight(0); //取消高亮展示
            emitter.emit('showXFQinfo', null)
          } else {
            emitter.emit('showXFQinfo', val)
          }
        }
        _that.lightHeight = val.id
      }
      if (flag == 'zdxl_fzyc') {
        emitter.emit('showFzycInfo', { info: val, type: true })
      }
    })
  }


  // 分割线展示文字
  MapUtil.prototype.gapText = (obj) => {
    let { points, text, flag } = obj
    _that.makerShowTitle({}, points, flag, text) //展示标题
  }

  /**
   * 轨迹回放
   * @param {*} coords 轨迹坐标.二维数组[[104.03640684556253,30.7415801286654],[103.98021233220163,30.6555411499294],[103.85766040251299,30.58094579138167]]
   * @param {*} isClear 是否清除上一次的记录
   */
  MapUtil.prototype.displayLineAnimation = (res) => {
    let { coords, isClear, flag } = res
    if (!coords) return;
    if (!_that._self[flag]) _that._self[flag] = [];
    if (isClear && _that._self[flag]) _that.removeElement(flag); //destroy 移除,start 播放,pause 暂停
    let lineString = getUUid().slice(3, 5)
    const data = [
      {
        position: coords,
        text: '实线',
        id: lineString,
        userData: { name: '测试1' }
      }
    ]
    const track = map.trajectoryRealtime(data, {
      color: '#28F', //轨迹背景颜色
      width: 8,
      image: 'images/car.png',
      speed: 80, // 单位 m/s
      imageWidth: 20,
      imageHeight: 40,
      isShowLine: false, //轨迹线是否显示
      isAgain: false,//轨迹运动是否重复,
      traveledColor: '#32b1fb' //运动轨迹颜色
    })
    track.start()

    track.on('length', (data) => {
      let obj = { flag }
      if (data && data[0].percent == 0) {
        obj.icon = require('@/assets/point/start.png') // 开始
        let item = data[0].position[0]
        obj.coords = [{ jd: item[0], wd: item[1] }]
        _that.makerSki(obj)
      }
      if (data && data[0].percent == 99) {
        let len = data[0].position.length
        let val = data[0].position[len - 1]
        obj.coords = [{ jd: val[0], wd: val[1] }]
        obj.icon = require('@/assets/point/end.png') // 结束
        _that.makerSki(obj)
      }
    })
    _that._self[flag].push(track)
  }

  // 移除轨迹
  MapUtil.prototype.removeTrajectory = (flag) => {
    if (_that._self[flag]) {
      _that._self[flag].destroy();
      _that._self[flag] = null
    }
  }


  /**geojson 创建边界
     * let data = {
     * type: "FeatureCollection",
     * features: [
      *  {
            geometry: {
              type: "Polygon",
              coordinates: [it.coordinates]
            },
            properties: {
            },
            type: "Feature",
          }
     * ]
     };
    */
  // MapUtil.prototype.createBoundarys = (res) => {
  //   let { data } = res
  //   if (!data) return false;
  //   if (_that.polygonGeo) _that.removeBj();
  //   _that.polygonGeo = map.createPolygon(data, {
  //     color: 'rgba(20,237,245,0.3)',
  //     outLineColor: '#cf1010',
  //     outLineWidth: 6,
  //     highlightColor: 'red',
  //     type: 'solid',
  //     labelOption: {
  //       pixelOffset: [2, 0],
  //       allShow: false,
  //       fontColor: '#ffffff'
  //     }
  //   })
  //   _that.polygonGeo.flyTo()
  // }




  // 移除边界

  MapUtil.prototype.createBoundarys = (res) => {
    let { data, color, fillColor, borderColor, label, text, labelPosition } = res
    if (!data) return false;
    // 使用传入的颜色参数，如果没有则使用默认值
    const fillColorValue = fillColor || 'rgba(27, 205, 211, 0.3)';
    const borderColorValue = borderColor || '#cf1010';
    const highlightColorValue = color || 'red';
    // 创建多边形
    const polygon = map.createPolygon(data, {
      color: fillColorValue,
      outLineColor: borderColorValue,
      outLineWidth: 5,
      highlightColor: highlightColorValue,
      type: 'solid',
      labelOption: {
        content: label || text || '222222', // 标签文字内容
        position: labelPosition || 'center', // 标签位置
        pixelOffset: [2, 0],
        allShow: true, // 设置为true以显示所有标签
        fontColor: '#ffffff',
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        padding: [5, 10],
        borderRadius: 4
      }
    })

    // 将多边形添加到已创建的边界列表中
    if (!_that.boundaryList) {
      _that.boundaryList = [];
    }
    _that.boundaryList.push(polygon);

    // 如果是第一个添加的区域，则飞过去
    if (_that.boundaryList.length === 1) {
      polygon.flyTo();
    }
  }
  // 移除边界
  MapUtil.prototype.removeBj = (res) => {
    // 移除单个polygonGeo（为了向后兼容）
    if (_that.polygonGeo) {
      _that.polygonGeo.destroy();
      _that.polygonGeo = null;
    }

    // 移除所有添加到boundaryList中的多边形
    if (_that.boundaryList && _that.boundaryList.length > 0) {
      _that.boundaryList.forEach(polygon => {
        polygon.destroy();
      });
      _that.boundaryList = [];
    }
  }

  // 打开详情弹窗
  MapUtil.prototype.openInfoDetail = (flag, data) => {
    console.log(flag, data);

    switch (flag) {
      case 'home_yj_map':
        console.log(data);
        emitter.emit("showHomeYJ", data);
        break;
      case 'home_yj_detail':
        console.log(data);
        emitter.emit("showHomeWarning", data);
        break;
      case 'jczMap_hm':
        console.log(data);
        emitter.emit("showJcz", data);
        break;
      case 'sp':
        console.log(data);
        emitter.emit("showGzyInfo", data);
        break;
    }
  }
}
// 获取uuid 作为边界图层ID
function getUUid() {
  var list = [];
  var hexDigits = "0123456789abcdefghijklmnopqrstuvwxyz";
  for (var i = 0; i < 32; i++) {
    list[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  }
  list[14] = "4";
  list[19] = hexDigits.substr((list[19] & 0x3) | 0x8, 1);
  list[8] = list[13] = list[18] = list[23];
  let uuid = list.join("");
  return uuid;
}