高德地图常用方法封装

二次封装高德地图常用方法，便于开发

/*
  封装高德地图 常用方法
*/
const { AMap } = window;

/*
  初始化地图
*/
export const mapInit = (domId, options = {}) => {
  return new Promise((resolve, reject) => {
    const map = new AMap.Map(domId, {
      resizeEnable: true,
      ...options,
    });
    resolve(map);
  });
};

/*
  绘制圆形
*/
export const drawCircle = ({ lat, lng, radius = 3000 }) => {
  return new AMap.Circle({
    center: [lng, lat],
    radius, // 半径
    borderWeight: 1,
    strokeColor: '#cdc8b1',
    strokeWeight: 1,
    strokeOpacity: 0.2,
    strokeStyle: 'dashed',
    strokeDasharray: [10, 10],
    // 线样式还支持 'dashed'
    // 设计图 背景颜色 #f4eac7
    fillColor: '#999999',
    fillOpacity: 0.2,
    zIndex: 50,
  });
};

/*
  绘制热力图
*/
export const drawHeatMap = (map, heatmapData) => {
  return new Promise((resolve, reject) => {
    // if (!isSupportCanvas()) {
    //   alert(
    //     '热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~'
    //   );
    //   return;
    // }
    // 详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html
    // 参数说明如下:
    /* visible 热力图是否显示,默认为true
       * opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
       * radius 势力图的每个点的半径大小
       * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
       *	{
       .2:'rgb(0, 255, 255)',
       .5:'rgb(0, 110, 255)',
       .8:'rgb(100, 0, 255)'
       }
       其中 key 表示插值的位置, 0-1
       value 为颜色值
       */
    map.plugin(['AMap.HeatMap'], () => {
      // 初始化heatmap对象
      const heatmap = new AMap.HeatMap(map, {
        radius: 25, // 给定半径
        opacity: [0, 0.8],
        zIndex: 49,

        /* ,
          gradient:{
              0.5: 'blue',
              0.65: 'rgb(117,211,248)',
              0.7: 'rgb(0, 255, 0)',
              0.9: '#ffea00',
              1.0: 'red'
          }
           */
      });
      // 设置数据集：该数据为北京部分“公园”数据
      heatmap.setDataSet({
        data: heatmapData,
        // max: 30,
      });
      resolve(heatmap);
    });
  });
};

/*
  绘制marker 标记
*/
export const addMarker = (map, item, options = {}) => {
  return new Promise((resolve, reject) => {
    const marker = new AMap.Marker({
      map,
      anchor: 'bottom-center',
      position: [item.point_x, item.point_y],
      ...options,
    });
    resolve(marker);
  });
};

/*
  绘制多边形
*/
export const drawPolygon = (path) => {
  return new AMap.Polygon({
    path,
    strokeColor: '#c6b389',
    strokeStyle: 'dashed',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillOpacity: 0.4,
    fillColor: '#f0d8ac',
    zIndex: 50,
  });
};

/*
  添加labelMarker
*/
export const addLabelMarker = ({
  lat,
  lng,
  zIndex = 9,
  text = {},
  icon = {},
  visible = true,
}) => {
  return new AMap.LabelMarker({
    position: [lng, lat],
    zIndex,
    visible,
    // text,
    icon,
  });
};

/*
  绘制layer
*/
export const drawLabelsLayer = ({ zIndex = 2000, text = {} }) => {
  return new AMap.LabelsLayer({
    zooms: [3, 20],
    zIndex,
    collision: false,
    allowCollision: false,
  });
};

/*
  layer testStyle
*/
export const textStyle = {
  fontSize: 10,
  fontWeight: 'PingFangSC-Regular',
  fillColor: '#fff',
  // fillColor: 'rgb(255, 215, 0)',
  // strokeColor: '#fff',
  // strokeWidth: 2,
  // fold: true,
  padding: '2, 2',
  backgroundColor: 'rgb(103,156,222)',
  // borderColor: '#fff',
  // borderWidth: 1,
};

/*
  通过中心点坐标 获取 正方形四个点坐标
  side 边长 默认 1000米
*/
export const centerPointGetFourPoint = ({ lat, lng }, side = 1000) => {
  const centerPoint = new AMap.LngLat(lng, lat);
  const upLeftPoint = centerPoint.offset(-side / 2, side / 2);
  const upRightPoint = centerPoint.offset(side / 2, side / 2);
  const leftBottomPoint = centerPoint.offset(-side / 2, -side / 2);
  const rightBottomPoint = centerPoint.offset(side / 2, -side / 2);
  return {
    upLeftPoint: [upLeftPoint.lng, upLeftPoint.lat],
    upRightPoint: [upRightPoint.lng, upRightPoint.lat],
    leftBottomPoint: [leftBottomPoint.lng, leftBottomPoint.lat],
    rightBottomPoint: [rightBottomPoint.lng, rightBottomPoint.lat],
  };
};