@map-component/react-tmap/dist/index.esm.js

基于腾讯地图JavaScript API GL、TypeScript 封装适用于 react 的高性能地图组件库

import React, { useEffect, useRef, useState, useImperativeHandle, useContext } from 'react';

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

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    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 = null != arguments[i] ? arguments[i] : {};
    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
      _defineProperty(target, key, source[key]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
    });
  }

  return target;
}

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  Object.defineProperty(Constructor, "prototype", {
    writable: false
  });
  return Constructor;
}

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 _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  Object.defineProperty(subClass, "prototype", {
    writable: false
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

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 {
    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
    return true;
  } catch (e) {
    return false;
  }
}

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 _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

function _possibleConstructorReturn(self, call) {
  if (call && (typeof call === "object" || typeof call === "function")) {
    return call;
  } else if (call !== void 0) {
    throw new TypeError("Derived constructors may only return object or undefined");
  }

  return _assertThisInitialized(self);
}

function _createSuper(Derived) {
  var hasNativeReflectConstruct = _isNativeReflectConstruct();

  return function _createSuperInternal() {
    var Super = _getPrototypeOf(Derived),
        result;

    if (hasNativeReflectConstruct) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

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" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}

function _iterableToArrayLimit(arr, i) {
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];

  if (_i == null) return;
  var _arr = [];
  var _n = true;
  var _d = false;

  var _s, _e;

  try {
    for (_i = _i.call(arr); !(_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.");
}

function loadSDK(version, key, libraries) {
  var libs = ['visualization', 'tools', 'geometry'].concat(_toConsumableArray(libraries || []));
  return new Promise(function (resolve) {
    if (window.TMap) {
      resolve(window.TMap);
      return;
    }

    window.tmapCallback = function tmapCallback() {
      resolve(window.TMap);
    };

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "https://map.qq.com/api/gljs?v=".concat(version, "&key=").concat(key, "&libraries=").concat(libs.join(','), "&callback=tmapCallback");
    document.body.appendChild(script);
  });
}

var MapContext = /*#__PURE__*/React.createContext(undefined);

/*
 * @Author: baoluoqiang
 * @LastEditors: baoluoqiang
 * @Description:
 */

var useEvent = function useEvent(overlay, props) {
  useEffect(function () {
    if (!overlay) {
      return;
    }

    var events = [];
    var listeners = [];
    Object.keys(props).forEach(function (attr) {
      if (attr.indexOf('on') === 0) {
        var eventName = attr[2].toLowerCase() + attr.slice(3);
        events.push(eventName);

        if (typeof props[attr] === 'function') {
          listeners.push(props[attr]);
        }
      }
    });
    events.forEach(function (eventName, i) {
      if (eventName === 'getinstance') {
        return;
      }

      overlay.on(eventName, listeners[i]);
    });
    return function () {
      events.forEach(function (eventName, i) {
        if (eventName === 'getinstance') {
          return;
        }

        overlay.off(eventName, listeners[i]);
      });
    };
  }, [overlay, props]);
  useEffect(function () {
    if (!overlay) {
      return;
    }

    if (props.onGetInstance && typeof props.onGetInstance === 'function') {
      props.onGetInstance(overlay);
    }
  }, [overlay]);
};

var defaultCenter = {
  lat: 39.98412,
  lng: 116.307484
};
var defaultProps = {
  version: '1.exp',
  mapKey: '',
  class: '',
  style: undefined,
  center: {
    lat: 40.040452,
    lng: 116.273486
  },
  zoom: 17,
  minZoom: 3,
  maxZoom: 20,
  rotation: 0,
  pitch: 0,
  scale: 1,
  offset: {
    x: 0,
    y: 0
  },
  draggable: true,
  scrollable: true,
  doubleClickZoom: true,
  baseMap: undefined,
  boundary: undefined,
  viewMode: undefined,
  showControl: true,
  duration: 500,
  libraries: [],
  onLoad: function onLoad() {}
};
var TMapComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var domRef = useRef(null);

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      map = _useState2[0],
      setMap = _useState2[1];

  var mapRef = useRef(map);
  mapRef.current = map;

  var setMapCtrl = function setMapCtrl(mapIns, ctrlId, config) {
    if (!config) {
      mapIns.removeControl(ctrlId);
      return;
    }

    var ctrl = mapIns.getControl(ctrlId);
    var position = config.position,
        className = config.className;

    if (position) {
      ctrl.setPosition(TMap.constants.CONTROL_POSITION[position]);
    }

    if (className) {
      ctrl.setClassName(className);
    }
  };

  var initMap = function initMap() {
    loadSDK(props.version || '1.exp', props.mapKey, props.libraries).then(function (v) {
      if (domRef.current) {
        var centerGeo = props.center || defaultCenter;
        var center = new TMap.LatLng(centerGeo.lat, centerGeo.lng);
        var mapIns = new TMap.Map(domRef.current, {
          center: center,
          zoom: props.zoom,
          minZoom: props.minZoom,
          maxZoom: props.maxZoom,
          rotation: props.rotation,
          pitch: props.pitch,
          scale: props.scale,
          offset: props.offset,
          draggable: props.draggable,
          scrollable: props.scrollable,
          doubleClickZoom: props.doubleClickZoom,
          boundary: props.boundary,
          mapStyleId: props.mapStyleId,
          baseMap: props.baseMap,
          viewMode: props.viewMode,
          showControl: props.showControl
        }); // 控件的显示隐藏要前置，不然控件会先出现再隐藏

        if (props.control) {
          setMapCtrl(mapIns, TMap.constants.DEFAULT_CONTROL_ID.SCALE, props.control.scale);
          setMapCtrl(mapIns, TMap.constants.DEFAULT_CONTROL_ID.ZOOM, props.control.zoom);
          setMapCtrl(mapIns, TMap.constants.DEFAULT_CONTROL_ID.ROTATION, props.control.rotate);
        }

        setMap(mapIns);
      }
    });
  };

  useEffect(function () {
    initMap();
    return function () {
      var _mapRef$current;

      (_mapRef$current = mapRef.current) === null || _mapRef$current === void 0 ? void 0 : _mapRef$current.destroy();
    };
  }, []);
  useEvent(map, props);
  useEffect(function () {
    var centerGeo = props.center || defaultCenter;
    map === null || map === void 0 ? void 0 : map.panTo(new TMap.LatLng(centerGeo.lat, centerGeo.lng), {
      duration: props.duration || 500
    });
  }, [props.center]);
  useEffect(function () {
    map === null || map === void 0 ? void 0 : map.zoomTo(props.zoom || 17, {
      duration: props.duration || 500
    });
  }, [props.zoom]);
  useEffect(function () {
    map === null || map === void 0 ? void 0 : map.rotateTo(props.rotation || defaultProps.rotation, {
      duration: props.duration || 500
    });
  }, [props.rotation]);
  useEffect(function () {
    map === null || map === void 0 ? void 0 : map.pitchTo(props.pitch || defaultProps.pitch, {
      duration: props.duration || 500
    });
  }, [props.pitch]);
  useEffect(function () {
    map === null || map === void 0 ? void 0 : map.setScale(props.scale || defaultProps.scale);
  }, [props.scale]);
  useEffect(function () {
    map === null || map === void 0 ? void 0 : map.setOffset(props.offset || defaultProps.offset);
  }, [props.offset]);
  useEffect(function () {
    map === null || map === void 0 ? void 0 : map.setDraggable(props.draggable || defaultProps.draggable);
  }, [props.draggable]);
  useEffect(function () {
    map === null || map === void 0 ? void 0 : map.setScrollable(props.scrollable || defaultProps.scrollable);
  }, [props.scrollable]);
  useEffect(function () {
    map === null || map === void 0 ? void 0 : map.setDoubleClickZoom(props.doubleClickZoom || defaultProps.doubleClickZoom);
  }, [props.doubleClickZoom]);
  useEffect(function () {
    if (props.boundary && map) {
      map.setBoundary(props.boundary);
    }
  }, [props.boundary]);
  useEffect(function () {
    if (map && props.control) {
      setMapCtrl(map, TMap.constants.DEFAULT_CONTROL_ID.SCALE, props.control.scale);
      setMapCtrl(map, TMap.constants.DEFAULT_CONTROL_ID.ZOOM, props.control.zoom);
      setMapCtrl(map, TMap.constants.DEFAULT_CONTROL_ID.ROTATION, props.control.rotate);
    } else {
      map === null || map === void 0 ? void 0 : map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);
      map === null || map === void 0 ? void 0 : map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
      map === null || map === void 0 ? void 0 : map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
    }
  }, [props.control, map]); // TODO: 提供给ref实例使用

  useImperativeHandle(ref, function () {
    return {
      map: map
    };
  }, [map]);
  useEffect(function () {
    if (map && props.onLoad) {
      props.onLoad(map);
    }
  }, [map]);

  var renderChildren = function renderChildren() {
    return React.Children.map(props.children, function (child) {
      if (child) {
        var cType = child.type;
        /* 针对下面两种组件不注入地图相关属性
         * 1. 明确声明不需要注入的
         * 2. DOM 元素
         */

        if (typeof cType === 'string') {
          return child;
        } // map 实例没有初始化时不渲染组件


        if (!map) {
          return null;
        }

        return /*#__PURE__*/React.cloneElement(child);
      }

      return child;
    });
  };

  return /*#__PURE__*/React.createElement(MapContext.Provider, {
    value: map
  }, /*#__PURE__*/React.createElement("div", {
    ref: domRef,
    style: props.style ? props.style : {
      height: '100%',
      width: '100%'
    }
  }, renderChildren()));
});
TMapComponent.defaultProps = defaultProps;

var _excluded = ["id", "zIndex", "styles", "geometries"];

function builtStyle(opt) {
  var styled = {};
  Object.keys(opt).forEach(function (k) {
    styled[k] = new TMap.CircleStyle(opt[k]);
  });
  return styled;
}

function builtGeometry(geo) {
  return geo.map(function (item) {
    return _objectSpread2(_objectSpread2({}, item), {}, {
      center: new TMap.LatLng(item.center.lat, item.center.lng)
    });
  });
}

var MultiCircleComponent = function MultiCircleComponent(_ref) {
  var id = _ref.id,
      _ref$zIndex = _ref.zIndex,
      zIndex = _ref$zIndex === void 0 ? 1 : _ref$zIndex,
      _ref$styles = _ref.styles,
      styles = _ref$styles === void 0 ? {} : _ref$styles,
      _ref$geometries = _ref.geometries,
      geometries = _ref$geometries === void 0 ? [] : _ref$geometries,
      reset = _objectWithoutProperties(_ref, _excluded);

  var circleRef = useRef(null);

  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      overlayIns = _useState2[0],
      setOverlayIns = _useState2[1];

  var map = useContext(MapContext);
  useEffect(function () {
    if (map) {
      circleRef.current = new TMap.MultiCircle({
        id: id,
        map: map,
        styles: builtStyle(styles),
        geometries: builtGeometry(geometries),
        zIndex: zIndex
      });
      setOverlayIns(circleRef.current);
    }

    return function cleanUp() {
      if (circleRef.current) {
        circleRef.current.setMap(null);
      }
    };
  }, [map]);
  useEvent(overlayIns, reset);
  useEffect(function () {
    var _circleRef$current;

    circleRef === null || circleRef === void 0 ? void 0 : (_circleRef$current = circleRef.current) === null || _circleRef$current === void 0 ? void 0 : _circleRef$current.setGeometries(builtGeometry(geometries));
  }, [geometries]);
  useEffect(function () {
    var _circleRef$current2;

    circleRef === null || circleRef === void 0 ? void 0 : (_circleRef$current2 = circleRef.current) === null || _circleRef$current2 === void 0 ? void 0 : _circleRef$current2.setStyles(builtStyle(styles));
  }, [styles]);
  return null;
};

MultiCircleComponent.defaultProps = {
  id: 'default',
  styles: {}
};

function builtGeometry$1(geo) {
  return geo.map(function (item) {
    return _objectSpread2(_objectSpread2({}, item), {}, {
      position: new TMap.LatLng(item.position.lat, item.position.lng)
    });
  });
}

function builtStyle$1(opt) {
  var styled = {};
  Object.keys(opt).forEach(function (k) {
    styled[k] = new TMap.LabelStyle(opt[k]);
  });
  return styled;
}

var MultiLabelComponent = function MultiLabelComponent(props) {
  var labelRef = useRef(null);

  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      overlayIns = _useState2[0],
      setOverlayIns = _useState2[1];

  var map = useContext(MapContext);
  useEffect(function () {
    if (map) {
      labelRef.current = new TMap.MultiLabel({
        id: props.id,
        map: map,
        styles: builtStyle$1(props.styles || {}),
        geometries: builtGeometry$1(props.geometries || []),
        enableCollision: props.enableCollision
      });
      setOverlayIns(labelRef.current);
    }

    return function cleanUp() {
      if (labelRef.current) {
        labelRef.current.setMap(null);
      }
    };
  }, [map]);
  useEvent(overlayIns, props);
  useEffect(function () {
    var _labelRef$current;

    labelRef === null || labelRef === void 0 ? void 0 : (_labelRef$current = labelRef.current) === null || _labelRef$current === void 0 ? void 0 : _labelRef$current.setGeometries(builtGeometry$1(props.geometries || []));
  }, [props.geometries]);
  useEffect(function () {
    var _labelRef$current2;

    labelRef === null || labelRef === void 0 ? void 0 : (_labelRef$current2 = labelRef.current) === null || _labelRef$current2 === void 0 ? void 0 : _labelRef$current2.setStyles(builtStyle$1(props.styles || {}));
  }, [props.styles]);
  return null;
};

MultiLabelComponent.defaultProps = {
  id: 'default',
  styles: {},
  enableCollision: false
};

var _excluded$1 = ["id", "styles", "geometries"];

function builtStyle$2(opt) {
  var styled = {};
  Object.keys(opt).forEach(function (k) {
    styled[k] = new TMap.MarkerStyle(opt[k]);
  });
  return styled;
}

function builtGeometry$2(geo) {
  return geo.map(function (item) {
    return _objectSpread2(_objectSpread2({}, item), {}, {
      position: new TMap.LatLng(item.position.lat, item.position.lng)
    });
  });
}

var MultiMarkerComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var id = _ref.id,
      styles = _ref.styles,
      geometries = _ref.geometries,
      reset = _objectWithoutProperties(_ref, _excluded$1);

  var markerRef = useRef(null);

  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      overlayIns = _useState2[0],
      setOverlayIns = _useState2[1];

  var map = useContext(MapContext);

  var init = function init() {
    if (map) {
      markerRef.current = new TMap.MultiMarker({
        id: id,
        map: map,
        styles: builtStyle$2(styles || {}),
        geometries: builtGeometry$2(geometries || [])
      });
      setOverlayIns(markerRef.current);
    }
  };

  useEvent(overlayIns, reset);
  useEffect(function () {
    init();
    return function cleanUp() {
      if (markerRef.current) {
        markerRef.current.setMap(null);
      }
    };
  }, [map]); // 提供给ref实例使用

  useImperativeHandle(ref, function () {
    var _markerRef$current, _markerRef$current2, _markerRef$current3, _markerRef$current4, _markerRef$current5, _markerRef$current6;

    return {
      getStyles: markerRef === null || markerRef === void 0 ? void 0 : (_markerRef$current = markerRef.current) === null || _markerRef$current === void 0 ? void 0 : _markerRef$current.getStyles,
      moveAlong: markerRef === null || markerRef === void 0 ? void 0 : (_markerRef$current2 = markerRef.current) === null || _markerRef$current2 === void 0 ? void 0 : _markerRef$current2.moveAlong.bind(markerRef.current),
      stopMove: markerRef === null || markerRef === void 0 ? void 0 : (_markerRef$current3 = markerRef.current) === null || _markerRef$current3 === void 0 ? void 0 : _markerRef$current3.stopMove.bind(markerRef.current),
      pauseMove: markerRef === null || markerRef === void 0 ? void 0 : (_markerRef$current4 = markerRef.current) === null || _markerRef$current4 === void 0 ? void 0 : _markerRef$current4.pauseMove.bind(markerRef.current),
      resumeMove: markerRef === null || markerRef === void 0 ? void 0 : (_markerRef$current5 = markerRef.current) === null || _markerRef$current5 === void 0 ? void 0 : _markerRef$current5.resumeMove.bind(markerRef.current),
      on: markerRef === null || markerRef === void 0 ? void 0 : (_markerRef$current6 = markerRef.current) === null || _markerRef$current6 === void 0 ? void 0 : _markerRef$current6.on.bind(markerRef.current)
    };
  });
  useEffect(function () {
    var _markerRef$current7;

    markerRef === null || markerRef === void 0 ? void 0 : (_markerRef$current7 = markerRef.current) === null || _markerRef$current7 === void 0 ? void 0 : _markerRef$current7.setGeometries(builtGeometry$2(geometries || []));
  }, [geometries]);
  useEffect(function () {
    var _markerRef$current8;

    markerRef === null || markerRef === void 0 ? void 0 : (_markerRef$current8 = markerRef.current) === null || _markerRef$current8 === void 0 ? void 0 : _markerRef$current8.setStyles(builtStyle$2(styles || {}));
  }, [styles]);
  return null;
});
MultiMarkerComponent.defaultProps = {
  id: 'default',
  styles: {}
};

function builtGeometry$3(geo) {
  return geo.map(function (item) {
    return _objectSpread2(_objectSpread2({}, item), {}, {
      position: new TMap.LatLng(item.position.lat, item.position.lng)
    });
  });
}

var MarkerClusterComponent = function MarkerClusterComponent(props) {
  var map = useContext(MapContext);

  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      overlayIns = _useState2[0],
      setOverlayIns = _useState2[1];

  var markerClusterRef = useRef(null);
  useEffect(function () {
    if (map) {
      markerClusterRef.current = new TMap.MarkerCluster({
        id: props.id,
        map: map,
        geometries: builtGeometry$3(props.geometries || []),
        enableDefaultStyle: props.enableDefaultStyle,
        minimumClusterSize: props.minimumClusterSize,
        zoomOnClick: props.zoomOnClick,
        gridSize: props.gridSize,
        averageCenter: props.averageCenter,
        maxZoom: props.maxZoom
      });
      setOverlayIns(markerClusterRef.current);
    }

    return function cleanUp() {
      if (markerClusterRef.current) {
        markerClusterRef.current.setMap(null);
      }
    };
  }, [map]);
  useEvent(overlayIns, props);
  useEffect(function () {
    var _markerClusterRef$cur;

    markerClusterRef === null || markerClusterRef === void 0 ? void 0 : (_markerClusterRef$cur = markerClusterRef.current) === null || _markerClusterRef$cur === void 0 ? void 0 : _markerClusterRef$cur.setGeometries(builtGeometry$3(props.geometries || []));
  }, [props.geometries]);
  return null;
};

MarkerClusterComponent.defaultProps = {
  id: 'default',
  enableDefaultStyle: true,
  minimumClusterSize: 2,
  zoomOnClick: true,
  gridSize: 60,
  averageCenter: false,
  maxZoom: 16
};

var _excluded$2 = ["id", "zIndex", "styles", "geometries"];
function builtStyle$3(opt) {
  var styled = {};
  Object.keys(opt).forEach(function (k) {
    styled[k] = new TMap.PolygonStyle(opt[k]);
  });
  return styled;
}
function buildGeometries(geometries) {
  return geometries.map(function (v) {
    return _objectSpread2(_objectSpread2({}, v), {}, {
      paths: v.paths.map(function (p) {
        return new TMap.LatLng(p.lat, p.lng);
      })
    });
  });
}

var MultiPolygonComponent = function MultiPolygonComponent(_ref) {
  var id = _ref.id,
      zIndex = _ref.zIndex,
      styles = _ref.styles,
      geometries = _ref.geometries,
      reset = _objectWithoutProperties(_ref, _excluded$2);

  var polygonRef = useRef(null);

  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      overlayIns = _useState2[0],
      setOverlayIns = _useState2[1];

  var map = useContext(MapContext);

  var init = function init() {
    if (map) {
      polygonRef.current = new TMap.MultiPolygon({
        id: id,
        map: map,
        styles: builtStyle$3(styles || {}),
        geometries: buildGeometries(geometries || [])
      });
      setOverlayIns(polygonRef.current);
    }
  };

  useEvent(overlayIns, reset);
  useEffect(function () {
    init();
    return function () {
      if (polygonRef.current) {
        polygonRef.current.setMap(null);
      }
    };
  }, [map]);
  useEffect(function () {
    var _polygonRef$current;

    polygonRef === null || polygonRef === void 0 ? void 0 : (_polygonRef$current = polygonRef.current) === null || _polygonRef$current === void 0 ? void 0 : _polygonRef$current.setGeometries(buildGeometries(geometries || []));
  }, [geometries]);
  useEffect(function () {
    var _polygonRef$current2;

    polygonRef === null || polygonRef === void 0 ? void 0 : (_polygonRef$current2 = polygonRef.current) === null || _polygonRef$current2 === void 0 ? void 0 : _polygonRef$current2.setStyles(builtStyle$3(styles || {}));
  }, [styles]);
  return null;
};

MultiPolygonComponent.defaultProps = {
  id: 'default',
  styles: {},
  zIndex: 1
};

var _excluded$3 = ["id", "zIndex", "styles", "geometries"];

function builtStyle$4(opt) {
  var styled = {};
  Object.keys(opt).forEach(function (k) {
    styled[k] = new TMap.PolylineStyle(opt[k]);
  });
  return styled;
}

function buildGeometries$1(geometries) {
  return geometries.map(function (v) {
    return _objectSpread2(_objectSpread2({}, v), {}, {
      paths: v.paths.map(function (p) {
        return new TMap.LatLng(p.lat, p.lng);
      })
    });
  });
}

var MultiPolylineComponent = function MultiPolylineComponent(_ref) {
  var id = _ref.id,
      zIndex = _ref.zIndex,
      styles = _ref.styles,
      geometries = _ref.geometries,
      reset = _objectWithoutProperties(_ref, _excluded$3);

  var polylineRef = useRef(null);

  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      overlayIns = _useState2[0],
      setOverlayIns = _useState2[1];

  var map = useContext(MapContext);

  var init = function init() {
    if (map) {
      polylineRef.current = new TMap.MultiPolyline({
        id: id,
        map: map,
        zIndex: zIndex,
        styles: builtStyle$4(styles || {}),
        geometries: buildGeometries$1(geometries || [])
      });
      setOverlayIns(polylineRef.current);
    }
  };

  useEvent(overlayIns, reset);
  useEffect(function () {
    init();
    return function cleanUp() {
      if (polylineRef.current) {
        polylineRef.current.setMap(null);
      }
    };
  }, [map]);
  useEffect(function () {
    var _polylineRef$current;

    polylineRef === null || polylineRef === void 0 ? void 0 : (_polylineRef$current = polylineRef.current) === null || _polylineRef$current === void 0 ? void 0 : _polylineRef$current.setGeometries(buildGeometries$1(geometries || []));
  }, [geometries]);
  useEffect(function () {
    var _polylineRef$current2;

    polylineRef === null || polylineRef === void 0 ? void 0 : (_polylineRef$current2 = polylineRef.current) === null || _polylineRef$current2 === void 0 ? void 0 : _polylineRef$current2.setStyles(builtStyle$4(styles || {}));
  }, [styles]);
  useEffect(function () {
    var _polylineRef$current3;

    polylineRef === null || polylineRef === void 0 ? void 0 : (_polylineRef$current3 = polylineRef.current) === null || _polylineRef$current3 === void 0 ? void 0 : _polylineRef$current3.setZIndex(zIndex);
  }, [zIndex]);
  return null;
};

MultiPolylineComponent.defaultProps = {
  id: 'default',
  styles: {},
  zIndex: 1
};

var DomOverlayComponent = /*#__PURE__*/function (_React$Component) {
  _inherits(DomOverlayComponent, _React$Component);

  var _super = _createSuper(DomOverlayComponent);

  function DomOverlayComponent() {
    var _this;

    _classCallCheck(this, DomOverlayComponent);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    _this.DomClass = void 0;
    _this.map = void 0;
    _this.DomClassList = void 0;
    return _this;
  }

  _createClass(DomOverlayComponent, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props = this.props,
          onClick = _this$props.onClick,
          createDom = _this$props.createDom;

      function DomClass(options) {
        TMap.DOMOverlay.call(this, options);
      }

      DomClass.prototype = new TMap.DOMOverlay(); // 初始化

      DomClass.prototype.onInit = function (options) {
        this.position = options.position;
        this.data = options.data;
      }; // 销毁时需解绑事件监听


      DomClass.prototype.onDestroy = function () {
        if (this.onClick) {
          this.ele.removeEventListener('click', this.onClick);
        }
      }; // 创建DOM元素，返回一个DOMElement，使用this.dom可以获取到这个元素


      DomClass.prototype.createDOM = function () {
        var _this2 = this;

        this.ele = document.createElement('div');
        this.ele.style.cssText = 'position:absolute;top:0px;left:0px;';
        var dom = createDom(_objectSpread2({}, this.data));
        this.ele.append(dom);

        if (onClick) {
          this.onClick = function (e) {
            onClick(_this2.data, e);
          };

          this.ele.addEventListener('click', this.onClick);
        }

        return this.ele;
      }; // 更新DOM元素，在地图移动/缩放后执行


      DomClass.prototype.updateDOM = function () {
        if (!this.map) {
          return;
        } // 经纬度坐标转容器像素坐标


        var pixel = this.map.projectToContainer(this.position); // 使饼图中心点对齐经纬度坐标点

        var left = "".concat(pixel.getX() - this.dom.clientWidth / 2, "px");
        var top = "".concat(pixel.getY() - this.dom.clientHeight / 2, "px");
        this.dom.style.transform = "translate(".concat(left, ", ").concat(top, ")");
      };

      this.map = this.context;
      this.DomClass = DomClass;
      this.initMapEle();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (this.props.data !== prevProps.data) {
        this.destroyMapEle();
        this.initMapEle();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.destroyMapEle();
    }
  }, {
    key: "initMapEle",
    value: function initMapEle() {
      var _this3 = this;

      this.DomClassList = this.props.data.map(function (item) {
        return new _this3.DomClass({
          map: _this3.map,
          position: new TMap.LatLng(item.position.lat, item.position.lng),
          data: item
        });
      });
    }
  }, {
    key: "destroyMapEle",
    value: function destroyMapEle() {
      var _this$DomClassList;

      (_this$DomClassList = this.DomClassList) === null || _this$DomClassList === void 0 ? void 0 : _this$DomClassList.forEach(function (item) {
        item === null || item === void 0 ? void 0 : item.destroy();
      });
    }
  }, {
    key: "render",
    value: function render() {
      return null;
    }
  }]);

  return DomOverlayComponent;
}(React.Component);

DomOverlayComponent.contextType = MapContext;

var getLatLng = function getLatLng(latlngData) {
  return new TMap.LatLng(latlngData.lat, latlngData.lng);
};

var InfoWindowComponent = function InfoWindowComponent(props) {
  var map = useContext(MapContext);
  var infoWindowRef = useRef(null);
  useEvent(infoWindowRef.current, props);
  useEffect(function () {
    if (map) {
      var center = getLatLng(props.position);
      infoWindowRef.current = new TMap.InfoWindow({
        map: map,
        position: center,
        content: props.content,
        zIndex: props.zIndex,
        offset: props.offset,
        enableCustom: props.enableCustom
      });
      infoWindowRef.current.on('closeclick', function () {
        if (props.onClose) {
          props.onClose();
        }

        if (props.onCloseClick) {
          props.onCloseClick();
        }

        window.dispatchEvent(new CustomEvent('close-click'));
      });
    }

    return function cleanUp() {
      if (infoWindowRef.current) {
        infoWindowRef.current.destroy();
        infoWindowRef.current.setMap(null);
      }
    };
  }, [map]);
  useEffect(function () {
    if (props.visible) {
      var _infoWindowRef$curren;

      infoWindowRef === null || infoWindowRef === void 0 ? void 0 : (_infoWindowRef$curren = infoWindowRef.current) === null || _infoWindowRef$curren === void 0 ? void 0 : _infoWindowRef$curren.open();
    } else {
      var _infoWindowRef$curren2;

      infoWindowRef === null || infoWindowRef === void 0 ? void 0 : (_infoWindowRef$curren2 = infoWindowRef.current) === null || _infoWindowRef$curren2 === void 0 ? void 0 : _infoWindowRef$curren2.close();
    }
  }, [props.visible]);
  useEffect(function () {
    var _infoWindowRef$curren3;

    infoWindowRef === null || infoWindowRef === void 0 ? void 0 : (_infoWindowRef$curren3 = infoWindowRef.current) === null || _infoWindowRef$curren3 === void 0 ? void 0 : _infoWindowRef$curren3.setPosition(getLatLng(props.position));
  }, [props.position]);
  useEffect(function () {
    var _infoWindowRef$curren4;

    infoWindowRef === null || infoWindowRef === void 0 ? void 0 : (_infoWindowRef$curren4 = infoWindowRef.current) === null || _infoWindowRef$curren4 === void 0 ? void 0 : _infoWindowRef$curren4.setContent(props.content);
  }, [props.content]);
  return null;
};

InfoWindowComponent.defaultProps = {
  id: 'default',
  content: '',
  zIndex: 0,
  offset: {
    x: 0,
    y: 0
  },
  enableCustom: false
};

export { DomOverlayComponent as DomOverLay, InfoWindowComponent as InfoWindow, MapContext, MultiCircleComponent as MultiCircle, MarkerClusterComponent as MultiCluster, MultiLabelComponent as MultiLabel, MultiMarkerComponent as MultiMarker, MultiPolygonComponent as MultiPolygon, MultiPolylineComponent as MultiPolyline, TMapComponent as TMap };