yjxp-web/src/hooks/AMap/useAMap.ts

import AMapLoader from '@amap/amap-jsapi-loader';
import {onMounted} from "vue";

export function useAMap(options) {
  let AMap, map, nowLayer, labelsLayer, scale, cluster;
  const markers = {
    point: []
  };
  let clickMarker = null;
  let addPoints = [];
  // 初始化事件
  const initMap = (options) => {
    AMapLoader.load({
      key: options.key, // 申请好的Web端开发者Key，首次调用 load 时必填
      version: !!options.version ? options.version : '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: options.plugins
          ? options.plugins
          : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster', 'AMap.DistrictSearch', 'AMap.MoveAnimation']
    }).then((res) => {
      AMap = res;
      map = new AMap.Map(options.el ? options.el : 'aMap', {
        WebGLParams: {
          preserveDrawingBuffer: true
        },
        // 是否为3D地图模式
        viewMode: '3D',
        pitch: options.pitch,
        // 初始化地图级别
        zoom: options.zoom ? options.zoom : 11,
        // 初始化地图中心点位置
        center: options.center,
        // 是否可拖拽
        dragEnable: options.dragEnable,
        // 是否允许通过鼠标滚轮来缩放
        scrollWheel: options.scrollWheel
      });
      // 初始化比例尺
      if (options.showScale) {
        scale = new AMap.Scale();
        map.addControl(scale);
      }
      if (typeof options.onLoadCompleted === 'function') {
        options.onLoadCompleted(AMap, map);
      }
    });
  };
  const getAMap = () => {
    return AMap;
  };
  const getMap = () => {
    return map;
  };
  const getScale = () => {
    return scale;
  };
  // 切换地图
  const switchMap = (type: string) => {
    if (type === 'vectorgraph') {
      map.removeLayer(nowLayer);
    } else if (type === 'satellite') {
      const satellite = new AMap.TileLayer.Satellite();
      map.addLayer(satellite);
      nowLayer = satellite;
    }
  };
  // 添加搜索的标记的
  const addSearchMarker = (item) => {
    map.setZoom(18);
    map.setCenter(item.lnglat);
    addMarker([item], true);
    options.onMarkerClick(item);
  };

  const addMarker = (points, isSearchItem?: boolean) => {
    clearMarker('point');
    addPoints = points;
    const count = points.length;
    const _renderClusterMarker = function (context) {
      // 聚合中点个数
      const clusterCount = context.count;
      const div = document.createElement('div');
      div.style.backgroundColor = 'rgba(78,179,211,.5)';
      const size = Math.round(25 + Math.pow(clusterCount / count, 1 / 5) * 20);
      div.style.width = div.style.height = size + 'px';
      div.style.border = 'solid 1px rgba(78,179,211,1)';
      div.style.borderRadius = size / 2 + 'px';
      div.innerHTML = context.count;
      div.style.lineHeight = size + 'px';
      div.style.color = '#ffffff';
      div.style.fontSize = '12px';
      div.style.textAlign = 'center';
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
      context.marker.setContent(div);
      context.marker.on('click', (e) => {
        const bounds = e.target.getBounds();
        map.setZoomAndCenter(map.getZoom() + 1, bounds.getCenter());
      });
    };
    const _renderMarker = function (context) {
      const content =
          '<div style="display: flex;flex-direction: column;align-items: center;justify-content: center">' +
          '<div style="background: url(' +
          context.data[0].icon +
          ') no-repeat; width: ' +
          context.data[0].size[0] +
          'px;height: ' +
          context.data[0].size[1] +
          'px;cursor: pointer; background-size: cover"></div>' +
          // '<div style="font-size: 36px;white-space: nowrap">'+ context.data[0].name +'</div>' +
          '</div>';
      const offset = new AMap.Pixel(-9, -9);
      context.marker.setContent(content);
      context.marker.setOffset(offset);
      context.marker.setExtData(context.data[0]);
      context.marker.on('click', function (e) {
        const extData = e.target.getExtData();
        let index = 0;
        let index2 = 0;
        for (let i = 0; i < addPoints.length; i++) {
          if (addPoints[i].id === extData.id && addPoints[i].imageHover) {
            addPoints[i].icon = addPoints[i].imageHover;
            e.target.setContent(content);
            index++;
          } else if (!!clickMarker) {
            const extData2 = clickMarker.getExtData();
            if (addPoints[i].id === extData2.id) {
              addPoints[i].icon = addPoints[i].image;
              clickMarker.setContent(content);
              index2++;
            }
          }
          if ((!!clickMarker && index === 1 && index2 === 1) || (!clickMarker && index === 1)) {
            break;
          }
        }
        addMarker(addPoints);
        clickMarker = e.target;
        options.onMarkerClick(extData);
      });
    };
    cluster = new AMap.MarkerCluster(
        map, //地图实例
        points, //海量点数据，数据中需包含经纬度信息字段 lnglat
        {
          gridSize: 30, //数据聚合计算时网格的像素大小
          renderClusterMarker: _renderClusterMarker, //上述步骤的自定义聚合点样式
          renderMarker: _renderMarker //上述步骤的自定义非聚合点样式
        }
    );
    points.forEach((item) => {
      markers['point'].push(item);
    });
  };

  // 清除所有标加
  const clearMarker = (id) => {
    if (!cluster || !markers[id]) return;
    cluster.setMap(null);
    markers[id] = [];
  };

  const handleHover = (extData, dataType) => {
    map.setZoom(18);
    map.setCenter([extData.lng, extData.lat]);
    setTimeout(() => {
      let index = 0;
      let index2 = 0;
      let data = {};
      for (let i = 0; i < addPoints.length; i++) {
        if (addPoints[i].id === extData.id.toString() && addPoints[i].dataType === dataType) {
          addPoints[i].icon = addPoints[i].imageHover;
          index++;
          data = addPoints[i];
        } else if (!!clickMarker) {
          const extData2 = clickMarker.getExtData();
          if (addPoints[i].id === extData2.id) {
            addPoints[i].icon = addPoints[i].image;
            index2++;
          }
        }
        if ((!!clickMarker && index === 1 && index2 === 1) || (!clickMarker && index === 1)) {
          break;
        }
      }
      addMarker(addPoints);
      options.onMarkerClick(data);
    }, 2000);
  };

  const getMarkers = () => {
    return markers;
  };

  // 显示信息框
  let infoWindow;
  const showInfo = (content, position, isCustom) => {
    hideInfo();
    // 实例化InfoWindow
    infoWindow = new AMap.InfoWindow({
      // 完全自定义
      isCustom: isCustom,
      autoMove: false,
      offset: new AMap.Pixel(0, -20) // 信息窗体的偏移量
      // 可以根据需要设置其他InfoWindow的属性
    });
    const lnglat = new AMap.LngLat(position[0], position[1]);
    // 打开InfoWindow，并设置其内容和位置
    infoWindow.setContent(content);
    infoWindow.open(map, lnglat);
    // 解决2.0版本无法滚动问题
    infoWindow.on('mouseover', () => map.setStatus({ zoomEnable: false }));
    infoWindow.on('mouseout', () => map.setStatus({ zoomEnable: true }));
  };

  const hideInfo = (e) => {
    map.setStatus({ zoomEnable: true });
    if (!!infoWindow) {
      infoWindow.close();
      if (!!clickMarker && e) {
        const extData = clickMarker.getExtData();
        for (let i = 0; i < addPoints.length; i++) {
          if (addPoints[i].id === extData.id) {
            addPoints[i].icon = addPoints[i].image;
            clickMarker = null;
            addMarker(addPoints);
            break;
          }
        }
      }
    }
  };

  const creatMask = (options, name = '茂名市') => {
    new AMap.DistrictSearch({
      extensions: 'all',
      subdistrict: 0
    }).search(name, function (status, result) {
      // 外多边形坐标数组和内多边形坐标数组
      const outer = [
        new AMap.LngLat(-360, 90, true),
        new AMap.LngLat(-360, -90, true),
        new AMap.LngLat(360, -90, true),
        new AMap.LngLat(360, 90, true)
      ];
      options.forEach((option) => {
        const holes = result.districtList[0].boundaries;
        // if (option.offset) {
        //
        //   holes.forEach((items) => {
        //
        //   })
        // }
        let pathArray = [outer];
        pathArray.push.apply(pathArray, holes);
        const polygon = new AMap.Polygon({
          pathL: pathArray,
          strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
          strokeOpacity: option.strokeOpacity ? option.strokeOpacity : 1,
          strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
          fillColor: option.fillColor ? option.fillColor : '#10243b',
          fillOpacity: option.fillOpacity ? option.fillOpacity : 0.65
        });
        polygon.setPath(pathArray);
        map.add(polygon);
      });
    });
  };

  let moveMarker, movePolyline, movePassedPolyline, timerId;
  const trackPlayback = (lineArr) => {
    if (timerId) {
      clearTimeout(timerId);
    }
    movePolyline?.remove();
    movePassedPolyline?.remove();
    moveMarker?.remove();
    moveMarker = new AMap.Marker({
      map: map,
      position: [116.478935, 39.997761],
      icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
      offset: new AMap.Pixel(-13, -26)
    });
    // 绘制轨迹
    movePolyline = new AMap.Polyline({
      map: map,
      path: lineArr,
      showDir: true,
      strokeColor: '#28F', //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6 //线宽
      // strokeStyle: "solid"  //线样式
    });

    movePassedPolyline = new AMap.Polyline({
      map: map,
      strokeColor: '#AF5', //线颜色
      strokeWeight: 6 //线宽
    });

    moveMarker.on('moving', function (e) {
      movePassedPolyline.setPath(e.passedPath);
      map.setCenter(e.target.getPosition(), true);
    });

    moveMarker.on('moveend', function (e) {
      timerId = setTimeout(() => {
        movePolyline.remove();
        movePassedPolyline.remove();
        moveMarker.remove();
      }, 2000);
    });
    moveMarker.moveAlong(lineArr, {
      // 每一段的时长
      duration: 1000, //可根据实际采集时间间隔设置
      // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
      autoRotation: true
    });
  };
  onMounted(() => {
    initMap(options);
  });
  return {
    getAMap,
    getMap,
    switchMap,
    addMarker,
    addSearchMarker,
    clearMarker,
    getMarkers,
    getScale,
    showInfo,
    hideInfo,
    handleHover,
    creatMask,
    trackPlayback
  };
}