@vtx/map 1.2.29 → 6.0.0-beta.1

package/lib/VtxMap/BMap/Map1.js

@@ -0,0 +1,1712 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _client = require("react-dom/client");
+var _MapToolFunction = require("../MapToolFunction");
+var _immutable = _interopRequireDefault(require("immutable"));
+var _unionBy = _interopRequireDefault(require("lodash-es/unionBy"));
+var _default2 = _interopRequireWildcard(require("../../default"));
+var _antd = require("antd");
+var _ahooks = require("ahooks");
+var _useDeepCompare = require("use-deep-compare");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+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 _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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var Set = _immutable.default.Set;
+
+// 百度地图js文件内做了一些额外的http or https判断
+if (window.location.protocol === "https:") {
+  window.BMAP_PROTOCOL = "https";
+  window.BMap_loadScriptTime = new Date().getTime();
+}
+var gisMapConstant = {
+  circle: "BMAP_POINT_SHAPE_CIRCLE",
+  //圆形
+  star: 1,
+  //星形
+  square: 4,
+  //方形
+  rhombus: 5,
+  //菱形
+  waterdrop: 2,
+  //水滴状，该类型无size和color属性
+  tiny: 1,
+  //定义点的尺寸为超小，宽高为2px*2px
+  smaller: 2,
+  //定义点的尺寸为很小，宽高为4px*4px
+  small: 3,
+  //定义点的尺寸为小，宽高为8px*8px
+  normal: 4,
+  //定义点的尺寸为正常，宽高为10px*10px，为海量点默认尺寸
+  big: 5,
+  //定义点的尺寸为大，宽高为16px*16px
+  bigger: 6,
+  //定义点的尺寸为很大，宽高为20px*20px
+  huge: 7 //定义点的尺寸为超大，宽高为30px*30px
+};
+function BaiduMap(props) {
+  var _this = this;
+  var mapRef = (0, _react.useRef)(null);
+  var gisRef = (0, _react.useRef)(null);
+  var prevPropsRef = (0, _react.useRef)({});
+
+  // 状态管理
+  var _useState = (0, _react.useState)({
+      mapId: props.mapId,
+      pointIds: [],
+      //地图上点的ids
+      lineIds: [],
+      //地图上线的ids
+      polygonIds: [],
+      //地图上面的ids
+      circleIds: [],
+      //地图上圆的ids
+      editId: "",
+      //当前编辑的图元id
+      editGraphic: "",
+      //当前编辑完后图元所有数据
+      boundaryInfo: [],
+      //当前画出的边界线的id和区域名
+      drawIds: {
+        //绘制工具id集合
+        point: [],
+        polyline: [],
+        polygon: [],
+        circle: [],
+        rectangle: []
+      }
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+
+  // 引用管理
+  var GM = (0, _react.useRef)(new _MapToolFunction.graphicManage()); //初始化 图元管理方法
+
+  var _boundary = (0, _react.useRef)(null); // 获取行政区域数据的对象
+  var _cluster = (0, _react.useRef)(null); // 点聚合对象
+  var _rangingTool = (0, _react.useRef)(null); // 测距对象
+  var _bmar = (0, _react.useRef)(null); // 区域限制对象
+  var _drawmanager = (0, _react.useRef)(null); // 图元绘制对象
+  var _trafficCtrl = (0, _react.useRef)(null); // 交通对象
+
+  var moveToTimer = (0, _react.useRef)(null); //moveTo时间对象
+  var heatmap = (0, _react.useRef)(null); //热力图对象
+  var morepoints = (0, _react.useRef)([]); //海量点数组
+  var movePoints = (0, _react.useRef)([]); //移动点的动画集合
+
+  var frameSelectProps = (0, _react.useRef)({});
+  var mapTypeControl = (0, _react.useRef)(null);
+  var scaleControl = (0, _react.useRef)(null);
+  var navigationControl = (0, _react.useRef)(null);
+  var editGraphicChange = (0, _react.useRef)(null);
+
+  // 常量
+  var AnchorConstant = (0, _react.useMemo)(function () {
+    return {
+      tl: window.BMAP_ANCHOR_TOP_LEFT,
+      tr: window.BMAP_ANCHOR_TOP_RIGHT,
+      bl: window.BMAP_ANCHOR_BOTTOM_LEFT,
+      br: window.BMAP_ANCHOR_BOTTOM_RIGHT
+    };
+  }, []);
+  var NavigationConstant = (0, _react.useMemo)(function () {
+    return {
+      small: window.BMAP_NAVIGATION_CONTROL_SMALL,
+      pan: window.BMAP_NAVIGATION_CONTROL_PAN,
+      zoom: window.BMAP_NAVIGATION_CONTROL_ZOOM,
+      full: window.BMAP_NAVIGATION_CONTROL_FULL
+    };
+  }, []);
+
+  // 深度比较函数
+  var deepEqual = (0, _react.useCallback)(function (a, b) {
+    return _immutable.default.is(_immutable.default.fromJS(a), _immutable.default.fromJS(b));
+  }, []);
+
+  // 数据匹配函数
+  var dataMatch = (0, _react.useCallback)(function (oldData, newData, type) {
+    var onlyOldData = Set(oldData).subtract(Set(newData)).toJS();
+    var onlyNewData = Set(newData).subtract(Set(oldData)).toJS();
+    var onlyOldIDs = onlyOldData.map(function (item) {
+      return item[type];
+    });
+    var onlyNewIDs = onlyNewData.map(function (item) {
+      return item[type];
+    });
+    var updateDataIDs = Set(onlyOldIDs).intersect(Set(onlyNewIDs)).toJS();
+    var updatedData = onlyNewData.filter(function (item) {
+      return updateDataIDs.indexOf(item[type]) > -1;
+    });
+    var replacedData = onlyOldData.filter(function (item) {
+      return updateDataIDs.indexOf(item[type]) > -1;
+    });
+    var deletedDataIDs = onlyOldIDs.filter(function (oldID) {
+      return updateDataIDs.indexOf(oldID) == -1;
+    });
+    var addedData = onlyNewData.filter(function (item) {
+      return updateDataIDs.indexOf(item[type]) == -1;
+    });
+    return {
+      deletedDataIDs: deletedDataIDs,
+      addedData: addedData,
+      updatedData: updatedData,
+      replacedData: replacedData
+    };
+  }, []);
+
+  // 处理需要增加图元的数据
+  var dealAdd = (0, _react.useCallback)(function (ary, ids) {
+    var ads = [],
+      otherupds = [];
+    for (var i = 0; i < ary.length; i++) {
+      if (ids.indexOf(ary[i].id) > -1) {
+        otherupds.push(ary[i]);
+      } else {
+        ads.push(ary[i]);
+      }
+    }
+    return {
+      ads: ads,
+      otherupds: otherupds
+    };
+  }, []);
+
+  // 处理需要更新图元的数据
+  var dealUpdate = (0, _react.useCallback)(function (ary, ids) {
+    var upds = [],
+      otherads = [];
+    for (var i = 0; i < ary.length; i++) {
+      if (ids.indexOf(ary[i].id) > -1) {
+        upds.push(ary[i]);
+      } else {
+        otherads.push(ary[i]);
+      }
+    }
+    return {
+      upds: upds,
+      otherads: otherads
+    };
+  }, []);
+  var ensurejQuery = (0, _react.useCallback)(function () {
+    return new Promise(function (resolve) {
+      if (window.$) {
+        resolve();
+      } else {
+        (0, _default2.loadScript)("//cdn.bootcss.com/jquery/3.3.1/jquery.min.js", resolve);
+      }
+    });
+  }, []);
+  // 加载插件
+  var loadPlugin = (0, _react.useCallback)(function () {
+    return new Promise(function (resolve) {
+      // 加载所需插件
+      Promise.all([new Promise(function (resolve) {
+        if (window.BMapLib && window.BMapLib.DistanceTool) {
+          resolve();
+        } else {
+          (0, _default2.loadScript)("".concat(_default2.default.mapServerURL, "/DistanceTool_min.js"), resolve);
+        }
+      }), new Promise(function (resolve) {
+        if (window.BMapLib && window.BMapLib.TrafficControl) {
+          resolve();
+        } else {
+          (0, _default2.loadScript)("".concat(_default2.default.mapServerURL, "/TrafficControl_min.js"), function () {
+            $("<link>").attr({
+              rel: "stylesheet",
+              type: "text/css",
+              href: "//api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css"
+            }).appendTo("head");
+            resolve();
+          });
+        }
+      }), new Promise(function (resolve) {
+        if (window.BMapLib && window.BMapLib.MarkerClusterer) {
+          resolve();
+        } else {
+          (0, _default2.loadScript)("".concat(_default2.default.mapServerURL, "/MarkerClusterer_min.js"), resolve);
+        }
+      }), new Promise(function (resolve) {
+        if (window.BMapLib && window.BMapLib.AreaRestriction) {
+          resolve();
+        } else {
+          (0, _default2.loadScript)("".concat(_default2.default.mapServerURL, "/AreaRestriction_min.js"), resolve);
+        }
+      }), new Promise(function (resolve) {
+        if (window.BMapLib && window.BMapLib.DrawingManager) {
+          resolve();
+        } else {
+          (0, _default2.loadScript)("".concat(_default2.default.mapServerURL, "/DrawingManager_min.js"), function () {
+            $("<link>").attr({
+              rel: "stylesheet",
+              type: "text/css",
+              href: "//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"
+            }).appendTo("head");
+            resolve();
+          });
+        }
+      }), new Promise(function (resolve) {
+        if (window.BMapLib && window.BMapLib.HeatmapOverlay) {
+          resolve();
+        } else {
+          (0, _default2.loadScript)("".concat(_default2.default.mapServerURL, "/Heatmap_min.js"), resolve);
+        }
+      }), new Promise(function (resolve) {
+        if (window.BMapLib && window.BMapLib.GeoUtils) {
+          resolve();
+        } else {
+          (0, _default2.loadScript)("".concat(_default2.default.mapServerURL, "/GeoUtils_min.js"), resolve);
+        }
+      }), new Promise(function (resolve) {
+        if (window.BMapLib && window.BMapLib.TextIconOverlay) {
+          resolve();
+        } else {
+          (0, _default2.loadScript)("".concat(_default2.default.mapServerURL, "/TextIconOverlay_min.js"), resolve);
+        }
+      }), new Promise(function (resolve) {
+        if (window.BMapLib && window.BMapLib.InfoBox) {
+          resolve();
+        } else {
+          (0, _default2.loadScript)("".concat(_default2.default.mapServerURL, "/InfoBox_min.js"), resolve);
+        }
+      })]).then(function () {
+        resolve();
+      });
+    });
+  }, []);
+
+  // 加载地图JS
+  var loadMapJs = (0, _react.useCallback)(function () {
+    return new Promise(function (resolve, reject) {
+      // 确保 jQuery 可用后再加载地图
+      ensurejQuery().then(function () {
+        if (window.BMap) {
+          resolve(loadPlugin());
+        } else {
+          (0, _default2.loadScript)(_default2.default.bmapScriptUrl, function () {
+            resolve(loadPlugin());
+          });
+        }
+      }).catch(function (error) {
+        console.error("Error ensuring jQuery:", error);
+        reject(error);
+      });
+    });
+  }, [ensurejQuery, loadPlugin]);
+
+  // 创建地图
+  var createMap = (0, _useDeepCompare.useDeepCompareCallback)(function () {
+    var mapCenter = props.mapCenter,
+      mapStyle = props.mapStyle,
+      mapId = props.mapId,
+      mapZoomLevel = props.mapZoomLevel,
+      minZoom = props.minZoom,
+      maxZoom = props.maxZoom;
+    var options = {
+      zoom: mapZoomLevel || 10,
+      center: mapCenter || [116.404, 39.915],
+      minZoom: minZoom,
+      maxZoom: maxZoom
+    };
+    if (window.VtxMap) {
+      window.VtxMap[mapId] = null;
+    } else {
+      window.VtxMap = {};
+    }
+    setTimeout(function () {
+      $("#myCanvasElement").parent().children("svg").css({
+        "z-index": 1
+      });
+    }, 500);
+    var map = window.VtxMap[mapId] = gis.current = new BMap.Map(mapRef.current);
+    var center = mapCenter && mapCenter.length === 2 ? new BMap.Point(parseFloat(mapCenter[0]), parseFloat(mapCenter[1])) : new BMap.Point(options.center);
+    // 初始化地图,设置中心点坐标和地图级别
+    map.centerAndZoom(center, mapZoomLevel || options.zoom);
+    // 开启鼠标滚轮缩放
+    map.enableScrollWheelZoom(true);
+
+    //添加地图类型控件
+    if (props.satelliteSwitch) {
+      showMapTypeControl();
+    }
+    //初始化路况控件
+    if (!_trafficCtrl.current) {
+      _trafficCtrl.current = new BMapLib.TrafficControl({
+        // 是否显示路况提示面板
+        showPanel: false
+      });
+      gis.current.addControl(t._trafficCtrl);
+      if (document.getElementById("tcBtn").remove) {
+        document.getElementById("tcBtn").remove();
+      } else {
+        document.getElementById("tcBtn").removeNode();
+      }
+    }
+
+    // 初始化获取行政区域数据的对象
+    if (!_boundary.current) {
+      _boundary.current = new BMap.Boundary();
+    }
+    // 初始化点聚合对象
+    if (!_cluster.current) {
+      _cluster.current = new BMapLib.MarkerClusterer(map, {
+        maxZoom: 17
+      });
+    }
+    // 初始化测距对象
+    if (!_rangingTool.current) {
+      _rangingTool.current = new BMapLib.DistanceTool(map);
+    }
+    // 初始化区域限制对象
+    if (!_bmar.current) {
+      _bmar.current = new BMapLib.AreaRestriction();
+    }
+    // 初始化图元绘制对象
+    if (!_drawmanager.current) {
+      _drawmanager.current = new BMapLib.DrawingManager(map);
+      _drawmanager.addEventListener("overlaycomplete", function (e) {
+        var _frameSelectProps$cur;
+        if (e.label) {
+          gis.current.removeOverlay(e.label);
+        }
+        var drawExtData = e.extData;
+        //保存绘制图元的id便于后期比对
+        state.drawIds[drawExtData.type].push(drawExtData.id);
+        var backobj = {
+          id: drawExtData.id,
+          attributes: drawExtData.attributes,
+          geometryType: drawExtData.type == "rectangle" ? "polygon" : drawExtData.type,
+          mapLayer: e.overlay,
+          geometry: {
+            type: drawExtData.type == "rectangle" ? "polygon" : drawExtData.type
+          }
+        };
+        //点击事件
+        e.overlay.addEventListener("click", function (e) {
+          clickGraphic(drawExtData.id, e);
+        });
+        //鼠标移入事件
+        e.overlay.addEventListener("mouseover", function (e) {
+          mouseOverGraphic(drawExtData.id, e);
+        });
+        //鼠标移出事件
+        e.overlay.addEventListener("mouseout", function (e) {
+          mouseOutGraphic(drawExtData.id, e);
+        });
+        //缓存绘制的图元信息
+        t.GM.setGraphic(drawExtData.id, e.overlay);
+
+        //区别点和圆的经纬度数据处理
+        var _t$dealData = t.dealData(e.overlay),
+          lnglatAry = _t$dealData.lnglatAry,
+          _extent = _t$dealData._extent,
+          path = _t$dealData.path;
+        //处理返回数据
+        switch (drawExtData.type) {
+          case "point":
+            backobj.geometry.x = e.overlay.getPosition().lng;
+            backobj.geometry.y = e.overlay.getPosition().lat;
+            break;
+          case "polyline":
+            backobj.distance = e.calculate;
+            backobj.lnglatAry = lnglatAry;
+            backobj.geometry.paths = path;
+            backobj.geometry._extent = _extent;
+            break;
+          case "polygon":
+            backobj.area = e.calculate;
+            backobj.lnglatAry = lnglatAry;
+            backobj.geometry.rings = path;
+            backobj.geometry._extent = _extent;
+            break;
+          case "rectangle":
+            backobj.area = e.calculate;
+            backobj.lnglatAry = lnglatAry;
+            backobj.geometry.rings = path;
+            backobj.geometry._extent = _extent;
+            break;
+          case "circle":
+            backobj.geometry.x = e.overlay.getCenter().lng;
+            backobj.geometry.y = e.overlay.getCenter().lat;
+            backobj.geometry.radius = e.overlay.getRadius();
+            backobj.area = e.calculate;
+            break;
+        }
+        t.GM.setGraphicParam(drawExtData.id, backobj);
+        _drawmanager.close();
+        if ("drawEnd" in props) {
+          props.drawEnd(backobj);
+        }
+        if (((_frameSelectProps$cur = frameSelectProps.current[backobj.id]) === null || _frameSelectProps$cur === void 0 ? void 0 : _frameSelectProps$cur.callback) instanceof Function) {
+          frameSelectProps.current[backobj.id].callback(backobj);
+        }
+      });
+    }
+
+    // 初始化路况控件
+    if (!trafficCtrl.current) {
+      trafficCtrl.current = new BMapLib.TrafficControl({
+        showPanel: false
+      });
+      map.addControl(trafficCtrl.current);
+    }
+    return map;
+  }, [props]);
+
+  // 获取图形
+  var getGraphic = (0, _react.useCallback)(function (id) {
+    if (GM.current.getGraphic(id)) {
+      var param = GM.current.getGraphicParam(id);
+      var attributes = param.attributes;
+      return _objectSpread(_objectSpread({}, attributes), {}, {
+        geometry: param.geometry
+      });
+    } else {
+      return false;
+    }
+  }, []);
+
+  // 删除图形
+  var removeGraphic = (0, _react.useCallback)(function (id) {
+    var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "point";
+    var gc = GM.current.getGraphic(id);
+    if (gc) {
+      var _gisRef$current;
+      (_gisRef$current = gisRef.current) === null || _gisRef$current === void 0 || _gisRef$current.removeOverlay(gc);
+      GM.current.removeGraphic(id);
+    }
+    if (id == state.editId) {
+      setState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          editId: ""
+        });
+      });
+    }
+    setState(function (prev) {
+      var newIds = _toConsumableArray(prev["".concat(type, "Ids")]);
+      if (newIds.indexOf(id) != -1) {
+        newIds.splice(newIds.indexOf(id), 1);
+      }
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, "".concat(type, "Ids"), newIds));
+    });
+  }, [state.editId]);
+
+  // 添加点
+  var addPoint = (0, _react.useCallback)(function (mapPoints) {
+    var psids = _toConsumableArray(state.pointIds);
+    mapPoints.map(function (item, index) {
+      var _gisRef$current2;
+      if (GM.current.isRepetition(item.id)) {
+        console.warn("\u52A0\u70B9id: ".concat(item.id, " \u91CD\u590D"));
+        return false;
+      }
+      if (!item.longitude || !item.latitude) {
+        console.warn("\u70B9 \u7ECF\u7EAC\u5EA6 \u6570\u636E\u9519\u8BEF");
+        return false;
+      }
+      var cg = {
+        width: 30,
+        height: 30,
+        labelContent: "",
+        labelPixelX: 0,
+        labelPixelY: 34,
+        BAnimationType: 3,
+        markerContentX: -15,
+        markerContentY: -30,
+        deg: 0
+      };
+      if (item.markerContent) {
+        cg = _objectSpread(_objectSpread({}, cg), {}, {
+          markerContentX: 0,
+          markerContentY: 0,
+          width: 100,
+          height: 30
+        });
+      }
+      if (item.config) {
+        cg = _objectSpread(_objectSpread({}, cg), item.config);
+      }
+      var position = new BMap.Point(item.longitude, item.latitude);
+      var marker = null;
+      if (item.markerContent) {
+        var markerOption = {
+          offset: new BMap.Size(cg.markerContentX + cg.width / 2, cg.markerContentY + cg.height / 2),
+          icon: null
+        };
+        var icon = new BMap.Icon("".concat(_default2.default.mapServerURL, "/images/touming.png"), new BMap.Size(cg.width, cg.height));
+        icon.setImageSize(new BMap.Size(cg.width, cg.height));
+        markerOption = _objectSpread(_objectSpread({}, markerOption), {}, {
+          icon: icon
+        });
+        marker = new BMap.Marker(position, markerOption);
+        var markerLOption = {
+          offset: new BMap.Size(0, 0)
+        };
+        var markerL = new BMap.Label(item.markerContent, markerLOption);
+        markerL.setStyle({
+          backgroundColor: "",
+          border: "0"
+        });
+        marker.setLabel(markerL);
+      } else {
+        var _markerOption = {
+          offset: new BMap.Size(cg.markerContentX + cg.width / 2, cg.markerContentY + cg.height / 2),
+          icon: null
+        };
+        var _icon = new BMap.Icon(item.url || "".concat(_default2.default.mapServerURL, "/images/defaultMarker.png"), new BMap.Size(cg.width, cg.height));
+        _icon.setImageSize(new BMap.Size(cg.width, cg.height));
+        _markerOption = _objectSpread(_objectSpread({}, _markerOption), {}, {
+          icon: _icon
+        });
+        marker = new BMap.Marker(position, _markerOption);
+        marker.setRotation(cg.deg);
+        if (item.canShowLabel && cg.labelContent) {
+          var labelClass = "label-content";
+          if (item.labelClass) {
+            labelClass = item.labelClass.split(",").join(" ");
+          }
+          var markerLabel = new BMap.Label("<div class='" + labelClass + '\' style="margin-left: 0;">' + cg.labelContent + "</div>", {
+            offset: new BMap.Size(cg.labelPixelX, cg.labelPixelY)
+          });
+          markerLabel.setStyle({
+            border: "0",
+            backgroundColor: ""
+          });
+          marker.setLabel(markerLabel);
+        }
+      }
+      if (cg.zIndex || cg.zIndex === 0) {
+        marker.setZIndex(cg.zIndex);
+      }
+      (_gisRef$current2 = gisRef.current) === null || _gisRef$current2 === void 0 || _gisRef$current2.addOverlay(marker);
+      if (!item.markerContent && cg.BAnimationType == 0) {
+        marker.setAnimation(BMAP_ANIMATION_BOUNCE);
+      } else if (!item.markerContent && cg.BAnimationType == 1) {
+        marker.setAnimation(BMAP_ANIMATION_DROP);
+      }
+      marker.addEventListener("click", function (e) {
+        clickGraphic(item.id, e);
+      });
+      marker.addEventListener("mouseover", function (e) {
+        mouseOverGraphic(item.id, e);
+      });
+      marker.addEventListener("mouseout", function (e) {
+        mouseOutGraphic(item.id, e);
+      });
+      GM.current.setGraphic(item.id, marker);
+      psids.push(item.id);
+      GM.current.setGraphicParam(item.id, {
+        attributes: _objectSpread(_objectSpread({}, item), {}, {
+          other: item
+        }),
+        geometryType: "point",
+        geometry: {
+          type: "point",
+          x: item.longitude,
+          y: item.latitude
+        }
+      });
+    });
+    setState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        pointIds: psids
+      });
+    });
+  }, [state.pointIds]);
+
+  // 添加线
+  var addLine = (0, _react.useCallback)(function (mapLines, type) {
+    var lsids = _toConsumableArray(state.lineIds);
+    mapLines.map(function (item, index) {
+      var _gisRef$current3;
+      if (GM.current.isRepetition(item.id)) {
+        console.warn("\u591A\u6298\u7EBFid: ".concat(item.id, " \u91CD\u590D"));
+        return false;
+      }
+      if (!(item.paths && item.paths.length >= 2)) {
+        console.warn("\u591A\u6298\u7EBFpaths\u6570\u636E\u9519\u8BEF");
+        return false;
+      }
+      var cg = {
+        color: "#277ffa",
+        pellucidity: 0.9,
+        lineWidth: 5,
+        lineType: "solid",
+        isHidden: false
+      };
+      if (item.config) {
+        cg = _objectSpread(_objectSpread({}, cg), item.config);
+      }
+      var linePath = item.paths.map(function (item, index) {
+        return new BMap.Point(item[0], item[1]);
+      });
+      var polyline = new BMap.Polyline(linePath, {
+        strokeColor: cg.color,
+        strokeOpacity: cg.pellucidity,
+        strokeWeight: cg.lineWidth,
+        strokeStyle: cg.lineType
+      });
+      if (cg.isHidden) {
+        polyline.hide();
+      } else {
+        polyline.show();
+      }
+      (_gisRef$current3 = gisRef.current) === null || _gisRef$current3 === void 0 || _gisRef$current3.addOverlay(polyline);
+      polyline.addEventListener("click", function (e) {
+        clickGraphic(item.id, e);
+      });
+      polyline.addEventListener("mouseover", function (e) {
+        mouseOverGraphic(item.id, e);
+      });
+      polyline.addEventListener("mouseout", function (e) {
+        mouseOutGraphic(item.id, e);
+      });
+      GM.current.setGraphic(item.id, polyline);
+      lsids.push(item.id);
+      GM.current.setGraphicParam(item.id, {
+        attributes: _objectSpread(_objectSpread({}, item), {}, {
+          paths: item.paths,
+          other: item
+        }),
+        geometryType: "polyline",
+        geometry: {
+          type: "polyline",
+          paths: item.paths
+        }
+      });
+    });
+    if (type !== "defined") {
+      setState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          lineIds: lsids
+        });
+      });
+    }
+  }, [state.lineIds]);
+
+  // 添加面
+  var addPolygon = (0, _react.useCallback)(function (mapPolygons) {
+    var pgsids = _toConsumableArray(state.polygonIds);
+    mapPolygons.map(function (item, index) {
+      var _gisRef$current4;
+      if (GM.current.isRepetition(item.id)) {
+        console.warn("\u591A\u8FB9\u5F62id: ".concat(item.id, " \u91CD\u590D"));
+        return false;
+      }
+      if (!(item.rings && item.rings.length >= 3)) {
+        console.warn("\u591A\u8FB9\u5F62rings\u6570\u636E\u9519\u8BEF");
+        return false;
+      }
+      var cg = {
+        lineType: "solid",
+        lineWidth: 5,
+        lineColor: "#277ffa",
+        lineOpacity: 1,
+        color: "#fff",
+        pellucidity: 0.5
+      };
+      if (item.config) {
+        cg = _objectSpread(_objectSpread({}, cg), item.config);
+      }
+      var polygonPath = item.rings.map(function (item, index) {
+        return new BMap.Point(item[0], item[1]);
+      });
+      var polygon = new BMap.Polygon(polygonPath, {
+        strokeColor: cg.lineColor,
+        strokeOpacity: cg.lineOpacity,
+        strokeWeight: cg.lineWidth,
+        strokeStyle: cg.lineType,
+        fillColor: cg.color,
+        fillOpacity: cg.pellucidity
+      });
+      (_gisRef$current4 = gisRef.current) === null || _gisRef$current4 === void 0 || _gisRef$current4.addOverlay(polygon);
+      polygon.addEventListener("click", function (e) {
+        clickGraphic(item.id, e);
+      });
+      polygon.addEventListener("mouseover", function (e) {
+        mouseOverGraphic(item.id, e);
+      });
+      polygon.addEventListener("mouseout", function (e) {
+        mouseOutGraphic(item.id, e);
+      });
+      GM.current.setGraphic(item.id, polygon);
+      pgsids.push(item.id);
+      GM.current.setGraphicParam(item.id, {
+        attributes: _objectSpread(_objectSpread({}, item), {}, {
+          rings: item.rings,
+          other: item
+        }),
+        geometryType: "polygon",
+        geometry: {
+          type: "polygon",
+          rings: item.rings
+        }
+      });
+    });
+    setState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        polygonIds: pgsids
+      });
+    });
+  }, [state.polygonIds]);
+
+  // 添加圆
+  var addCircle = (0, _react.useCallback)(function (mapCircles) {
+    var ccsids = _toConsumableArray(state.circleIds);
+    mapCircles.map(function (item, index) {
+      var _gisRef$current5;
+      if (GM.current.isRepetition(item.id)) {
+        console.warn("\u5706id: ".concat(item.id, " \u91CD\u590D"));
+        return false;
+      }
+      if (!item.longitude || !item.latitude) {
+        console.warn("\u5706 \u7ECF\u7EAC\u5EA6 \u6570\u636E\u9519\u8BEF");
+        return false;
+      }
+      var cg = {
+        lineType: "solid",
+        lineWidth: 5,
+        lineColor: "#277ffa",
+        lineOpacity: 1,
+        color: "#fff",
+        pellucidity: 0.5
+      };
+      if (item.config) {
+        cg = _objectSpread(_objectSpread({}, cg), item.config);
+      }
+      var centerPoint = new BMap.Point(item.longitude, item.latitude);
+      var circle = new BMap.Circle(centerPoint, item.radius, {
+        strokeColor: cg.lineColor,
+        strokeOpacity: cg.lineOpacity,
+        strokeWeight: cg.lineWidth,
+        strokeStyle: cg.lineType,
+        fillColor: cg.color,
+        fillOpacity: cg.pellucidity
+      });
+      (_gisRef$current5 = gisRef.current) === null || _gisRef$current5 === void 0 || _gisRef$current5.addOverlay(circle);
+      circle.addEventListener("click", function (e) {
+        clickGraphic(item.id, e);
+      });
+      circle.addEventListener("mouseover", function (e) {
+        mouseOverGraphic(item.id, e);
+      });
+      circle.addEventListener("mouseout", function (e) {
+        mouseOutGraphic(item.id, e);
+      });
+      GM.current.setGraphic(item.id, circle);
+      ccsids.push(item.id);
+      GM.current.setGraphicParam(item.id, {
+        attributes: _objectSpread(_objectSpread({}, item), {}, {
+          other: item
+        }),
+        geometryType: "circle",
+        geometry: {
+          type: "circle",
+          x: item.longitude,
+          y: item.latitude,
+          radius: item.radius
+        }
+      });
+    });
+    setState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        circleIds: ccsids
+      });
+    });
+  }, [state.circleIds]);
+
+  // 更新点
+  var updatePoint = (0, _react.useCallback)(function (mapPoints) {
+    mapPoints.map(function (item, index) {
+      if (GM.current.isRepetition(item.id)) {
+        if (!item.longitude || !item.latitude) {
+          console.warn("\u70B9 \u7ECF\u7EAC\u5EA6 \u6570\u636E\u9519\u8BEF");
+          return false;
+        }
+        var gc = GM.current.getGraphic(item.id);
+        var cg = {
+          width: 30,
+          height: 30,
+          labelContent: "",
+          labelPixelX: 0,
+          labelPixelY: 34,
+          BAnimationType: 3,
+          markerContentX: -15,
+          markerContentY: -30,
+          deg: 0
+        };
+        if (item.markerContent) {
+          cg = _objectSpread(_objectSpread({}, cg), {}, {
+            markerContentX: 0,
+            markerContentY: 0,
+            width: 100,
+            height: 30
+          });
+        }
+        if (item.config) {
+          cg = _objectSpread(_objectSpread({}, cg), item.config);
+        }
+        if (item.markerContent) {
+          var markerLOption = {
+            offset: new BMap.Size(0, 0)
+          };
+          var markerL = new BMap.Label(item.markerContent, markerLOption);
+          markerL.setStyle({
+            backgroundColor: "",
+            border: "0"
+          });
+          gc.setLabel(markerL);
+        } else {
+          cg.width = cg.width || gc.getIcon().size.width;
+          cg.height = cg.height || gc.getIcon().size.height;
+          var icon = new BMap.Icon(item.url || "".concat(_default2.default.mapServerURL, "/images/defaultMarker.png"), new BMap.Size(cg.width, cg.height));
+          icon.setImageSize(new BMap.Size(cg.width, cg.height));
+          gc.setIcon(icon);
+          gc.setOffset(new BMap.Size((cg.markerContentX || -15) + cg.width / 2, (cg.markerContentY || -30) + cg.height / 2));
+          gc.setRotation(cg.deg || 0);
+          if (item.canShowLabel && cg.labelContent) {
+            var markerLabel = gc.getLabel();
+            var labelClass = "label-content";
+            if (item.labelClass) {
+              labelClass = item.labelClass.split(",").join(" ");
+            }
+            var labelContent = "<div class='" + labelClass + '\' style="margin-left: 0;">' + cg.labelContent + "</div>";
+            var labelOffset = new BMap.Size(cg.labelPixelX, cg.labelPixelY);
+            if (markerLabel) {
+              markerLabel.setContent(labelContent);
+              markerLabel.setOffset(labelOffset);
+            } else {
+              markerLabel = new BMap.Label(labelContent, {
+                offset: labelOffset
+              });
+              markerLabel.setStyle({
+                border: "0",
+                backgroundColor: ""
+              });
+              gc.setLabel(markerLabel);
+            }
+          } else {
+            if (!!gc.getLabel()) {
+              gc.getLabel().setContent("");
+            }
+          }
+          if (cg.BAnimationType == 0) {
+            gc.setAnimation(BMAP_ANIMATION_BOUNCE);
+          } else if (cg.BAnimationType == 1) {
+            gc.setAnimation(BMAP_ANIMATION_DROP);
+          } else {
+            gc.setAnimation(null);
+          }
+        }
+        if (cg.zIndex || cg.zIndex === 0) {
+          gc.setZIndex(cg.zIndex);
+        }
+        GM.current.setGraphicParam(item.id, {
+          attributes: _objectSpread(_objectSpread({}, item), {}, {
+            other: item
+          }),
+          geometryType: "point",
+          geometry: {
+            type: "point",
+            x: item.longitude,
+            y: item.latitude
+          }
+        });
+      } else {
+        console.warn("\u66F4\u65B0\u7684\u70B9\u4F4Did\u4E0D\u5B58\u5728!");
+        return false;
+      }
+    });
+    moveAnimation();
+  }, []);
+
+  // 更新线
+  var updateLine = (0, _react.useCallback)(function (mapLines) {
+    mapLines.map(function (item, index) {
+      if (GM.current.isRepetition(item.id)) {
+        if (!(item.paths && item.paths.length >= 2)) {
+          console.warn("\u591A\u6298\u7EBFpaths\u6570\u636E\u9519\u8BEF");
+          return false;
+        }
+        var gc = GM.current.getGraphic(item.id);
+        var cg = {
+          color: "#277ffa",
+          pellucidity: 0.9,
+          lineWidth: 5,
+          lineType: "solid",
+          isHidden: false
+        };
+        if (item.config) {
+          cg = _objectSpread(_objectSpread({}, cg), item.config);
+        }
+        var linePath = item.paths.map(function (item, index) {
+          return new BMap.Point(item[0], item[1]);
+        });
+        gc.setPath(linePath);
+        gc.setStrokeColor(cg.color);
+        gc.setStrokeOpacity(cg.pellucidity);
+        gc.setStrokeWeight(cg.lineWidth);
+        gc.setStrokeStyle(cg.lineType);
+        if (cg.isHidden) {
+          gc.hide();
+        } else {
+          gc.show();
+        }
+        GM.current.setGraphicParam(item.id, {
+          attributes: _objectSpread(_objectSpread({}, item), {}, {
+            paths: item.paths,
+            other: item
+          }),
+          geometryType: "polyline",
+          geometry: {
+            type: "polyline",
+            paths: item.paths
+          }
+        });
+      } else {
+        console.warn("\u66F4\u65B0\u7684\u591A\u6298\u7EBFid\u4E0D\u5B58\u5728!");
+        return false;
+      }
+    });
+  }, []);
+
+  // 更新面
+  var updatePolygon = (0, _react.useCallback)(function (mapPolygons) {
+    mapPolygons.map(function (item, index) {
+      if (GM.current.isRepetition(item.id)) {
+        if (!(item.rings && item.rings.length >= 3)) {
+          console.warn("\u591A\u8FB9\u5F62rings\u6570\u636E\u9519\u8BEF");
+          return false;
+        }
+        var gc = GM.current.getGraphic(item.id);
+        var cg = {
+          lineType: "solid",
+          lineWidth: 5,
+          lineColor: "#277ffa",
+          lineOpacity: 1,
+          color: "#fff",
+          pellucidity: 0.5
+        };
+        if (item.config) {
+          cg = _objectSpread(_objectSpread({}, cg), item.config);
+        }
+        var polygonPath = item.rings.map(function (item, index) {
+          return new BMap.Point(item[0], item[1]);
+        });
+        gc.setPath(polygonPath);
+        gc.setStrokeColor(cg.lineColor);
+        gc.setFillColor(cg.color);
+        gc.setStrokeOpacity(cg.lineOpacity);
+        gc.setFillOpacity(cg.pellucidity);
+        gc.setStrokeWeight(cg.lineWidth);
+        gc.setStrokeStyle(cg.lineType);
+        GM.current.setGraphicParam(item.id, {
+          attributes: _objectSpread(_objectSpread({}, item), {}, {
+            rings: item.rings,
+            other: item
+          }),
+          geometryType: "polygon",
+          geometry: {
+            type: "polygon",
+            rings: item.rings
+          }
+        });
+      } else {
+        console.warn("\u66F4\u65B0\u7684\u591A\u8FB9\u5F62id\u4E0D\u5B58\u5728!");
+        return false;
+      }
+    });
+  }, []);
+
+  // 更新圆
+  var updateCircle = (0, _react.useCallback)(function (mapCircles) {
+    mapCircles.map(function (item, index) {
+      if (GM.current.isRepetition(item.id)) {
+        if (!item.longitude || !item.latitude) {
+          console.warn("\u5706 \u7ECF\u7EAC\u5EA6 \u6570\u636E\u9519\u8BEF");
+          return false;
+        }
+        var gc = GM.current.getGraphic(item.id);
+        var cg = {
+          lineType: "solid",
+          lineWidth: 5,
+          lineColor: "#277ffa",
+          lineOpacity: 1,
+          color: "#fff",
+          pellucidity: 0.5
+        };
+        if (item.config) {
+          cg = _objectSpread(_objectSpread({}, cg), item.config);
+        }
+        var centerPoint = new BMap.Point(item.longitude, item.latitude);
+        gc.setCenter(centerPoint);
+        gc.setRadius(item.radius);
+        gc.setStrokeColor(cg.lineColor);
+        gc.setFillColor(cg.color);
+        gc.setStrokeOpacity(cg.lineOpacity);
+        gc.setFillOpacity(cg.pellucidity);
+        gc.setStrokeWeight(cg.lineWidth);
+        gc.setStrokeStyle(cg.lineType);
+        GM.current.setGraphicParam(item.id, {
+          attributes: _objectSpread(_objectSpread({}, item), {}, {
+            other: item
+          }),
+          geometryType: "circle",
+          geometry: {
+            type: "circle",
+            x: item.longitude,
+            y: item.latitude,
+            radius: item.radius
+          }
+        });
+      } else {
+        console.warn("\u66F4\u65B0\u7684\u5706id\u4E0D\u5B58\u5728!");
+        return false;
+      }
+    });
+  }, []);
+
+  //添加海量点
+  var addPointCollection = (0, _react.useCallback)(function () {
+    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var t = _this;
+    data.map(function (item, index) {
+      var d = item || {};
+      var points = [];
+      (d.points || []).map(function (d, i) {
+        var p = new BMap.Point(d.lng, d.lat);
+        p.attributes = d;
+        points.push(p);
+      });
+      var options = {
+        size: gisMapConstant[d.size] || gisMapConstant["normal"],
+        shape: gisMapConstant[d.shape] || gisMapConstant["circle"],
+        color: d.color || "#d340c3"
+      };
+      // 初始化PointCollection
+      var VotexpointCollection = new BMap.PointCollection(points, options);
+      gis.current.addOverlay(VotexpointCollection); // 添加Overlay
+      morepoints.current.push({
+        id: d.id,
+        value: VotexpointCollection
+      });
+      VotexpointCollection.addEventListener("click", function (e) {
+        if ("clickPointCollection" in t.props && typeof t.props.clickPointCollection == "function") {
+          var obj = _objectSpread(_objectSpread({
+            id: d.id
+          }, e.point), {}, {
+            mapLayer: VotexpointCollection
+          });
+          t.props.clickPointCollection(obj);
+        }
+      });
+    });
+  }, []);
+  //更新海量点
+  var updatePointCollection = (0, _react.useCallback)(function () {
+    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var t = _this;
+    data.map(function (ds, i) {
+      morepoints.current.map(function (item, index) {
+        if (item.id == ds.id) {
+          var points = [];
+          ds.points.map(function (d, i) {
+            var p = new BMap.Point(d.lng, d.lat);
+            p.attributes = d;
+            points.push(p);
+          });
+          item.value.setPoints(points);
+          item.value.setStyles({
+            size: gisMapConstant[ds.size] || gisMapConstant["normal"],
+            shape: gisMapConstant[ds.shape] || gisMapConstant["circle"],
+            color: ds.color || "#d340c3"
+          });
+        }
+      });
+    });
+  }, []);
+  //清空单个海量点
+  var clearPointCollection = (0, _react.useCallback)(function (ids) {
+    ids.map(function (id, ind) {
+      morepoints.current.map(function (item, index) {
+        if (id == item.id) {
+          item.value.clear();
+        }
+      });
+    });
+  }, []);
+  //清空海量点
+  var clearAllPointCollection = (0, _react.useCallback)(function () {
+    morepoints.current.map(function (item, index) {
+      item.value.clear();
+    });
+  }, []);
+  // 图元点击事件
+  var clickGraphic = (0, _react.useCallback)(function (id, e) {
+    if (state.editId == id) return false;
+    if (typeof props.clickGraphic === "function") {
+      var obj = {
+        id: id,
+        param: getGraphic(id),
+        top: e.clientY,
+        left: e.clientX,
+        e: e
+      };
+      props.clickGraphic(obj);
+    }
+  }, [props.clickGraphic, state.editId, getGraphic]);
+  // 图元鼠标悬浮事件
+  var mouseOverGraphic = (0, _react.useCallback)(function (id, e) {
+    if (state.editId == id) return false;
+    if (typeof props.mouseOverGraphic === "function") {
+      var obj = {
+        e: e,
+        id: id,
+        param: getGraphic(id),
+        top: e.clientY,
+        left: e.clientX
+      };
+      props.mouseOverGraphic(obj);
+    }
+  }, [props.mouseOverGraphic, state.editId, getGraphic]);
+
+  // 图元鼠标移开事件
+  var mouseOutGraphic = (0, _react.useCallback)(function (id, e) {
+    if (state.editId == id) return false;
+    if (typeof props.mouseOutGraphic === "function") {
+      var obj = {
+        e: e,
+        id: id,
+        param: getGraphic(id),
+        top: e.clientY,
+        left: e.clientX
+      };
+      props.mouseOutGraphic(obj);
+    }
+  }, [props.mouseOutGraphic, state.editId, getGraphic]);
+  // 添加点聚合功能
+  var setCluster = (0, _react.useCallback)(function () {
+    var mapCluster = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    if (cluster.current && mapCluster instanceof Array) {
+      // 清除之前的聚合
+      cluster.current.clearMarkers();
+
+      // 获取所有点图形
+      var markers = [];
+      mapCluster.forEach(function (id) {
+        var graphic = GM.current.getGraphic(id);
+        if (graphic) {
+          markers.push(graphic);
+        }
+      });
+
+      // 设置新的聚合
+      if (markers.length > 0) {
+        cluster.current.addMarkers(markers);
+      }
+    }
+  }, []);
+
+  // 设置地图类型
+  var setMapType = (0, _react.useCallback)(function (type) {
+    var _gisRef$current6, _gisRef$current7;
+    switch (type) {
+      case "sl":
+        (_gisRef$current6 = gisRef.current) === null || _gisRef$current6 === void 0 || _gisRef$current6.setMapType(BMAP_NORMAL_MAP);
+        break;
+      case "wx":
+        (_gisRef$current7 = gisRef.current) === null || _gisRef$current7 === void 0 || _gisRef$current7.setMapType(BMAP_SATELLITE_MAP);
+        break;
+    }
+  }, []);
+  //展示地图切换控件
+  var showMapTypeControl = (0, _react.useCallback)(function (props) {
+    var location = AnchorConstant["br"],
+      offset = null;
+    var config = props;
+    if (mapTypeControl.current) {
+      gis.current.removeControl(mapTypeControl.current);
+    }
+    if (config.satelliteSwitch.location) {
+      location = AnchorConstant[config.satelliteSwitch.location];
+    }
+    if (config.satelliteSwitch.offset && config.satelliteSwitch.offset.length > 0) {
+      offset = new BMap.Size(config.satelliteSwitch.offset[0], config.satelliteSwitch.offset[1]);
+    }
+    var mapTypes = [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP];
+    // 地图切换控件
+    var control = new BMap.MapTypeControl({
+      mapTypes: mapTypes,
+      anchor: location,
+      type: BMAP_MAPTYPE_CONTROL_HORIZONTAL,
+      offset: offset
+    });
+    gis.current.addControl(control);
+    mapTypeControl.current = control;
+  }, []);
+
+  // 设置区域限制
+  var setAreaRestriction = (0, _react.useCallback)(function (sw_ne) {
+    var bounds = new BMap.Bounds(new BMap.Point(sw_ne[0][0], sw_ne[0][1]), new BMap.Point(sw_ne[1][0], sw_ne[1][1]));
+    bmar.current.setBounds(gisRef.current, bounds);
+  }, []);
+
+  // 取消显示区域
+  var clearAreaRestriction = (0, _react.useCallback)(function () {
+    bmar.current.clearBounds();
+  }, []);
+
+  // 移动动画
+  var moveAnimation = (0, _react.useCallback)(function () {
+    if (moveToTimer.current) {
+      clearInterval(moveToTimer.current);
+    }
+    moveToTimer.current = setInterval(function () {
+      var nowMovePoints = _toConsumableArray(movePoints.current);
+      var deleteIndex = [];
+      for (var i = 0; i < nowMovePoints.length; i++) {
+        nowMovePoints[i].waitTime += 10;
+        if (nowMovePoints[i].waitTime >= nowMovePoints[i].deleteTime) {
+          deleteIndex.push(i);
+        } else {
+          var gc = GM.current.getGraphic(nowMovePoints[i].id);
+          var p = gc.getPosition();
+          gc.setPosition(new BMap.Point(p.lng + nowMovePoints[i].rx, p.lat + nowMovePoints[i].ry));
+        }
+      }
+      for (var _i = deleteIndex.length - 1; _i >= 0; _i--) {
+        movePoints.current.splice(deleteIndex[_i], 1);
+      }
+      if (nowMovePoints.length == 0) {
+        clearInterval(moveToTimer.current);
+      }
+    }, 10);
+  }, []);
+
+  // 移动到指定位置
+  var moveTo = (0, _react.useCallback)(function (id, lnglat, delay, autoRotation, urlright, urlleft) {
+    delay = delay || 3;
+    var timer = 10;
+    var gc = GM.current.getGraphic(id);
+    delay = eval(delay) * 1000;
+    var count = delay / timer;
+    var s = gc.getPosition(),
+      e = new BMap.Point(lnglat[0], lnglat[1]);
+    if (s.equals(e)) {
+      return false;
+    } else {
+      var url = null;
+      if (autoRotation) {
+        var ddeg = rotateDeg(gc.getPosition(), lnglat);
+        if (urlleft && ddeg < -90 && ddeg > -270) {
+          ddeg += 180;
+          url = urlleft;
+        } else {
+          url = urlright;
+        }
+        var gcicon = gc.getIcon();
+        gcicon.setImageUrl(url);
+        gc.setIcon(gcicon);
+        gc.setRotation(ddeg);
+      }
+      var rx = (e.lng - s.lng) / count,
+        ry = (e.lat - s.lat) / count;
+      var isHave = false;
+      for (var i = 0; i < movePoints.current.length; i++) {
+        if (movePoints.current[i].id == id) {
+          movePoints.current.splice(i, 1, {
+            id: id,
+            rx: rx,
+            ry: ry,
+            waitTime: 0,
+            deleteTime: delay
+          });
+          isHave = true;
+        }
+      }
+      if (!isHave) {
+        movePoints.current.push({
+          id: id,
+          rx: rx,
+          ry: ry,
+          waitTime: 0,
+          deleteTime: delay
+        });
+      }
+    }
+  }, []);
+
+  // 点位角度旋转
+  var rotateDeg = (0, _react.useCallback)(function (sp, ep) {
+    var spLngLat = sp;
+    if (Array.isArray(sp)) {
+      spLngLat = new BMap.Point(sp[0], sp[1]);
+    }
+    var epLngLat = ep;
+    if (Array.isArray(ep)) {
+      epLngLat = new BMap.Point(ep[0], ep[1]);
+    }
+    var disx = epLngLat.lng - spLngLat.lng;
+    var disy = epLngLat.lat - spLngLat.lat;
+    var deg = 0;
+    if (disx != 0) {
+      var _bias = Math.atan(disy / disx) / (Math.PI / 180);
+      deg = -_bias;
+      if (disx > 0) {
+        deg -= 90;
+      } else {
+        deg += 90;
+      }
+    } else {
+      if (disy == 0) deg = 0;
+      deg = -bias * 90;
+    }
+    return deg;
+  }, []);
+
+  // 开启路况
+  var openTrafficInfo = (0, _react.useCallback)(function () {
+    trafficCtrl.current.showTraffic();
+  }, []);
+
+  // 关闭路况
+  var hideTrafficInfo = (0, _react.useCallback)(function () {
+    trafficCtrl.current.hideTraffic();
+  }, []);
+
+  // 处理点数据变化
+  var handlePointsChange = (0, _react.useCallback)(function () {
+    var prevPoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var currentPoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    console.log("handlePointsChange", prevPoints, currentPoints, deepEqual(prevPoints, currentPoints));
+    if (!deepEqual(prevPoints, currentPoints)) {
+      var _dataMatch = dataMatch(prevPoints, currentPoints, "id"),
+        deletedDataIDs = _dataMatch.deletedDataIDs,
+        addedData = _dataMatch.addedData,
+        updatedData = _dataMatch.updatedData;
+      var _dealAdd = dealAdd(addedData, _toConsumableArray(state.pointIds)),
+        ads = _dealAdd.ads,
+        otherupds = _dealAdd.otherupds;
+      var _dealUpdate = dealUpdate(updatedData, _toConsumableArray(state.pointIds)),
+        upds = _dealUpdate.upds,
+        otherads = _dealUpdate.otherads;
+      console.log("handlePointsChange", deletedDataIDs);
+      // 删除
+      var _iterator = _createForOfIteratorHelper(deletedDataIDs),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var id = _step.value;
+          removeGraphic(id, "point");
+        }
+
+        // 增加
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      addPoint([].concat(_toConsumableArray(ads), _toConsumableArray(otherads)));
+
+      // 更新
+      updatePoint([].concat(_toConsumableArray(upds), _toConsumableArray(otherupds)));
+    }
+  }, [state.pointIds, dataMatch, dealAdd, dealUpdate, removeGraphic, addPoint, updatePoint, deepEqual]);
+
+  // 处理线数据变化
+  var handleLinesChange = (0, _react.useCallback)(function () {
+    var prevLines = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var currentLines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    if (!deepEqual(prevLines, currentLines)) {
+      var _dataMatch2 = dataMatch(prevLines, currentLines, "id"),
+        deletedDataIDs = _dataMatch2.deletedDataIDs,
+        addedData = _dataMatch2.addedData,
+        updatedData = _dataMatch2.updatedData;
+      var _dealAdd2 = dealAdd(addedData, _toConsumableArray(state.lineIds)),
+        ads = _dealAdd2.ads,
+        otherupds = _dealAdd2.otherupds;
+      var _dealUpdate2 = dealUpdate(updatedData, _toConsumableArray(state.lineIds)),
+        upds = _dealUpdate2.upds,
+        otherads = _dealUpdate2.otherads;
+
+      // 删除
+      var _iterator2 = _createForOfIteratorHelper(deletedDataIDs),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var id = _step2.value;
+          removeGraphic(id, "line");
+        }
+
+        // 增加
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      addLine([].concat(_toConsumableArray(ads), _toConsumableArray(otherads)));
+
+      // 更新
+      updateLine([].concat(_toConsumableArray(upds), _toConsumableArray(otherads)));
+    }
+  }, [state.lineIds, dataMatch, dealAdd, dealUpdate, removeGraphic, addLine, updateLine, deepEqual]);
+
+  // 处理面数据变化
+  var handlePolygonsChange = (0, _react.useCallback)(function () {
+    var prevPolygons = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var currentPolygons = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    if (!deepEqual(prevPolygons, currentPolygons)) {
+      var _dataMatch3 = dataMatch(prevPolygons, currentPolygons, "id"),
+        deletedDataIDs = _dataMatch3.deletedDataIDs,
+        addedData = _dataMatch3.addedData,
+        updatedData = _dataMatch3.updatedData;
+      var _dealAdd3 = dealAdd(addedData, _toConsumableArray(state.polygonIds)),
+        ads = _dealAdd3.ads,
+        otherupds = _dealAdd3.otherupds;
+      var _dealUpdate3 = dealUpdate(updatedData, _toConsumableArray(state.polygonIds)),
+        upds = _dealUpdate3.upds,
+        otherads = _dealUpdate3.otherads;
+
+      // 删除
+      var _iterator3 = _createForOfIteratorHelper(deletedDataIDs),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var id = _step3.value;
+          removeGraphic(id, "polygon");
+        }
+
+        // 增加
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      addPolygon([].concat(_toConsumableArray(ads), _toConsumableArray(otherads)));
+
+      // 更新
+      updatePolygon([].concat(_toConsumableArray(upds), _toConsumableArray(otherads)));
+    }
+  }, [state.polygonIds, dataMatch, dealAdd, dealUpdate, removeGraphic, addPolygon, updatePolygon, deepEqual]);
+
+  // 处理圆数据变化
+  var handleCirclesChange = (0, _react.useCallback)(function () {
+    var prevCircles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var currentCircles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    if (!deepEqual(prevCircles, currentCircles)) {
+      var _dataMatch4 = dataMatch(prevCircles, currentCircles, "id"),
+        deletedDataIDs = _dataMatch4.deletedDataIDs,
+        addedData = _dataMatch4.addedData,
+        updatedData = _dataMatch4.updatedData;
+      var _dealAdd4 = dealAdd(addedData, _toConsumableArray(state.circleIds)),
+        ads = _dealAdd4.ads,
+        otherupds = _dealAdd4.otherupds;
+      var _dealUpdate4 = dealUpdate(updatedData, _toConsumableArray(state.circleIds)),
+        upds = _dealUpdate4.upds,
+        otherads = _dealUpdate4.otherads;
+
+      // 删除
+      var _iterator4 = _createForOfIteratorHelper(deletedDataIDs),
+        _step4;
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var id = _step4.value;
+          removeGraphic(id, "circle");
+        }
+
+        // 增加
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+      addCircle([].concat(_toConsumableArray(ads), _toConsumableArray(otherads)));
+
+      // 更新
+      updateCircle([].concat(_toConsumableArray(upds), _toConsumableArray(otherads)));
+    }
+  }, [state.circleIds, dataMatch, dealAdd, dealUpdate, removeGraphic, addCircle, updateCircle, deepEqual]);
+  var handleClusterChange = (0, _react.useCallback)(function (prevCluster, currentCluster) {
+    if (!deepEqual(prevCluster, currentCluster)) {
+      setCluster(currentCluster);
+    }
+  }, [deepEqual]);
+  var setMapStyle = (0, _react.useCallback)(function (prevMapStyle, currentMapStyle) {
+    if (currentMapStyle && !deepEqual(prevMapStyle, currentMapStyle)) {
+      if (typeof currentMapStyle === "string") {
+        gisRef.current.setMapStyle({
+          style: currentMapStyle
+        });
+      }
+      if (mapStyle instanceof Array) {
+        gisRef.current.setMapStyle({
+          styleJson: currentMapStyle
+        });
+      }
+    }
+  }, [deepEqual]);
+  var handlePointsCollectionChange = (0, _react.useCallback)(function (prevPointsCollection, currentPointsCollection) {
+    if (!deepEqual(prevPointsCollection, currentPointsCollection)) {
+      var _dataMatch5 = dataMatch(prevPointsCollection, currentPointsCollection, "id"),
+        deletedDataIDs = _dataMatch5.deletedDataIDs,
+        addedData = _dataMatch5.addedData,
+        updatedData = _dataMatch5.updatedData;
+      clearPointCollection(deletedDataIDs);
+      addPointCollection(addedData);
+      updatePointCollection(updatedData);
+    }
+  }, [deepEqual, dataMatch, clearPointCollection, addPointCollection, updatePointCollection]);
+
+  // 初始化
+  var init = (0, _react.useCallback)(function () {
+    var map = createMap();
+    gisRef.current = map;
+    var mapPoints = props.mapPoints,
+      mapLines = props.mapLines,
+      mapPolygons = props.mapPolygons,
+      mapCircles = props.mapCircles,
+      coverageType = props.coverageType,
+      mapCluster = props.mapCluster;
+
+    // 添加点
+    if (mapPoints instanceof Array) {
+      addPoint(mapPoints);
+    }
+
+    // 添加线
+    if (mapLines instanceof Array) {
+      addLine(mapLines);
+    }
+
+    // 添加面
+    if (mapPolygons instanceof Array) {
+      addPolygon(mapPolygons);
+    }
+
+    // 添加圆
+    if (mapCircles instanceof Array) {
+      addCircle(mapCircles);
+    }
+
+    // 设置点聚合
+    if (mapCluster instanceof Array) {
+      cluster(mapCluster);
+    }
+    // 切换地图类型
+    if (coverageType) {
+      setMapType(coverageType);
+    }
+
+    // 保存当前props作为下一次比较的基准
+    prevPropsRef.current = _objectSpread({}, props);
+  }, [createMap, props, addPoint, addLine, addPolygon, addCircle, cluster, setMapType]);
+
+  // 组件挂载
+  (0, _ahooks.useMount)(function () {
+    loadMapJs().then(function () {
+      init();
+    }).catch(function (error) {
+      console.error("Failed to load map:", error);
+    });
+  }, []);
+
+  // 设置地图地图样式
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    if (!gisRef.current) return;
+    var prevProps = prevPropsRef.current;
+    if (props.mapStyle !== prevProps.mapStyle) {
+      setMapStyle(prevProps.mapStyle, props.mapStyle);
+    }
+    prevPropsRef.current.mapStyle = props.mapStyle;
+  }, [props.mapStyle]);
+
+  // 切换地图矢量图和卫星图背景
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    if (!gisRef.current) return;
+    var prevProps = prevPropsRef.current;
+    if (props.coverageType !== prevProps.coverageType) {
+      setMapType(props.coverageType);
+    }
+    prevPropsRef.current.coverageType = props.coverageType;
+  }, [props.coverageType]);
+
+  //  添加海量点
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    if (!gisRef.current) return;
+    var prevProps = prevPropsRef.current;
+    if (props.mapPointCollection !== prevProps.mapPointCollection) {
+      handlePointsCollectionChange(prevProps.mapPointCollection, props.mapPointCollection);
+    }
+    prevPropsRef.current.mapPointCollection = props.mapPointCollection;
+  }, [props.mapPointCollection]);
+
+  // 点数据变化
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    if (!gisRef.current) return;
+    var prevProps = prevPropsRef.current;
+    if (props.mapPoints !== prevProps.mapPoints) {
+      handlePointsChange(prevProps.mapPoints, props.mapPoints);
+    }
+    prevPropsRef.current.mapPoints = props.mapPoints;
+  }, [props.mapPoints]);
+  // 线数据变化
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    if (!gisRef.current) return;
+    var prevProps = prevPropsRef.current;
+    if (props.mapLines !== prevProps.mapLines) {
+      handleLinesChange(prevProps.mapLines, props.mapLines);
+    }
+    prevPropsRef.current.mapLines = props.mapLines;
+  }, [props.mapLines]);
+  // 面数据变化
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    if (!gisRef.current) return;
+    var prevProps = prevPropsRef.current;
+    if (props.mapPolygons !== prevProps.mapPolygons) {
+      handlePolygonsChange(prevProps.mapPolygons, props.mapPolygons);
+    }
+    prevPropsRef.current.mapPolygons = props.mapPolygons;
+  }, [props.mapPolygons]);
+  // 圆数据变化
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    if (!gisRef.current) return;
+    var prevProps = prevPropsRef.current;
+    if (props.mapCircles !== prevProps.mapCircles) {
+      handleCirclesChange(prevProps.mapCircles, props.mapCircles);
+    }
+    prevPropsRef.current.mapCircles = props.mapCircles;
+  }, [props.mapCircles]);
+
+  // 渲染
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    id: props.mapId,
+    ref: mapRef,
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  });
+}
+var _default = exports.default = BaiduMap;