mmmap/src/index.js

地图覆盖物api，兼容高德/百度

/**
|--------------------------------------------------
| 高德系列
|--------------------------------------------------
*/
function AMapCov(option) {
  let cov = null
  if (option.lng) {
    if (option.radius) {
      // 画圆圈
      option.center = new AMap.LngLat(String(option.lng), String(option.lat))
      option.fillColor = option.backgroundColor || 'rgba(0,0,0,0.3)'
      option.strokeColor = option.borderColor || 'black'
      option.strokeWeight = option.borderWidth || 0.5
      console.log(option)
      cov = new AMap.Circle(option)
    } else {
      // 画点
      const position = new AMap.LngLat(option.lng, option.lat)
      if (option.icon) {
        const { url, x, y, width, height } = option.icon
        cov = new AMap.Marker({ position, offset: new AMap.Pixel(x, y), icon: url })
      }
      cov = new AMap.Marker({ position })
    }
  } else {
    option.strokeColor = option.borderColor || 'black'
    option.strokeWeight = option.borderWidth || 0.5
    option.path = option.points.map(i => new AMap.LngLat(i.lng, i.lat))
    if (option.backgroundColor) {
      // 多边形
      option.fillColor = option.backgroundColor || 'rgba(0,0,0,0.3)'
      cov = new AMap.Polygon(option)
    } else cov = new AMap.Polyline(option)
  }
  if (option.onClick) cov.on('click', option.onClick)
  if (option.hoverStyle) {
    let entered = false
    let ctx = option.hoverStyle.context
    let oldStyle = { backgroundColor: option.fillColor, borderColor: option.strokeColor }
    cov.on('mouseover', e => {
      if (entered) return
      entered = true
      cov.Ge.fillColor = option.hoverStyle.backgroundColor || cov.Ge.fillColor
      cov.Ge.strokeColor = option.hoverStyle.borderColor || cov.Ge.strokeColor
      ctx.remove(cov)
      ctx.add(cov)
    })
    cov.on('mouseout', e => {
      if (!entered) return
      entered = false
      cov.Ge.fillColor = oldStyle.backgroundColor
      cov.Ge.strokeColor = oldStyle.borderColor
      cov.reset()
      ctx.remove(cov)
      ctx.add(cov)
    })
  }
  return cov
}

/**
|--------------------------------------------------
| 百度系列
|--------------------------------------------------
*/

function BMapCov(option) {
  let cov = null
  if (option.lng) {
    if (option.radius) {
      // 画圆圈
      option.fillColor = option.backgroundColor || 'rgba(0,0,0,0.3)'
      option.strokeColor = option.borderColor || 'black'
      option.strokeWeight = option.borderWidth || 0.5
      cov = new BMap.Circle(new BMap.Point(option.lng, option.lat), option.radius, option)
    } else {
      // 画点
      if (option.icon) {
        const { url = '', width = 50, height = 50, x, y } = option.icon
        const icon = new BMap.Icon(url, new BMap.Size(width, height), { anchor: new BMap.Size(x, y) })
        cov = new BMap.Marker(new BMap.Point(option.lng, option.lat), { icon })
      } else cov = new BMap.Marker(new BMap.Point(option.lng, option.lat))
    }
  } else {
    // 多边线
    option.strokeColor = option.borderColor || 'black'
    option.strokeWeight = option.borderWidth || 0.5
    const pts = option.points.map(p => new BMap.Point(p.lng, p.lat))
    if (option.backgroundColor) {
      // 多边形
      option.fillColor = option.backgroundColor || 'rgba(0,0,0,0.3)'
      cov = new BMap.Polygon(pts, option)
    } else cov = new BMap.Polyline(pts, option)
  }
  if (option.onClick) cov.addEventListener('click', option.onClick)
  if (option.hoverStyle) {
    let entered = false
    let ctx = option.hoverStyle.context
    let oldStyle = { backgroundColor: option.fillColor, borderColor: option.strokeColor }
    cov.addEventListener('mouseover', e => {
      if (entered) return
      entered = true
      console.log(cov)
      cov.K.fillColor = option.hoverStyle.backgroundColor || cov.K.fillColor
      cov.K.strokeColor = option.hoverStyle.borderColor || cov.K.strokeColor
      console.log('之后', cov)
      ctx.removeOverlay(cov)
      ctx.addOverlay(cov)
    })
    cov.addEventListener('mouseout', e => {
      if (!entered) return
      entered = false
      cov.K.fillColor = oldStyle.backgroundColor
      cov.K.strokeColor = oldStyle.borderColor
      ctx.removeOverlay(cov)
      ctx.addOverlay(cov)
    })
  }
  return cov
}

export function createCoverage(opt) {
  if(!window.AMap && !window.BMap) {
    throw new Error('请先加载地图')
  } 
  if(window.AMap){
    return AMapCov(opt)
  } else {
    return BMapCov(opt)
  }
}