yak_handcuffs/src/utils/mapCustom.js

export class MapCustom {
  drawResolve = null;
  constructor(data) {
    this.map = new AMap.Map(data.dom, {
      version: "1.4.15",
      zoom: 13,
      center: [116.397428, 39.90923], //初始化地图中心点
      ...data,
    });
  }
  // 多边形回显
  polyEditor(list, fn) {
    if (!list) return;
    this.map.clearMap();
    let pathList = [];
    list.forEach((item, index) => {
      let lngLat = new AMap.LngLat(item.lng, item.lat);
      pathList.push(lngLat);
    });
    const circle = new AMap.Polygon({
      map: this.map,
      path: pathList, // 圆心位置
      strokeWeight: 2,
      strokeStyle: "solid",
      fillColor: "#00aeff57",
      strokeColor: "#00AEFF", //描边颜色
      fillOpacity: 0.3, //填充透明度
    });
    let PolygonEditor = new AMap.PolyEditor(this.map, circle);
    PolygonEditor.open();
    PolygonEditor.on("adjust", (event) => {
      const pathList = event.target.getPath();
      let list = [];
      pathList.forEach((e, i) => {
        list.push({ lat: e.lat, lng: e.lng });
      });
      fn && fn(list);
      // this.ruleForm.points = list;
    });

  }
  draw() {
    return new Promise((resolve) => {
      this.drawResolve = resolve;
      this.map.clearMap();
      let list = [];
      let mouseTool = new AMap.MouseTool(this.map);
      // mouseTool.rectangle();
      mouseTool.polygon({
        center: ["116.368074", "39.927925"],
        fillColor: "#00aeff57",
        strokeColor: "#00AEFF", //描边颜色
        strokeWeight: 2,
        strokeStyle: "solid",
      });

      mouseTool.on("draw", (event) => {
        event.obj.getPath().forEach((e, i) => {
          list.push({ lat: e.lat, lng: e.lng });
        });
        mouseTool.close(false);
        this.drawResolve(list);
      });
    });
  }

  track(list) {
    let markerList = []
    let lineArr = list.map((item) => [item.lng, item.lat])

    const newIcon = this.map.icon({
      size: new AMap.Size(50, 50),
      image: require('../../../assets/location.png'), // Icon的图像
      imageSize: new AMap.Size(50, 50)
    })

    list.forEach((item, index) => {
      let marker = this.map.marker({
        position: this.map.lngLat(item.lng, item.lat),
        icon: newIcon, // 添加 Icon 图标 URL
        offset: new AMap.Pixel(-25, -50)
      })

      marker.setMap(this.map)
      markerList.push(marker)
      marker.on('click', () => {
        this.studentInfo = item
        this.InfoWindow = this.map.infoWindow({
          anchor: 'bottom-center',
          isCustom: true, //使用自定义窗体
          content: document.querySelector('.infoBox'),
          offset: new AMap.Pixel(0, -90)
        })
        this.InfoWindow.open(this.map, marker.getPosition())
      })
    })
    this.map.polyline({
      map: this.map,
      path: lineArr,
      showDir: true,
      strokeColor: '#28F', //线颜色
      strokeWeight: 6 //线宽
    })

  }
  newIcon(url) {
    return new AMap.Icon({
      size: new AMap.Size(36, 42),
      image: url, // Icon的图像
      imageSize: new AMap.Size(36, 42)
    })
  }
  // 创建marker
  marker({ icon, position }) {
    return new AMap.Marker({
      icon,
      position,
      map: this.map,
      offset: new AMap.Pixel(-20, -40),
    })
  }
  lngLat(lng, lat) {
    return new AMap.LngLat(lng, lat);
  }
  infoWindow(option = {
    anchor: 'bottom-center',
    isCustom: true, //使用自定义窗体
    content: document.querySelector('.infoBox'),
    offset: new AMap.Pixel(-2, -40),
  }) {
    return new AMap.InfoWindow(option)

  }
  //绘制轨迹线条
  polyline(list) {
    this.clearMap()
    let Polyline = new AMap.Polyline({
      map: this.map,
      path: list.map((item) => [item.lng, item.lat]),
      showDir: true,
      strokeColor: '#0088F6', //线颜色
      strokeWeight: 4 //线宽
    })
    this.map.setFitView(Polyline);
  }
  setCenter(position) {
    this.map.setCenter(position)
  }

  clearMap() {
    this.map.clearMap();
  }
}