mmmap/dist/index.js

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

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createCoverage = createCoverage;
/**
|--------------------------------------------------
| 高德系列
|--------------------------------------------------
*/
function AMapCov(option) {
  var 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 {
      // 画点
      var position = new AMap.LngLat(option.lng, option.lat);
      if (option.icon) {
        var _option$icon = option.icon,
            url = _option$icon.url,
            x = _option$icon.x,
            y = _option$icon.y,
            width = _option$icon.width,
            height = _option$icon.height;

        cov = new AMap.Marker({ position: position, offset: new AMap.Pixel(x, y), icon: url });
      }
      cov = new AMap.Marker({ position: position });
    }
  } else {
    option.strokeColor = option.borderColor || 'black';
    option.strokeWeight = option.borderWidth || 0.5;
    option.path = option.points.map(function (i) {
      return 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) {
    var entered = false;
    var ctx = option.hoverStyle.context;
    var oldStyle = { backgroundColor: option.fillColor, borderColor: option.strokeColor };
    cov.on('mouseover', function (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', function (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) {
  var 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) {
        var _option$icon2 = option.icon,
            _option$icon2$url = _option$icon2.url,
            url = _option$icon2$url === undefined ? '' : _option$icon2$url,
            _option$icon2$width = _option$icon2.width,
            width = _option$icon2$width === undefined ? 50 : _option$icon2$width,
            _option$icon2$height = _option$icon2.height,
            height = _option$icon2$height === undefined ? 50 : _option$icon2$height,
            x = _option$icon2.x,
            y = _option$icon2.y;

        var 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: 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;
    var pts = option.points.map(function (p) {
      return 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) {
    var entered = false;
    var ctx = option.hoverStyle.context;
    var oldStyle = { backgroundColor: option.fillColor, borderColor: option.strokeColor };
    cov.addEventListener('mouseover', function (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', function (e) {
      if (!entered) return;
      entered = false;
      cov.K.fillColor = oldStyle.backgroundColor;
      cov.K.strokeColor = oldStyle.borderColor;
      ctx.removeOverlay(cov);
      ctx.addOverlay(cov);
    });
  }
  return cov;
}

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