react-amap-v2/dist/index.js

高德地图 v2.0 react 组件

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

require('@amap/amap-jsapi-types');
var debug$1 = require('debug');
var React = require('react');
var React__default = _interopDefault(React);
var unstatedNext = require('unstated-next');
var reactDom = require('react-dom');
var useUpdateEffect = _interopDefault(require('@umijs/hooks/es/useUpdateEffect'));
var useUnmount = _interopDefault(require('@umijs/hooks/es/useUnmount'));

function _typeof(obj) {
  "@babel/helpers - typeof";

  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
    _typeof = function (obj) {
      return typeof obj;
    };
  } else {
    _typeof = function (obj) {
      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
    };
  }

  return _typeof(obj);
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly) symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    });
    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

function _isNativeReflectConstruct() {
  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
  if (Reflect.construct.sham) return false;
  if (typeof Proxy === "function") return true;

  try {
    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
    return true;
  } catch (e) {
    return false;
  }
}

function _construct(Parent, args, Class) {
  if (_isNativeReflectConstruct()) {
    _construct = Reflect.construct;
  } else {
    _construct = function _construct(Parent, args, Class) {
      var a = [null];
      a.push.apply(a, args);
      var Constructor = Function.bind.apply(Parent, a);
      var instance = new Constructor();
      if (Class) _setPrototypeOf(instance, Class.prototype);
      return instance;
    };
  }

  return _construct.apply(null, arguments);
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};

  var target = _objectWithoutPropertiesLoose(source, excluded);

  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}

function _iterableToArrayLimit(arr, i) {
  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

var loggers = {};
var debug = (function (arg) {
  var key = 'rc-amap:normal';

  if (typeof arg === 'string') {
    key = "rc-amap:".concat(arg);
  } else if (_typeof(arg) === 'object' && (arg.className || arg.CLASS_NAME)) {
    key = "rc-amap:".concat((arg.className || arg.CLASS_NAME).replace(/(AMap\.)|(Overlay\.)/, '').toLowerCase());
  }

  if (!loggers[key]) {
    loggers[key] = debug$1.debug(key);
  }

  return loggers[key];
});

function useEvents(events, instance) {
  React.useEffect(function () {
    if (instance && typeof (events === null || events === void 0 ? void 0 : events.created) === 'function') {
      events === null || events === void 0 ? void 0 : events.created(instance);
    }

    if (events && instance) {
      debug('events')('注册事件，实例: %O 事件：%O', instance, events); // 注册事件

      Object.keys(events).map(function (key) {
        if (typeof (instance === null || instance === void 0 ? void 0 : instance.on) === 'function' && key !== 'created') {
          instance === null || instance === void 0 ? void 0 : instance.on(key, events[key]);
        }
      });
    }

    return function () {
      // 取消事件注册
      if (events && instance) {
        debug('events')('移除事件注册，实例: %O 事件：%O', instance, events);
        Object.keys(events).map(function (key) {
          if (typeof (instance === null || instance === void 0 ? void 0 : instance.off) === 'function' && key !== 'created') {
            instance === null || instance === void 0 ? void 0 : instance.off(key, events[key]);
          }
        });
      }
    };
  }, [instance, JSON.stringify(events)]);
}

var Context = React__default.createContext({});
var ConfigProvider = Context.Provider;

var _createContainer = unstatedNext.createContainer(function (initialValue) {
  var context = React.useContext(Context);
  return {
    map: initialValue === null || initialValue === void 0 ? void 0 : initialValue.map,
    context: context
  };
}),
    Provider = _createContainer.Provider,
    useMap = _createContainer.useContainer;

var Map = function Map(props) {
  var context = React.useContext(Context);

  var _useState = React.useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      ready = _useState2[0],
      setReady = _useState2[1];

  var _context$options$prop = _objectSpread2({}, context.options, {}, props),
      events = _context$options$prop.events,
      children = _context$options$prop.children,
      layers = _context$options$prop.layers,
      limitBounds = _context$options$prop.limitBounds,
      options = _objectWithoutProperties(_context$options$prop, ["events", "children", "layers", "limitBounds"]);

  var el = React.useRef(null);

  var _useState3 = React.useState(),
      _useState4 = _slicedToArray(_useState3, 2),
      map = _useState4[0],
      setMap = _useState4[1]; // 注册地图


  React.useEffect(function () {
    var map;

    if (el.current) {
      var _map, _container$querySelec, _container$querySelec2;

      map = new AMap.Map(el.current, _objectSpread2({
        limitBounds: limitBounds ? new AMap.Bounds(_construct(AMap.LngLat, _toConsumableArray(limitBounds.southWest)), _construct(AMap.LngLat, _toConsumableArray(limitBounds.northEast))) : undefined,
        layers: layers ? layers.map(function (layer) {
          return new AMap.TileLayer(layer);
        }) : undefined
      }, options));
      debug('map')('创建地图：%O %O', map, options); // 删除高德地图标识

      var container = (_map = map) === null || _map === void 0 ? void 0 : _map.getContainer();
      container === null || container === void 0 ? void 0 : (_container$querySelec = container.querySelector('.amap-logo')) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.remove();
      container === null || container === void 0 ? void 0 : (_container$querySelec2 = container.querySelector('.amap-copyright')) === null || _container$querySelec2 === void 0 ? void 0 : _container$querySelec2.remove();
      map.resize && map.resize();
      map.on('complete', function () {
        setReady(true);
      });
      setMap(map);
    }

    return function () {
      var _map3;

      debug('map')('销毁地图：%O', map);
      setReady(false);

      try {
        var _map2;

        var canvasArr = (_map2 = map) === null || _map2 === void 0 ? void 0 : _map2.getContainer().getElementsByTagName('canvas');

        if (canvasArr) {
          for (var i = 0; i < canvasArr.length; i++) {
            var _canvasArr$i$getConte;

            (_canvasArr$i$getConte = canvasArr[i].getContext('webgl')) === null || _canvasArr$i$getConte === void 0 ? void 0 : _canvasArr$i$getConte.getExtension('WEBGL_lose_context').loseContext();
          }
        }
      } catch (error) {
        debug('map')('WEBGL_lose_context', error);
      }

      (_map3 = map) === null || _map3 === void 0 ? void 0 : _map3.destroy();
    };
  }, [setMap, setReady]); // 注册事件

  useEvents(events, map);
  React.useEffect(function () {
    if (map) {
      if (typeof options.zoom !== 'undefined' && map.getZoom() !== options.zoom) {
        debug('map')('更新zoom：%s', options.zoom);
        map.setZoom(options.zoom);
      }

      if (typeof options.center !== 'undefined' && JSON.stringify(map.getCenter()) !== JSON.stringify(options.center)) {
        debug('map')('更新center：%s', options.center);
        map.setCenter(options.center);
      }

      if (typeof options.pitch !== 'undefined' && map.getPitch() !== options.pitch) {
        debug('map')('更新pitch：%s', options.pitch);
        map.setPitch(options.pitch);
      }

      if (typeof options.rotation !== 'undefined' && map.getRotation() !== options.rotation) {
        debug('map')('更新rotation：%s', options.rotation);
        map.setPitch(options.rotation);
      }

      if (typeof options.mapStyle !== 'undefined' && map.getMapStyle() !== options.mapStyle) {
        debug('map')('更新mapStyle：%s', options.mapStyle);
        map.setMapStyle(options.mapStyle);
      }
    }
  }, [map, JSON.stringify(options)]);
  return React__default.createElement("div", {
    style: props.style || {
      position: 'relative',
      height: 480
    },
    className: props.className
  }, React__default.createElement("div", {
    ref: el,
    style: {
      height: '100%'
    }
  }), React__default.createElement(Provider, {
    initialState: {
      map: map,
      context: context
    }
  }, map && ready ? children : null));
};

var ScriptStatus;

(function (ScriptStatus) {
  ScriptStatus["IDLE"] = "idle";
  ScriptStatus["LOADING"] = "loading";
  ScriptStatus["READY"] = "ready";
  ScriptStatus["ERROR"] = "error";
})(ScriptStatus || (ScriptStatus = {}));
/**
 * Hook to load an external script. Returns true once the script has finished loading.
 *
 * @param url {string} url The external script to load
 * */


function useScript(url) {
  var _useState = React.useState(url ? ScriptStatus.LOADING : ScriptStatus.IDLE),
      _useState2 = _slicedToArray(_useState, 2),
      status = _useState2[0],
      setStatus = _useState2[1];

  React.useEffect(function () {
    if (!url) {
      setStatus(ScriptStatus.IDLE);
      return;
    }

    setStatus(ScriptStatus.LOADING);
    var script = document.querySelector("script[src=\"".concat(url, "\"]"));

    if (!script) {
      script = document.createElement('script');
      script.src = url;
      script.async = true;
      script.crossOrigin = 'anonymous';
      document.head.appendChild(script);

      script.onerror = function () {
        if (script) script.setAttribute('data-status', ScriptStatus.ERROR);
      };

      script.onload = function () {
        if (script) script.setAttribute('data-status', ScriptStatus.READY);
      };
    } else if (script.hasAttribute('data-status')) {
      setStatus(script.getAttribute('data-status'));
    }

    var eventHandler = function eventHandler(e) {
      setStatus(e.type === 'load' ? ScriptStatus.READY : ScriptStatus.ERROR);
    }; // Add load event listener


    script.addEventListener('load', eventHandler);
    script.addEventListener('error', eventHandler);
    return function () {
      if (script) {
        script.removeEventListener('load', eventHandler);
        script.removeEventListener('error', eventHandler);
      }
    };
  }, [url]);
  return [status === ScriptStatus.READY, status];
}

var Loader = function Loader(props) {
  var _context$plugin;

  var context = React.useContext(Context);
  var plugin = (_context$plugin = context.plugin) === null || _context$plugin === void 0 ? void 0 : _context$plugin.join(',');
  var url = "".concat((context === null || context === void 0 ? void 0 : context.url) || '//webapi.amap.com/maps', "?v=").concat((context === null || context === void 0 ? void 0 : context.version) || '2.0', "&key=").concat((context === null || context === void 0 ? void 0 : context.key) || '681fd5eb3b7bcf07d91616ea26a2d163');

  if (plugin) {
    url = url + "&plugin=".concat(plugin);
  }

  var _useScript = useScript(url),
      _useScript2 = _slicedToArray(_useScript, 1),
      loaded = _useScript2[0];

  return React__default.createElement(React__default.Fragment, null, loaded && props.children);
};

var Wrapper = function Wrapper(props) {
  return React__default.createElement(Loader, null, React__default.createElement(Map, Object.assign({}, props)));
};

var OverlayGroupContext = React__default.createContext({});
var OverlayGroupProvider = OverlayGroupContext.Provider;

var VectorLayerContext = React__default.createContext({});
var VectorLayerProvider = VectorLayerContext.Provider;

function firstUpperCase(str) {
  return str.toLowerCase().replace(/( |^)[a-z]/g, function (L) {
    return L.toUpperCase();
  });
}

function useOverlay(overlay, visible, events, options, properties, layer) {
  var _useMap = useMap(),
      map = _useMap.map;

  var _useContext = React.useContext(OverlayGroupContext),
      overlayGroup = _useContext.overlayGroup;

  var _useContext2 = React.useContext(VectorLayerContext),
      vectorLayer = _useContext2.vectorLayer;

  useEvents(events, overlay);
  React.useEffect(function () {
    if (map && overlay && (overlay === null || overlay === void 0 ? void 0 : overlay.CLASS_NAME) === 'AMap.MassMarks') {
      debug(overlay)('设置覆盖物：%O', overlay);
      overlay.setMap(map);
    } else if (layer && overlay && typeof layer !== 'undefined' && overlay) {
      debug(overlay)('往图层里添加覆盖物：%O', overlay);
      layer.add(overlay);
    } else if (vectorLayer && overlay) {
      debug(overlay)('往矢量图层里添加覆盖物：%O', overlay);
      vectorLayer.add([overlay]);
    } else if (overlayGroup && overlay) {
      debug(overlay)('往覆盖物分组里添加覆盖物：%O', overlay);
      overlayGroup.addOverlay(overlay);
    } else if (map && typeof (map === null || map === void 0 ? void 0 : map.add) === 'function' && overlay) {
      debug(overlay)('往地图里添加覆盖物：%O', overlay);
      map.add(overlay);
    }

    return function () {
      try {
        if (map && typeof (map === null || map === void 0 ? void 0 : map.remove) === 'function' && overlay && (overlay === null || overlay === void 0 ? void 0 : overlay.CLASS_NAME) === 'AMap.MassMarks') {
          debug(overlay)('移除覆盖物：%O', overlay);
          overlay.setMap(null);
        } else if (layer && typeof layer !== 'undefined' && overlay) {
          debug(overlay)('从图层移除覆盖物：%O', overlay);
          layer.remove(overlay);
        } else if (vectorLayer && overlay) {
          debug(overlay)('从矢量图层里移除覆盖物：%O', overlay);
          vectorLayer.remove(overlay);
        } else if (overlayGroup && overlay) {
          debug(overlay)('从覆盖物分组里移除覆盖物：%O', overlay);
          overlayGroup.removeOverlay(overlay);
        } else if (map && typeof (map === null || map === void 0 ? void 0 : map.remove) === 'function' && overlay) {
          debug(overlay)('从地图移除覆盖物：%O', overlay);
          map.remove(overlay);
        }
      } catch (error) {}
    };
  }, []);
  React.useEffect(function () {
    if (typeof visible === 'boolean' && typeof overlay.show === 'function' && typeof overlay.hide === 'function') {
      debug(overlay)('设置是否可见：%s 覆盖物：%O', visible, overlay);
      visible ? overlay.show() : overlay.hide();
    }
  }, [visible, overlay]);
  React.useEffect(function () {
    if (Array.isArray(properties)) {
      properties.forEach(function (property) {
        var methodName = ['zIndex'].includes(property) ? "set".concat(property) : "set".concat(firstUpperCase(property));

        if (typeof options[property] !== 'undefined' && typeof overlay[methodName] === 'function') {
          debug(overlay)('更新覆盖物属性，属性名：%s 属性值：%O 覆盖物：%O', property, options[property], overlay);
          overlay[methodName](options[property]);
        }
      });
    }
  }, [JSON.stringify(options)]);
}

function usePlugin(name) {
  var _useState = React.useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      loaded = _useState2[0],
      setLoaded = _useState2[1];

  var _useMap = useMap(),
      map = _useMap.map;

  React.useEffect(function () {
    map && map.plugin(name, function () {
      setLoaded(true);
    });
  }, [name, map]);
  return {
    loaded: loaded,
    map: map
  };
}

var OverlayGroup = function OverlayGroup(_ref) {
  var children = _ref.children,
      visible = _ref.visible,
      events = _ref.events,
      options = _objectWithoutProperties(_ref, ["children", "visible", "events"]);

  var _useState = React.useState(function () {
    return new AMap.OverlayGroup();
  }),
      _useState2 = _slicedToArray(_useState, 1),
      overlayGroup = _useState2[0];

  useOverlay(overlayGroup, visible, events);
  React.useEffect(function () {
    overlayGroup.setOptions(options);
  }, [overlayGroup, JSON.stringify(options)]);
  return React__default.createElement(OverlayGroupProvider, {
    value: {
      overlayGroup: overlayGroup
    }
  }, children);
};

var TileLayer = function TileLayer(_ref) {
  var visible = _ref.visible,
      events = _ref.events,
      options = _objectWithoutProperties(_ref, ["visible", "events"]);

  var _useState = React.useState(function () {
    return new AMap.TileLayer(options);
  }),
      _useState2 = _slicedToArray(_useState, 1),
      tileLayer = _useState2[0];

  useOverlay(tileLayer, visible, events, options, ['tileUrl', 'zooms', 'opacity', 'zIndex']);
  return null;
};

var VectorLayer = function VectorLayer(_ref) {
  var children = _ref.children,
      visible = _ref.visible;

  var _useState = React.useState(new AMap.VectorLayer()),
      _useState2 = _slicedToArray(_useState, 1),
      vectorLayer = _useState2[0];

  useOverlay(vectorLayer, visible);
  return React__default.createElement(VectorLayerProvider, {
    value: {
      vectorLayer: vectorLayer
    }
  }, children);
};

var InfoWindow = function InfoWindow(_ref) {
  var visible = _ref.visible,
      events = _ref.events,
      height = _ref.height,
      children = _ref.children,
      options = _objectWithoutProperties(_ref, ["visible", "events", "height", "children"]);

  var _useMap = useMap(),
      map = _useMap.map;

  var el = React.useRef(document.createElement('div'));

  var _useState = React.useState(function () {
    return new AMap.InfoWindow(options);
  }),
      _useState2 = _slicedToArray(_useState, 1),
      infoWindow = _useState2[0];

  useEvents(events, infoWindow);
  React.useLayoutEffect(function () {
    reactDom.render(React__default.createElement(React__default.Fragment, null, children), el.current, function () {
      infoWindow.setContent(el.current);
    });
  });
  React.useEffect(function () {
    if (map && visible && options.position) {
      infoWindow.open(map, options.position, height || 0);
    } else {
      infoWindow.close();
    }
  }, [map, visible, infoWindow, JSON.stringify(options.position), height]);
  useUpdateEffect(function () {
    if (infoWindow && (options === null || options === void 0 ? void 0 : options.anchor)) {
      infoWindow.setAnchor(options === null || options === void 0 ? void 0 : options.anchor);
    }
  }, [infoWindow, options.anchor]);
  useUpdateEffect(function () {
    if (infoWindow && (options === null || options === void 0 ? void 0 : options.size)) {
      infoWindow.setSize(options === null || options === void 0 ? void 0 : options.size);
    }
  }, [infoWindow, JSON.stringify(options.size)]);
  return null;
};

var Marker = function Marker(_ref) {
  var children = _ref.children,
      events = _ref.events,
      visible = _ref.visible,
      moveTo = _ref.moveTo,
      options = _objectWithoutProperties(_ref, ["children", "events", "visible", "moveTo"]);

  var el = React.useRef(document.createElement('div'));

  var _useState = React.useState(function () {
    return new AMap.Marker(options);
  }),
      _useState2 = _slicedToArray(_useState, 1),
      marker = _useState2[0];

  useOverlay(marker, visible, events, options, ['anchor', 'title', 'icon', 'label', 'draggable', 'cursor', 'extData', 'size', 'zIndex', 'offset', 'angle']);
  React.useLayoutEffect(function () {
    if (children) {
      reactDom.render(React__default.createElement(React__default.Fragment, null, children), el.current, function () {
        marker === null || marker === void 0 ? void 0 : marker.setContent(el.current);
      });
    }
  }); // 更新属性

  useUpdateEffect(function () {
    if (moveTo && (options === null || options === void 0 ? void 0 : options.position)) {
      marker === null || marker === void 0 ? void 0 : marker.moveTo(options === null || options === void 0 ? void 0 : options.position, moveTo);
    } else if (options === null || options === void 0 ? void 0 : options.position) {
      marker === null || marker === void 0 ? void 0 : marker.setPosition(options === null || options === void 0 ? void 0 : options.position);
    }
  }, [marker, JSON.stringify(options.position), JSON.stringify(moveTo)]);
  return null;
};

var Text = function Text(_ref) {
  var children = _ref.children,
      visible = _ref.visible,
      events = _ref.events,
      textStyle = _ref.textStyle,
      options = _objectWithoutProperties(_ref, ["children", "visible", "events", "textStyle"]);

  var _useState = React.useState(function () {
    return new AMap.Text(_objectSpread2({
      style: textStyle
    }, options));
  }),
      _useState2 = _slicedToArray(_useState, 1),
      text = _useState2[0];

  useOverlay(text, visible, events, _objectSpread2({}, options, {
    style: textStyle
  }), ['text', 'style', 'title', 'clickable', 'draggable', 'position', 'anchor', 'angle', 'zIndex', 'offset', 'cursor', 'extData']);
  return null;
};

var Editor = function Editor(_ref) {
  var name = _ref.name,
      overlay = _ref.overlay,
      events = _ref.events;

  var _usePlugin = usePlugin(["AMap.".concat(name)]),
      loaded = _usePlugin.loaded,
      map = _usePlugin.map;

  var _useState = React.useState(),
      _useState2 = _slicedToArray(_useState, 2),
      editor = _useState2[0],
      setEditor = _useState2[1];

  React.useEffect(function () {
    if (loaded && map) {
      setEditor(new AMap[name](map));
    }
  }, [loaded, setEditor, overlay]);
  React.useEffect(function () {
    if (editor && typeof editor.setTarget === 'function') {
      editor.setTarget(overlay);
      editor.open();
    }

    return function () {
      try {
        if (editor) {
          editor.close && editor.close();
          editor.clearAdsorbPolygons && editor.clearAdsorbPolygons();
        }
      } catch (error) {}
    };
  }, [editor, overlay]);
  useEvents(events, editor);
  return null;
};

var MouseTool = function MouseTool(_ref) {
  var events = _ref.events;

  var _usePlugin = usePlugin(['AMap.MouseTool']),
      loaded = _usePlugin.loaded,
      map = _usePlugin.map;

  var _useState = React.useState(),
      _useState2 = _slicedToArray(_useState, 2),
      mouseTool = _useState2[0],
      setMouseTool = _useState2[1];

  React.useEffect(function () {
    map && loaded && setMouseTool(new AMap.MouseTool(map));
  }, [loaded, map]);
  useEvents(events, mouseTool);
  return null;
};

var btnStyle = {
  position: 'relative',
  cursor: 'pointer',
  backgroundColor: '#0a0e11',
  boxSizing: 'content-box',
  height: 20,
  padding: 8,
  marginBottom: 5,
  borderRadius: 4
};
var OverlayEditor = function OverlayEditor(_ref) {
  var value = _ref.value,
      onChange = _ref.onChange,
      _ref$iconColors = _ref.iconColors,
      iconColors = _ref$iconColors === void 0 ? ['#fff', '#ccc'] : _ref$iconColors,
      iconBarStyle = _ref.iconBarStyle,
      disableCircle = _ref.disableCircle,
      disableRectangle = _ref.disableRectangle,
      disablePolyline = _ref.disablePolyline,
      disablePolygon = _ref.disablePolygon,
      disableTrash = _ref.disableTrash,
      options = _objectWithoutProperties(_ref, ["value", "onChange", "iconColors", "iconBarStyle", "disableCircle", "disableRectangle", "disablePolyline", "disablePolygon", "disableTrash"]);

  var _useState = React.useState(),
      _useState2 = _slicedToArray(_useState, 2),
      updateState = _useState2[1];

  var _useState3 = React.useState(),
      _useState4 = _slicedToArray(_useState3, 2),
      type = _useState4[0],
      setType = _useState4[1];

  var _useState5 = React.useState(function () {
    return new AMap.OverlayGroup();
  }),
      _useState6 = _slicedToArray(_useState5, 1),
      overlayGroup = _useState6[0];

  var _useState7 = React.useState(),
      _useState8 = _slicedToArray(_useState7, 2),
      mouseTool = _useState8[0],
      setMouseTool = _useState8[1];

  var _useState9 = React.useState(function () {
    if (Array.isArray(value)) {
      value.forEach(function (v) {
        switch (v.type) {
          case 'circle':
            {
              overlayGroup.addOverlay(new AMap.Circle({
                center: v.center,
                radius: v.radius
              }));
              break;
            }

          case 'polygon':
            {
              overlayGroup.addOverlay(new AMap.Polygon({
                path: v.path
              }));
              break;
            }

          case 'polyline':
            {
              overlayGroup.addOverlay(new AMap.Polyline({
                path: v.path
              }));
              break;
            }

          case 'rectangle':
            {
              v.bounds && overlayGroup.addOverlay(new AMap.Rectangle({
                bounds: new AMap.Bounds(_construct(AMap.LngLat, _toConsumableArray(v.bounds.southWest)), _construct(AMap.LngLat, _toConsumableArray(v.bounds.northEast)))
              }));
              break;
            }
        }
      });
    }

    return value;
  }),
      _useState10 = _slicedToArray(_useState9, 2),
      innerValue = _useState10[0],
      setInnerValue = _useState10[1];

  var toggle = React.useCallback(function (toggleType) {
    toggleType === type ? setType(undefined) : setType(toggleType);
  }, [type]);
  var forceUpdate = React.useCallback(function () {
    return updateState({});
  }, []);
  var triggerChange = React.useCallback(function () {
    var nextValue = [];
    var overlays = overlayGroup.getOverlays();

    try {
      overlays.forEach(function (overlay) {
        switch (overlay.className) {
          case 'Overlay.Circle':
            {
              nextValue.push({
                type: 'circle',
                center: overlay.getCenter().toArray(),
                radius: overlay.getRadius()
              });
              break;
            }

          case 'Overlay.Rectangle':
            {
              var bounds = overlay.getBounds();
              nextValue.push({
                type: 'rectangle',
                bounds: {
                  northEast: bounds.getNorthEast().toArray(),
                  southWest: bounds.getSouthWest().toArray()
                }
              });
              break;
            }

          case 'Overlay.Polygon':
            {
              var path = overlay.getPath().map(function (lngLat) {
                return lngLat.toArray();
              });

              if (JSON.stringify(path[path.length - 1]) !== JSON.stringify(path[0])) {
                path = [].concat(_toConsumableArray(path), [path[0]]);
              }

              nextValue.push({
                type: 'polygon',
                path: path
              });
              break;
            }

          case 'Overlay.Polyline':
            {
              nextValue.push({
                type: 'polyline',
                path: overlay.getPath().map(function (lngLat) {
                  return lngLat.toArray();
                })
              });
              break;
            }

          default:
            {}
        }
      });
      setInnerValue(nextValue);
    } catch (error) {}
  }, [overlayGroup, setInnerValue]);
  var addOverlay = React.useCallback(function (overlay) {
    overlay.setExtData({
      key: new Date().getTime()
    });
    overlayGroup.addOverlay(overlay);
    triggerChange();
    setType(undefined);
  }, [overlayGroup, triggerChange, setType]);
  var removeOverlay = React.useCallback(function (e) {
    if (type !== 'editor') {
      e.target && overlayGroup.removeOverlay(e.target);
      triggerChange();
      forceUpdate();
    }
  }, [type, overlayGroup, forceUpdate]);
  useOverlay(overlayGroup);
  React.useEffect(function () {
    return function () {
      if (type === 'editor') {
        triggerChange();
      }
    };
  }, [type]);
  React.useEffect(function () {
    if (JSON.stringify(value) !== JSON.stringify(innerValue)) {
      onChange && onChange(innerValue);
    }
  }, [innerValue, JSON.stringify(value), onChange]);
  React.useEffect(function () {
    overlayGroup.setOptions(options);
  }, [overlayGroup, JSON.stringify(options)]);
  React.useEffect(function () {
    if (mouseTool && type) {
      switch (type) {
        case 'polyline':
          {
            mouseTool.polyline(options);
            break;
          }

        case 'circle':
          {
            mouseTool.circle(options);
            break;
          }

        case 'rectangle':
          {
            mouseTool.rectangle(options);
            break;
          }

        case 'polygon':
          {
            mouseTool.polygon(options);
            break;
          }

        case 'trash':
          {
            overlayGroup.on('click', removeOverlay);
            break;
          }
      }
    }

    return function () {
      overlayGroup.off('click', removeOverlay);
      mouseTool && mouseTool.close();
    };
  }, [mouseTool, type, JSON.stringify(options)]);
  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
    className: "rc-amap-v2-overlay-editor",
    style: _objectSpread2({
      position: 'absolute',
      top: 20,
      right: 20
    }, iconBarStyle)
  }, React__default.createElement("div", {
    style: btnStyle,
    onClick: function onClick() {
      return toggle('editor');
    }
  }, React__default.createElement("svg", {
    width: "20px",
    height: "20px",
    viewBox: "0 0 19 19",
    version: "1.1"
  }, React__default.createElement("g", {
    stroke: "none",
    strokeWidth: "1",
    fill: "none",
    fillRule: "evenodd"
  }, React__default.createElement("g", {
    transform: "translate(-1157.000000, -262.000000)"
  }, React__default.createElement("g", {
    transform: "translate(1148.000000, 254.000000)"
  }, React__default.createElement("g", {
    transform: "translate(9.000000, 9.000000)"
  }, React__default.createElement("path", {
    d: "M15.5518395,18 L2.45819398,18 C1.10367893,18 4.79616347e-14,16.8963211 4.79616347e-14,15.541806 L4.79616347e-14,2.45819398 C4.79616347e-14,1.10367893 1.10367893,0 2.45819398,0 L11.2274247,0 C11.5986622,0 11.8995652,0.301103679 11.8994649,0.672341137 C11.8994649,1.0435786 11.5985619,1.34438127 11.2274247,1.34448161 L2.45819398,1.34448161 C1.84615385,1.34448161 1.34448161,1.84615385 1.34448161,2.45819398 L1.34448161,15.5518395 C1.34448161,16.1638796 1.84615385,16.6655518 2.45819398,16.6655518 L15.5518395,16.6655518 C16.1638796,16.6655518 16.6655518,16.1638796 16.6655518,15.5518395 L16.6655518,7.08361204 C16.6655518,6.71237458 16.9664548,6.41137124 17.3377926,6.41137124 C17.7091304,6.41137124 18.0100334,6.71237458 18.0100334,7.08361204 L18.0100334,15.541806 C18,16.9063545 16.9063545,18 15.5518395,18",
    fill: type === 'editor' ? iconColors[0] : iconColors[1]
  }), React__default.createElement("path", {
    d: "M10.6254181,8.49832776 L17.8896321,1.23411371 C18.1505017,0.973244147 18.1505017,0.551839465 17.8896321,0.2909699 C17.6297659,0.0305016722 17.2078595,0.0301003344 16.9474916,0.289966555 C16.9471906,0.290367893 16.9467893,0.290668896 16.9464883,0.2909699 L9.68227425,7.55518395 C9.42180602,7.81505017 9.42140468,8.23695652 9.68137124,8.49742475 C9.68167224,8.49772575 9.68197324,8.49802676 9.68227425,8.49832776 C9.81270903,8.62876254 9.98327759,8.69899666 10.1538462,8.69899666 C10.3244147,8.69899666 10.4949833,8.62876254 10.6254181,8.49832776",
    stroke: type === 'editor' ? '#00FFFF' : iconColors[1],
    strokeWidth: "0.5",
    fill: type === 'editor' ? '#00FFFF' : iconColors[1]
  }))))))), !disablePolyline && React__default.createElement("div", {
    style: btnStyle,
    onClick: function onClick() {
      return toggle('polyline');
    }
  }, React__default.createElement("svg", {
    width: "20px",
    height: "20px",
    viewBox: "0 0 20 20",
    version: "1.1"
  }, React__default.createElement("g", {
    stroke: "none",
    strokeWidth: "1",
    fill: "none",
    fillRule: "evenodd"
  }, React__default.createElement("g", {
    transform: "translate(-1156.000000, -302.000000)"
  }, React__default.createElement("g", {
    transform: "translate(1148.000000, 254.000000)"
  }, React__default.createElement("g", {
    transform: "translate(0.000000, 40.000000)"
  }, React__default.createElement("g", {
    transform: "translate(9.000000, 8.000000)"
  }, React__default.createElement("path", {
    d: "M1,2 L14,2 C16.209139,2 18,3.790861 18,6 C18,8.209139 16.209139,10 14,10 L4,10 C1.790861,10 -2.705415e-16,11.790861 0,14 C2.705415e-16,16.209139 1.790861,18 4,18 L17,18 L17,18",
    stroke: type === 'polyline' ? iconColors[0] : iconColors[1],
    strokeWidth: "1.5",
    strokeLinecap: "round"
  }), React__default.createElement("circle", {
    fill: type === 'polyline' ? '#00FFFF' : iconColors[1],
    cx: "2",
    cy: "2",
    r: "2"
  }), React__default.createElement("circle", {
    fill: type === 'polyline' ? '#00FFFF' : iconColors[1],
    cx: "16",
    cy: "18",
    r: "2"
  }), React__default.createElement("circle", {
    fill: type === 'polyline' ? '#00FFFF' : iconColors[1],
    cx: "9",
    cy: "10",
    r: "2"
  })))))))), !disableCircle && React__default.createElement("div", {
    style: btnStyle,
    onClick: function onClick() {
      return toggle('circle');
    }
  }, React__default.createElement("svg", {
    width: "20px",
    height: "20px",
    viewBox: "0 0 22 22",
    version: "1.1"
  }, React__default.createElement("g", {
    stroke: "none",
    strokeWidth: "1",
    fill: "none",
    fillRule: "evenodd"
  }, React__default.createElement("g", {
    transform: "translate(-1155.000000, -341.000000)"
  }, React__default.createElement("g", {
    transform: "translate(1148.000000, 254.000000)"
  }, React__default.createElement("g", {
    transform: "translate(0.000000, 80.000000)"
  }, React__default.createElement("g", {
    transform: "translate(7.000000, 7.000000)"
  }, React__default.createElement("circle", {
    stroke: type === 'circle' ? iconColors[0] : iconColors[1],
    strokeWidth: "1.5",
    cx: "11",
    cy: "11",
    r: "9.25"
  }), React__default.createElement("circle", {
    fill: type === 'circle' ? '#00FFFF' : iconColors[1],
    cx: "11",
    cy: "2",
    r: "2"
  }), React__default.createElement("circle", {
    fill: type === 'circle' ? '#00FFFF' : iconColors[1],
    cx: "11",
    cy: "20",
    r: "2"
  }), React__default.createElement("circle", {
    fill: type === 'circle' ? '#00FFFF' : iconColors[1],
    cx: "2",
    cy: "11",
    r: "2"
  }), React__default.createElement("circle", {
    fill: type === 'circle' ? '#00FFFF' : iconColors[1],
    cx: "20",
    cy: "11",
    r: "2"
  })))))))), !disableRectangle && React__default.createElement("div", {
    style: btnStyle,
    onClick: function onClick() {
      return toggle('rectangle');
    }
  }, React__default.createElement("svg", {
    width: "20px",
    height: "20px",
    viewBox: "0 0 20 20",
    version: "1.1"
  }, React__default.createElement("g", {
    stroke: "none",
    strokeWidth: "1",
    fill: "none",
    fillRule: "evenodd"
  }, React__default.createElement("g", {
    transform: "translate(-1156.000000, -382.000000)"
  }, React__default.createElement("g", {
    transform: "translate(1148.000000, 254.000000)"
  }, React__default.createElement("g", {
    transform: "translate(0.000000, 120.000000)"
  }, React__default.createElement("g", {
    transform: "translate(8.000000, 8.000000)"
  }, React__default.createElement("rect", {
    stroke: type === 'rectangle' ? iconColors[0] : iconColors[1],
    strokeWidth: "1.5",
    x: "1.75",
    y: "1.75",
    width: "16.5",
    height: "16.5",
    rx: "2"
  }), React__default.createElement("rect", {
    fill: type === 'rectangle' ? '#00FFFF' : iconColors[1],
    x: "0",
    y: "0",
    width: "4",
    height: "4",
    rx: "2"
  }), React__default.createElement("rect", {
    fill: type === 'rectangle' ? '#00FFFF' : iconColors[1],
    x: "16",
    y: "0",
    width: "4",
    height: "4",
    rx: "2"
  }), React__default.createElement("rect", {
    fill: type === 'rectangle' ? '#00FFFF' : iconColors[1],
    x: "0",
    y: "16",
    width: "4",
    height: "4",
    rx: "2"
  }), React__default.createElement("rect", {
    fill: type === 'rectangle' ? '#00FFFF' : iconColors[1],
    x: "16",
    y: "16",
    width: "4",
    height: "4",
    rx: "2"
  })))))))), !disablePolygon && React__default.createElement("div", {
    style: btnStyle,
    onClick: function onClick() {
      return toggle('polygon');
    }
  }, React__default.createElement("svg", {
    width: "20px",
    height: "20px",
    viewBox: "0 0 22 21",
    version: "1.1"
  }, React__default.createElement("g", {
    stroke: "none",
    strokeWidth: "1",
    fill: "none",
    fillRule: "evenodd"
  }, React__default.createElement("g", {
    transform: "translate(-1155.000000, -421.000000)"
  }, React__default.createElement("g", {
    transform: "translate(1148.000000, 254.000000)"
  }, React__default.createElement("g", {
    transform: "translate(0.000000, 160.000000)"
  }, React__default.createElement("g", {
    transform: "translate(7.000000, 7.000000)"
  }, React__default.createElement("polygon", {
    stroke: type === 'polygon' ? iconColors[0] : iconColors[1],
    strokeWidth: "1.5",
    points: "11 1 20.5105652 7.90983006 16.8778525 19.0901699 5.12214748 19.0901699 1.48943484 7.90983006"
  }), React__default.createElement("circle", {
    fill: type === 'polygon' ? '#00FFFF' : iconColors[1],
    cx: "11",
    cy: "2",
    r: "2"
  }), React__default.createElement("circle", {
    fill: type === 'polygon' ? '#00FFFF' : iconColors[1],
    cx: "17",
    cy: "19",
    r: "2"
  }), React__default.createElement("circle", {
    fill: type === 'polygon' ? '#00FFFF' : iconColors[1],
    cx: "5",
    cy: "19",
    r: "2"
  }), React__default.createElement("circle", {
    fill: type === 'polygon' ? '#00FFFF' : iconColors[1],
    cx: "20",
    cy: "8",
    r: "2"
  }), React__default.createElement("circle", {
    fill: type === 'polygon' ? '#00FFFF' : iconColors[1],
    cx: "2",
    cy: "8",
    r: "2"
  })))))))), !disableTrash && React__default.createElement("div", {
    style: btnStyle,
    onClick: function onClick() {
      return toggle('trash');
    }
  }, React__default.createElement("svg", {
    width: "20px",
    height: "20px",
    viewBox: "0 0 22 22",
    version: "1.1"
  }, React__default.createElement("g", {
    stroke: "none",
    strokeWidth: "1",
    fill: "none",
    fillRule: "evenodd"
  }, React__default.createElement("g", {
    transform: "translate(-1155.000000, -461.000000)"
  }, React__default.createElement("g", {
    transform: "translate(1148.000000, 254.000000)"
  }, React__default.createElement("g", {
    transform: "translate(0.000000, 200.000000)"
  }, React__default.createElement("g", {
    transform: "translate(8.000000, 8.000000)"
  }, React__default.createElement("line", {
    x1: "7",
    y1: "15",
    x2: "7",
    y2: "19",
    stroke: type !== 'trash' ? iconColors[0] : '#00FFFF',
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }), React__default.createElement("line", {
    x1: "13",
    y1: "15",
    x2: "13",
    y2: "19",
    stroke: type !== 'trash' ? iconColors[0] : '#00FFFF',
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }), React__default.createElement("path", {
    d: "M12,0 C12.5522847,-1.01453063e-16 13,0.44771525 13,1 L13,5 L19,5 C19.5522847,5 20,5.44771525 20,6 L20,9 C20,9.55228475 19.5522847,10 19,10 L1,10 C0.44771525,10 6.76353751e-17,9.55228475 0,9 L0,6 C-6.76353751e-17,5.44771525 0.44771525,5 1,5 L7,5 L7,1 C7,0.44771525 7.44771525,1.01453063e-16 8,0 L12,0 Z",
    stroke: type !== 'trash' ? iconColors[1] : iconColors[0],
    strokeWidth: "1.5"
  }), React__default.createElement("path", {
    d: "M3.01880823,10 L16.9811918,10 C17.490217,10 17.9180167,10.3823709 17.9749231,10.8882052 L18.8749231,18.8882052 C18.9366656,19.4370279 18.5418092,19.9319888 17.9929865,19.9937313 C17.9558679,19.9979072 17.9185445,20 17.8811918,20 L2.11880823,20 C1.56652348,20 1.11880823,19.5522847 1.11880823,19 C1.11880823,18.9626472 1.12090107,18.9253238 1.12507691,18.8882052 L2.02507691,10.8882052 C2.08198328,10.3823709 2.50978297,10 3.01880823,10 Z",
    stroke: type !== 'trash' ? iconColors[1] : iconColors[0],
    strokeWidth: "1.5"
  }))))))))), type === 'editor' && overlayGroup.getOverlays().map(function (overlay, index) {
    var _overlay$getExtData = overlay.getExtData(),
        key = _overlay$getExtData.key;

    switch (overlay.className) {
      case 'Overlay.Rectangle':
        {
          return React__default.createElement(Editor, {
            key: key || index,
            name: "RectangleEditor",
            overlay: overlay
          });
        }

      case 'Overlay.Circle':
        {
          return React__default.createElement(Editor, {
            key: key || index,
            name: "CircleEditor",
            overlay: overlay
          });
        }

      case 'Overlay.Polyline':
        {
          return React__default.createElement(Editor, {
            key: key || index,
            name: "PolylineEditor",
            overlay: overlay
          });
        }

      case 'Overlay.Polygon':
        {
          return React__default.createElement(Editor, {
            key: key || index,
            name: "PolygonEditor",
            overlay: overlay
          });
        }

      default:
        {
          return null;
        }
    }
  }), React__default.createElement(MouseTool, {
    events: {
      created: function created(ins) {
        return setMouseTool(ins);
      },
      draw: function draw(_ref2) {
        var obj = _ref2.obj;
        console.log(obj);
        obj && addOverlay(obj);
      }
    }
  }));
};

var Polygon = function Polygon(_ref) {
  var events = _ref.events,
      editorEvents = _ref.editorEvents,
      visible = _ref.visible,
      editable = _ref.editable,
      path = _ref.path,
      extData = _ref.extData,
      options = _objectWithoutProperties(_ref, ["events", "editorEvents", "visible", "editable", "path", "extData"]);

  var _useState = React.useState(function () {
    return new AMap.Polygon(_objectSpread2({}, options, {
      extData: extData,
      path: path
    }));
  }),
      _useState2 = _slicedToArray(_useState, 1),
      polygon = _useState2[0];

  useOverlay(polygon, visible, events, {
    path: path,
    extData: extData,
    options: options
  }, ['path', 'extData', 'options']);
  return React__default.createElement(React__default.Fragment, null, editable && React__default.createElement(Editor, {
    name: "PolygonEditor",
    overlay: polygon,
    events: editorEvents
  }));
};

var Polyline = function Polyline(_ref) {
  var events = _ref.events,
      editorEvents = _ref.editorEvents,
      visible = _ref.visible,
      editable = _ref.editable,
      path = _ref.path,
      extData = _ref.extData,
      options = _objectWithoutProperties(_ref, ["events", "editorEvents", "visible", "editable", "path", "extData"]);

  var _useState = React.useState(function () {
    return new AMap.Polyline(_objectSpread2({}, options, {
      extData: extData,
      path: path
    }));
  }),
      _useState2 = _slicedToArray(_useState, 1),
      polyline = _useState2[0];

  useOverlay(polyline, visible, events, {
    path: path,
    extData: extData,
    options: options
  }, ['path', 'extData', 'options']);
  return React__default.createElement(React__default.Fragment, null, editable && React__default.createElement(Editor, {
    name: "PolylineEditor",
    overlay: polyline,
    events: editorEvents
  }));
};

var Circle = function Circle(_ref) {
  var events = _ref.events,
      editorEvents = _ref.editorEvents,
      visible = _ref.visible,
      editable = _ref.editable,
      center = _ref.center,
      radius = _ref.radius,
      extData = _ref.extData,
      options = _objectWithoutProperties(_ref, ["events", "editorEvents", "visible", "editable", "center", "radius", "extData"]);

  var _useState = React.useState(function () {
    return new AMap.Circle(_objectSpread2({}, options, {
      extData: extData,
      center: center,
      radius: radius
    }));
  }),
      _useState2 = _slicedToArray(_useState, 1),
      circle = _useState2[0];

  useOverlay(circle, visible, events, {
    center: center,
    radius: radius,
    extData: extData,
    options: options
  }, ['center', 'radius', 'extData', 'options']);
  return React__default.createElement(React__default.Fragment, null, editable && React__default.createElement(Editor, {
    name: "CircleEditor",
    overlay: circle,
    events: editorEvents
  }));
};

var CircleMarker = function CircleMarker(_ref) {
  var events = _ref.events,
      visible = _ref.visible,
      center = _ref.center,
      radius = _ref.radius,
      extData = _ref.extData,
      options = _objectWithoutProperties(_ref, ["events", "visible", "center", "radius", "extData"]);

  var _useState = React.useState(function () {
    return new AMap.CircleMarker(_objectSpread2({}, options, {
      extData: extData,
      center: center,
      radius: radius
    }));
  }),
      _useState2 = _slicedToArray(_useState, 1),
      circleMarker = _useState2[0];

  useOverlay(circleMarker, visible, events, {
    center: center,
    radius: radius,
    extData: extData,
    options: options
  }, ['center', 'radius', 'extData', 'options']);
  return null;
};

var BezierCurve = function BezierCurve(_ref) {
  var events = _ref.events,
      editorEvents = _ref.editorEvents,
      visible = _ref.visible,
      editable = _ref.editable,
      path = _ref.path,
      extData = _ref.extData,
      options = _objectWithoutProperties(_ref, ["events", "editorEvents", "visible", "editable", "path", "extData"]);

  var _useState = React.useState(function () {
    return new AMap.BezierCurve(_objectSpread2({}, options, {
      extData: extData,
      path: path
    }));
  }),
      _useState2 = _slicedToArray(_useState, 1),
      bezierCurve = _useState2[0];

  useOverlay(bezierCurve, visible, events, {
    path: path,
    extData: extData,
    options: options
  }, ['path', 'ex