@vtx/map 1.1.47 → 1.1.49

package/lib/VtxMap/OlMap/Map.js

@@ -1,94 +1,57 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _default2 = _interopRequireDefault(require("../../default"));
-
 var _MapToolFunction = require("../MapToolFunction");
-
 var _immutable = _interopRequireDefault(require("immutable"));
-
 var _lodash = require("lodash");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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(_e2) { throw _e2; }, 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(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
+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); }
+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 _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(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 _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; }
-
-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 _objectSpread(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 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 _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 _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, _toPropertyKey(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 _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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 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 _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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-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 _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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } //公共地址配置
 var Set = _immutable["default"].Set;
-
 var OlMap = /*#__PURE__*/function (_React$Component) {
   _inherits(OlMap, _React$Component);
-
   var _super = _createSuper(OlMap);
-
   function OlMap(props) {
     var _this;
-
     _classCallCheck(this, OlMap);
-
     _this = _super.call(this, props);
-
+    // 加载图层
     _defineProperty(_assertThisInitialized(_this), "loadLayers", function () {
       var nextLayers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       var currentLayers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var first = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-
-      var t = _assertThisInitialized(_this); // 对比图层的变化，找出需要新增和需要删除的。
-
-
+      var t = _assertThisInitialized(_this);
+      // 对比图层的变化，找出需要新增和需要删除的。
       var addLayers = nextLayers.filter(function (item) {
         return !currentLayers.map(function (e) {
           return e.coverage;
@@ -99,7 +62,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           return e.coverage;
         }).includes(item.coverage);
       });
-
       if (removeLayers.length > 0) {
         removeLayers.forEach(function (item) {
           var exist = t.olLayers.find(function (e) {
@@ -108,7 +70,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           exist && exist.layer.setVisible(false);
         });
       }
-
       if (addLayers.length > 0) {
         addLayers.map(function (item) {
           if (item.coverage.startsWith("http") || item.coverage.startsWith('/')) {
@@ -118,14 +79,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
                 t.addSuperMapLayer(item.coverage);
                 break;
               // geoServer_geoJSON
-
               case 'geoServer':
                 t.addGeoServerLayer(item.coverage);
               // geoServer_image
-
               case 'geoServer_image':
                 t.addGeoServerImageLayer(item);
-
               default:
                 break;
             }
@@ -134,7 +92,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           } else if (OL_SCREEN[item.coverage]) {
             if (first) {
               var layers = eval(OL_SCREEN[item.coverage].initLayer);
-
               if ((0, _lodash.isArray)(layers)) {
                 layers.map(function (layer) {
                   t.state.gis.addLayer(layer);
@@ -148,50 +105,33 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       } else {
         if (first) {
           var _layer = eval(OL_SCREEN["default"].initLayer);
-
           t.state.gis.addLayer(_layer);
         }
       }
     });
-
     _this.zIndexGraphics = []; //需要放在最后的图元,zoom和pan时刷新dom到最后
-
     _this.htmlPointsId = 'vtx_gmap_html_points'; //html点位容器id class管理
-
     _this.pointCollectionId = 'vtx_gmap_html_pointCollection'; //海量点canvas点位容器id class管理
-
     _this.Label = {}; //所有label 集合
-
     _this.labelLayer = {
       x: 0,
       y: 0
     }; //label图层 位置管理
-
     _this.viewer = null;
     _this.GM = new _MapToolFunction.graphicManage(); //初始化 图元管理方法
-
     _this.getPolygonArea = _MapToolFunction.getPolygonArea;
     _this.layer = null; //保存地图图层数据
-
     _this.loadTimer = null; //初始化地图 load时延缓数据处理
-
     _this.animTimer = {}; //点位跳动动画 定时集合
-
     _this.animCount = {}; //点位跳动动画 定时计数
-
     _this.moveToTimer = null; //moveTo时间对象
-
     _this.drawToolbar = null; //地图绘制对象即interaction
-
     _this.drawParam = {}; //缓存 绘制的数据
-
     _this.editToolbar = null; //编辑对象
-
     _this.editId = ''; //当前编辑的图元id
-
     _this.drawSource = null;
-    _this.drawVector = null; // 图元绘制保存
-
+    _this.drawVector = null;
+    // 图元绘制保存
     _this.drawInfo = {
       sketch: null,
       listener: null
@@ -206,23 +146,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       isCount: false
     };
     _this.heatmap = null; //热力图对象
-
     _this.clusterMarkers = []; //聚合点位id数组
-
     _this.clusterPs = []; //聚合集合点
-
     _this.clusterPt = []; //地图中聚合点集合
-
     _this.morepoints = []; //海量点集合
-
     _this.areaRestriction = null; //区域限制数据
-
     _this.movePoints = [];
     _this.olLayers = []; // ol图层集合 {address:'', layer: ''}
-
     _this.baseLayer = null; // 地图图层
     //是否绘制测距
-
     _this.rangingTool = {
       isRanging: false,
       //是否开启状态
@@ -233,10 +165,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       distance: 0,
       //测距长度
       mapRangingTool: null //测距回调
-
     };
     _this.rangingTools = {}; //测距点线缓存
-
     _this.rangingInfo = {
       sketch: null,
       helpTooltipElement: null,
@@ -262,11 +192,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       clusters: null,
       clusterCircles: null
     };
+    _this.mapCreated = false;
     _this.state = {
       gis: null,
       //地图对象
       mapId: props.mapId,
-      mapCreated: false,
       pointIds: [],
       //地图上点的ids
       lineIds: [],
@@ -289,13 +219,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       }
     };
     _this.frameSelectProps = {};
-
     _this.loadMapJs();
-
     return _this;
-  } // 引入ol样式
-
-
+  }
+  // 引入ol样式
   _createClass(OlMap, [{
     key: "loadMapJs",
     value: function loadMapJs() {
@@ -327,13 +254,14 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           }).appendTo('head');
         }
       });
-    } // 初始化地圖
-
+    }
+    // 初始化地圖
   }, {
     key: "init",
     value: function init() {
-      var t = this; // 创建地图
-
+      var _this2 = this;
+      var t = this;
+      // 创建地图
       t.createMap();
       t.drawSource = new ol.source.Vector({
         wrapX: false
@@ -341,103 +269,84 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       t.drawVector = new ol.layer.Vector({
         source: t.drawSource
       });
-
       var initData = function initData() {
         var _t$props = t.props,
-            mapPoints = _t$props.mapPoints,
-            mapLines = _t$props.mapLines,
-            mapPolygons = _t$props.mapPolygons,
-            mapCircles = _t$props.mapCircles,
-            mapVisiblePoints = _t$props.mapVisiblePoints,
-            mapCluster = _t$props.mapCluster,
-            mapPointCollection = _t$props.mapPointCollection,
-            areaRestriction = _t$props.areaRestriction,
-            heatMapData = _t$props.heatMapData; // 初始化中心点
-
-        t.setCenter(); // 添加点
-
+          mapPoints = _t$props.mapPoints,
+          mapLines = _t$props.mapLines,
+          mapPolygons = _t$props.mapPolygons,
+          mapCircles = _t$props.mapCircles,
+          mapVisiblePoints = _t$props.mapVisiblePoints,
+          mapCluster = _t$props.mapCluster,
+          mapPointCollection = _t$props.mapPointCollection,
+          areaRestriction = _t$props.areaRestriction,
+          heatMapData = _t$props.heatMapData;
+        // 初始化中心点
+        t.setCenter();
+        // 添加点
         if (mapPoints instanceof Array) {
           t.addPoint(mapPoints);
-        } //添加线
-
-
+        }
+        //添加线
         if (mapLines instanceof Array) {
           t.addLine(mapLines);
-        } //添加面
-
-
+        }
+        //添加面
         if (mapPolygons instanceof Array) {
           t.addPolygon(mapPolygons);
-        } //添加圆
-
-
+        }
+        //添加圆
         if (mapCircles instanceof Array) {
           t.addCircle(mapCircles);
-        } //是否设置比例尺
-
-
+        }
+        //是否设置比例尺
         if (t.props.showControl) {
           t.showControl(t.props);
-        } // 画热力图
-
-
+        }
+        // 画热力图
         if (heatMapData) {
           t.heatMapOverlay(heatMapData);
-        } //设置点聚合
-
-
+        }
+        //设置点聚合
         if (mapCluster instanceof Array) {
           t.cluster(mapCluster);
         }
         /*设置指定图元展示*/
-
-
         if (mapVisiblePoints) {
           t.setVisiblePoints(mapVisiblePoints);
-        } //添加海量点
-
-
+        }
+        //添加海量点
         if (mapPointCollection instanceof Array) {
           t.addPointCollection(mapPointCollection);
-        } //设置区域限制
-
-
+        }
+        //设置区域限制
         if (areaRestriction && !!areaRestriction[0] && !!areaRestriction[1]) {
           t.setAreaRestriction(areaRestriction);
         }
-
-        t.setState({
-          mapCreated: true
-        });
+        _this2.mapCreated = true;
       };
-
       var event = function event(e, status) {
         var gis = t.state.gis;
         var overall_feature = null; //鼠标移入事件时记录当前的feature，为鼠标移出要素时保存操作的要素对象
-
         var dragAddMoveFlag = false; //记录地图拖拽和移动事件
         // 地图开始加载时
-
         gis.on('loadstart', function () {
           gis.getTargetElement().classList.add('spinner');
-        }); // 地图加载结束时
-
+        });
+        // 地图加载结束时
         gis.on('loadend', function () {
           gis.getTargetElement().classList.remove('spinner');
-        }); // 地图双击事件
-
-        gis.on('dbclick', function (evt) {}); // 地图点击事件
-
+        });
+        // 地图双击事件
+        gis.on('dbclick', function (evt) {});
+        // 地图点击事件
         gis.on('singleclick', function (evt) {
           var feature = gis.forEachFeatureAtPixel(evt.pixel, function (feature) {
             return feature;
           });
-
           if (feature) {
             var target = feature.getProperties();
             var id = '';
             var elementId = '';
-
             if ((0, _lodash.isArray)(target.features)) {
               // 处理聚合点击
               var properties = target.features[0].getProperties();
@@ -447,25 +356,23 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             } else {
               id = target.id;
               elementId = target.element;
-            } //  top: e.clientY,//当前点所在的位置(屏幕)
+            }
+            //  top: e.clientY,//当前点所在的位置(屏幕)
             // left: e.clientX,
-
-
             t.clickGraphic(id || elementId, evt, target);
           } else {
             t.clickMap(evt);
           }
-        }); // 鼠标移动事件 - 当鼠标指向要素时改变光标状态
-
+        });
+        // 鼠标移动事件 - 当鼠标指向要素时改变光标状态
         gis.on('pointermove', function (evt) {
           var pixel = gis.getEventPixel(evt.originalEvent);
           var hit = gis.hasFeatureAtPixel(pixel);
-          gis.getTargetElement().style.cursor = hit ? 'pointer' : 'default'; // 获取到当前鼠标移动下的feature
-
+          gis.getTargetElement().style.cursor = hit ? 'pointer' : 'default';
+          // 获取到当前鼠标移动下的feature
           var feature = gis.forEachFeatureAtPixel(pixel, function (feature, layer) {
             return feature;
           });
-
           if (feature) {
             overall_feature = feature;
             var values = feature.getProperties();
@@ -476,22 +383,20 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
                 type: 'mousein',
                 event: evt
               });
-
               var _values = overall_feature.getProperties();
-
               t.mouseOutGraphic(_values.id, evt);
               overall_feature = null;
             }
           }
-        }); // 鼠标拖拽事件 - 拖拽开始即是地图移动开始
-
+        });
+        // 鼠标拖拽事件 - 拖拽开始即是地图移动开始
         gis.on('pointerdrag', function (evt) {
           dragAddMoveFlag = true;
           t.dragMapStart(evt);
           t.moveStart(evt);
         });
-        var zoom = 0; // 地图移动事件 - 移动结束即是拖拽事件结束 也是地图缩放事件（无开始和结束事件）的监听
-
+        var zoom = 0;
+        // 地图移动事件 - 移动结束即是拖拽事件结束 也是地图缩放事件（无开始和结束事件）的监听
         gis.on('moveend', function (evt) {
           t.dragMapEnd(evt);
           t.moveEnd(evt);
@@ -500,51 +405,46 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             t.zoomEnd(evt);
           }, 300);
           dragAddMoveFlag = false;
-        }); // gis.getViewport().addEventListener('mouseout', function () {
+        });
+        // gis.getViewport().addEventListener('mouseout', function () {
         //     helpTooltipElement.classList.add('hidden');
         // });
       };
-
       event();
       t.setCenter(t.props.center);
       initData();
-    } // 创建地图
-
+    }
+    // 创建地图
   }, {
     key: "createMap",
     value: function createMap() {
       var t = this;
       var _t$props2 = t.props,
-          _t$props2$olProps = _t$props2.olProps,
-          olProps = _t$props2$olProps === void 0 ? {} : _t$props2$olProps,
-          _t$props2$mapCenter = _t$props2.mapCenter,
-          mapCenter = _t$props2$mapCenter === void 0 ? [] : _t$props2$mapCenter,
-          mapId = _t$props2.mapId,
-          mapZoomLevel = _t$props2.mapZoomLevel,
-          minZoom = _t$props2.minZoom,
-          maxZoom = _t$props2.maxZoom;
+        _t$props2$olProps = _t$props2.olProps,
+        olProps = _t$props2$olProps === void 0 ? {} : _t$props2$olProps,
+        _t$props2$mapCenter = _t$props2.mapCenter,
+        mapCenter = _t$props2$mapCenter === void 0 ? [] : _t$props2$mapCenter,
+        mapId = _t$props2.mapId,
+        mapZoomLevel = _t$props2.mapZoomLevel,
+        minZoom = _t$props2.minZoom,
+        maxZoom = _t$props2.maxZoom;
       var projection = olProps.projection,
-          olCoverage = olProps.olCoverage;
-
+        olCoverage = olProps.olCoverage;
       if (window.VtxMap) {
         window.VtxMap[mapId] = null;
       } else {
         window.VtxMap = {};
       }
-
       if (!minZoom) {
         minZoom = 2;
       }
-
       if (!maxZoom) {
         maxZoom = 19;
       }
-
       if (!projection) {
         projection = 'EPSG:4326';
-      } //中心点
-
-
+      }
+      //中心点
       var center = mapCenter && mapCenter instanceof Array && mapCenter.length == 2 ? mapCenter : [116.400433, 39.906705];
       center = [parseFloat(center[0]), parseFloat(center[1])];
       window.VtxMap[mapId] = t.state.gis = new ol.Map({
@@ -561,8 +461,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           rotate: false,
           attribution: false
         })
-      }); // 基本地图视图
-
+      });
+      // 基本地图视图
       t.viewer = new ol.View({
         center: center,
         zoom: mapZoomLevel || 10,
@@ -572,20 +472,23 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       });
       t.loadLayers(olCoverage, [], true);
       t.initPropsForUser();
-    } // 加载图层
-
+    }
   }, {
     key: "getWMTS",
-    value: // wmts图层资源
+    value:
+    // wmts图层资源
     function getWMTS(options) {
       var url = options.url,
-          params = options.params,
-          sourceOptions = options.sourceOptions; //切片名
+        params = options.params,
+        sourceOptions = options.sourceOptions;
 
-      var matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18']; //分辨率
+      //切片名
+      var matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18'];
 
-      var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125e-4, 3.4332275390625e-4, 1.71661376953125e-4, 8.58306884765625e-5, 4.291534423828125e-5, 2.1457672119140625e-5, 1.0728836059570312e-5, 5.364418029785156e-6, 2.682209014892578e-6]; //切片策略
+      //分辨率
+      var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125e-4, 3.4332275390625e-4, 1.71661376953125e-4, 8.58306884765625e-5, 4.291534423828125e-5, 2.1457672119140625e-5, 1.0728836059570312e-5, 5.364418029785156e-6, 2.682209014892578e-6];
 
+      //切片策略
       var tilegrid = new ol.tilegrid.WMTS({
         extent: [-180.0, -90.0, 180.0, 90.0],
         //范围
@@ -595,9 +498,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         resolutions: resolutions,
         //分辨率
         matrixIds: matrixIds //层级标识列表，与地图级数保持一致
+      });
 
-      }); //设置地图投影
-
+      //设置地图投影
       var projection = new ol.proj.Projection({
         code: 'EPSG:4326',
         units: 'degrees',
@@ -611,29 +514,27 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         projection: projection,
         tileGrid: tilegrid
       }, sourceOptions));
-    } // 添加普通图层
+    }
 
+    // 添加普通图层
   }, {
     key: "addTileLayer",
     value: function addTileLayer(_ref) {
       var url = _ref.url,
-          _ref$params = _ref.params,
-          params = _ref$params === void 0 ? {} : _ref$params,
-          _ref$sourceOptions = _ref.sourceOptions,
-          sourceOptions = _ref$sourceOptions === void 0 ? {} : _ref$sourceOptions,
-          type = _ref.type,
-          source = _ref.source;
-
+        _ref$params = _ref.params,
+        params = _ref$params === void 0 ? {} : _ref$params,
+        _ref$sourceOptions = _ref.sourceOptions,
+        sourceOptions = _ref$sourceOptions === void 0 ? {} : _ref$sourceOptions,
+        type = _ref.type,
+        source = _ref.source;
       if (url) {
         var exist = this.olLayers.find(function (item) {
           return item.address === url;
         });
-
         if (exist) {
           exist.layer.setVisible(true);
           return;
         }
-
         var layerSource = source || (type === 'WMTS' ? this.getWMTS({
           url: url,
           params: params,
@@ -641,58 +542,54 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         }) : new ol.source.XYZ(_objectSpread({
           url: url
         }, sourceOptions)));
-
         var _layer2 = new ol.layer.Tile({
           source: layerSource
-        }); // 将图层添加到地图上
-
+        });
 
+        // 将图层添加到地图上
         this.state.gis.addLayer(_layer2);
         this.olLayers.push({
           address: url,
           layer: _layer2
         });
       }
-    } // 添加超图图层
-
+    }
+    // 添加超图图层
   }, {
     key: "addSuperMapLayer",
     value: function addSuperMapLayer(url) {
       var exist = this.olLayers.find(function (item) {
         return item.address === url;
       });
-
       if (exist) {
         exist.layer.setVisible(true);
         return;
       }
-
       var layer = new ol.layer.Tile({
         source: new ol.source.TileSuperMapRest({
           url: url
         })
-      }); // 将图层添加到地图上
-
+      });
+      // 将图层添加到地图上
       this.state.gis.addLayer(layer);
       this.olLayers.push({
         address: url,
         layer: layer
       });
-    } // 添加geoServer_geoJSON图层
-
+    }
+    // 添加geoServer_geoJSON图层
   }, {
     key: "addGeoServerLayer",
     value: function addGeoServerLayer(_url) {
       var exist = this.olLayers.find(function (item) {
         return item.address === _url;
       });
-
       if (exist) {
         exist.layer.setVisible(true);
         return;
-      } // 矢量数据源
-
+      }
 
+      // 矢量数据源
       var vectorSource = new ol.source.Vector({
         // 设置格式化类型
         format: new ol.format.GeoJSON(),
@@ -701,15 +598,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           return "".concat(_url, "&bbox=").concat(extent.join(','));
         },
         strategy: ol.loadingstrategy.bbox
-      }); // 矢量图层
+      });
 
+      // 矢量图层
       var layer = new ol.layer.Vector({
         // 设置数据源
         source: vectorSource,
         // 设置图层样式也可以 function (feature) { /** 根据内容动态加载样式 **/ return Style}
         style: function style(feature) {
           var _icon$;
-
           var el = feature.A || {};
           var icon = JSON.parse(el.icon || '[]');
           var mapIcon = (_icon$ = icon[0]) !== null && _icon$ !== void 0 && _icon$.id ? "/cloudFile/common/downloadFile?id=".concat(icon[0].id) : require("../images/defaultMarker.png");
@@ -730,8 +627,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             })
           });
         }
-      }); // 将图层添加到地图上
-
+      });
+      // 将图层添加到地图上
       this.state.gis.addLayer(layer);
       this.olLayers.push({
         address: _url,
@@ -742,7 +639,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
     key: "formatUrl",
     value: function formatUrl(url) {
       var param = {},
-          address = url.split("?")[0];
+        address = url.split("?")[0];
       url.split("?")[1].split("&").map(function (item) {
         var json = item.split("=");
         param[json[0].toUpperCase()] = json[1] ? decodeURIComponent(json[1]) : '';
@@ -751,8 +648,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         param: param,
         address: address
       };
-    } // 添加geoServer_image图层
-
+    }
+    // 添加geoServer_image图层
   }, {
     key: "addGeoServerImageLayer",
     value: function addGeoServerImageLayer(item) {
@@ -760,18 +657,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       var exist = this.olLayers.find(function (item) {
         return item.address === url;
       });
-
       if (exist) {
         exist.layer.setVisible(true);
         return;
       }
-
       var _this$formatUrl = this.formatUrl(url),
-          _this$formatUrl$param = _this$formatUrl.param,
-          param = _this$formatUrl$param === void 0 ? {} : _this$formatUrl$param,
-          address = _this$formatUrl.address; // 矢量数据源
-
-
+        _this$formatUrl$param = _this$formatUrl.param,
+        param = _this$formatUrl$param === void 0 ? {} : _this$formatUrl$param,
+        address = _this$formatUrl.address;
+      // 矢量数据源
       var vectorSource = new ol.source.ImageWMS({
         url: address,
         serverType: 'geoserver',
@@ -780,140 +674,122 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         params: _objectSpread(_objectSpread({
           VERSION: '1.1.0'
         }, item.param || {}), param)
-      }); // 矢量图层
+      });
 
+      // 矢量图层
       var layer = new ol.layer.Image({
         // 设置数据源
         source: vectorSource
-      }); // 将图层添加到地图上
-
+      });
+      // 将图层添加到地图上
       this.state.gis.addLayer(layer);
       this.olLayers.push({
         address: url,
         layer: layer,
         source: vectorSource
       });
-    } // 初始化对外方法
-
+    }
+    // 初始化对外方法
   }, {
     key: "initPropsForUser",
     value: function initPropsForUser() {
       var t = this;
-
       t.state.gis["getCenter"] = function () {
         return t.getCenter();
       };
-
       t.state.gis["setCenter"] = function (gt) {
         t.setCenter(gt);
       };
-
       t.state.gis["getZoomLevel"] = function () {
         return t.getZoomLevel();
       };
-
       t.state.gis["showInfoWindow"] = function (obj) {
         return t.showInfoWindow(obj);
       };
-
       t.state.gis["hideInfoWindow"] = function () {
         return t.hideInfoWindow();
       };
-
       t.state.gis["frameSelect"] = function () {
         var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var callback = arguments.length > 1 ? arguments[1] : undefined;
         return t.frameSelect(obj, callback);
       };
-
       t.state.gis["clearFrameSelect"] = function () {
         return t.clearFrameSelect();
       };
-
       t.state.gis["clearFrameSelectById"] = function (id) {
         return t.clearFrameSelectById(id);
       };
-
       t.state.gis["refresh"] = function () {
         t.refresh();
       };
-    } // 设置中心点
-
+    }
+    // 设置中心点
   }, {
     key: "setCenter",
     value: function setCenter(gt) {
       var t = this;
-
       if (!t.state.gis) {
         return;
       }
-
       if (gt) {
         //经纬度 必须存在 否则不操作
         if (!gt[0] || !gt[1]) {
           return false;
-        } //如果设置的经纬度 与当前中心点一样 不操作
-
-
+        }
+        //如果设置的经纬度 与当前中心点一样 不操作
         var c = t.getCenter();
-
         if (c.lng == gt[0] && c.lat == gt[1]) {
           return false;
         }
-
         t.state.gis.getView().setCenter(gt);
         t.viewer.animate({
           center: gt,
           duration: 2000
         });
       }
-    } //设置地图缩放层级
-
+    }
+    //设置地图缩放层级
   }, {
     key: "setZoomLevel",
     value: function setZoomLevel(zoom) {
       var t = this;
       var z = t.state.gis.getView().getZoom();
-
       if (z == zoom) {
         return false;
       }
-
       t.state.gis.getView().setZoom(zoom);
-    } //获取当前中心点
-
+    }
+    //获取当前中心点
   }, {
     key: "getCenter",
     value: function getCenter() {
       var t = this;
       var gis = t.state.gis;
-
       var _gis$getView$calculat = gis.getView().calculateExtent(gis.getSize()),
-          _gis$getView$calculat2 = _slicedToArray(_gis$getView$calculat, 4),
-          xmin = _gis$getView$calculat2[0],
-          ymin = _gis$getView$calculat2[1],
-          xmax = _gis$getView$calculat2[2],
-          ymax = _gis$getView$calculat2[3];
-
+        _gis$getView$calculat2 = _slicedToArray(_gis$getView$calculat, 4),
+        xmin = _gis$getView$calculat2[0],
+        ymin = _gis$getView$calculat2[1],
+        xmax = _gis$getView$calculat2[2],
+        ymax = _gis$getView$calculat2[3];
       return {
         lng: (xmin + xmax) / 2,
         lat: (ymin + ymax) / 2
       };
-    } //编辑图元
-
+    }
+    //编辑图元
   }, {
     key: "doEdit",
     value: function doEdit(id) {
-      var t = this; //获取图元对象
-
+      var t = this;
+      //获取图元对象
       var gc = t.GM.getGraphic(id);
       var gp = t.GM.getGraphicParam(id);
-      if (!gc) return false; //关闭先前编辑的图元
-
+      if (!gc) return false;
+      //关闭先前编辑的图元
       if (!!t.state.editId) {
         t.endEdit();
       }
-
       if (!t.editToolbar) {
         t.editToolbar = new ol.interaction.Modify({
           source: gp.source,
@@ -923,26 +799,23 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       } else {
         t.state.gis.addInteraction(t.editToolbar);
       }
-
       t.editToolbar.on('modifyend', function (e) {
         var feature = gc;
         e.features.forEach(function (feature) {
           feature = feature;
-        }); //返回参数
-
+        });
+        //返回参数
         var param = {
           id: id,
           e: e
-        }; // 绘制内部管理的图元
-
+        };
+        // 绘制内部管理的图元
         if (gp.geometry.type == 'point') {
           var cur = feature.getProperties().geometry;
-
           var _cur$flatCoordinates = _slicedToArray(cur.flatCoordinates, 2),
-              lng = _cur$flatCoordinates[0],
-              lat = _cur$flatCoordinates[1]; //处理点返回参数
-
-
+            lng = _cur$flatCoordinates[0],
+            lat = _cur$flatCoordinates[1];
+          //处理点返回参数
           param = _objectSpread(_objectSpread({}, param), {}, {
             attributes: _objectSpread(_objectSpread({}, gp.attributes), {}, {
               longitude: lng,
@@ -971,14 +844,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               y: lat
             }
           });
-        } //线
-
-
+        }
+        //线
         if (gp.geometry.type == 'polyline') {
           var _cur = feature.getProperties().geometry;
           var oddList = [],
-              evenList = [];
-
+            evenList = [];
           _cur.flatCoordinates.map(function (item, index) {
             // 判断下标奇偶数
             if (index % 2 === 0) {
@@ -987,15 +858,13 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               oddList.push(item);
             }
           });
-
           var path = oddList.map(function (item, index) {
             return [evenList[index], oddList[index]];
-          }); //处理线返回参数
-
+          });
+          //处理线返回参数
           var _t$dealData = t.dealData(path),
-              lnglatAry = _t$dealData.lnglatAry,
-              _extent = _t$dealData._extent;
-
+            lnglatAry = _t$dealData.lnglatAry,
+            _extent = _t$dealData._extent;
           param = _objectSpread(_objectSpread({}, param), {}, {
             attributes: _objectSpread(_objectSpread({}, gp.attributes), {}, {
               paths: path,
@@ -1027,14 +896,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             },
             distance: t.calculateDistance(path)
           });
-        } //面
-
-
+        }
+        //面
         if (gp.geometry.type == 'polygon') {
           var _cur2 = feature.getProperties().geometry;
           var _oddList = [],
-              _evenList = [];
-
+            _evenList = [];
           _cur2.flatCoordinates.map(function (item, index) {
             // 判断下标奇偶数
             if (index % 2 === 0) {
@@ -1043,16 +910,13 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               _oddList.push(item);
             }
           });
-
           var _path = _oddList.map(function (item, index) {
             return [_evenList[index], _oddList[index]];
-          }); //处理线返回参数
-
-
+          });
+          //处理线返回参数
           var _t$dealData2 = t.dealData(_path),
-              _lnglatAry = _t$dealData2.lnglatAry,
-              _extent2 = _t$dealData2._extent;
-
+            _lnglatAry = _t$dealData2.lnglatAry,
+            _extent2 = _t$dealData2._extent;
           param = _objectSpread(_objectSpread({}, param), {}, {
             attributes: _objectSpread(_objectSpread({}, gp.attributes), {}, {
               rings: _path,
@@ -1085,12 +949,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             area: (0, _MapToolFunction.getPolygonArea)(_path)
           });
         }
-
         if (gp.geometry.type == 'circle') {
           var _cur3 = feature.getProperties().geometry;
-
           var center = _cur3.getCenter();
-
           var sketchCoords_ = [_cur3.flatCoordinates[0], _cur3.flatCoordinates[1]];
           var sketchCoords_2 = [_cur3.flatCoordinates[2], _cur3.flatCoordinates[3]];
           var radius = ol.sphere.getDistance(sketchCoords_, sketchCoords_2);
@@ -1135,31 +996,27 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             }
           });
         }
-
         if ('editGraphicChange' in t.props && typeof t.props.editGraphicChange == 'function') {
           t.props.editGraphicChange(param);
         }
-
         t.GM.setGraphic(id, feature).setGraphicParam(id, _objectSpread(_objectSpread({}, param), {}, {
           source: gp.source
         }));
       });
       t.editId = id;
-    } //关闭编辑
-
+    }
+    //关闭编辑
   }, {
     key: "endEdit",
     value: function endEdit() {
       var t = this;
-
       if (t.editToolbar) {
         t.state.gis.removeInteraction(t.editToolbar);
         t.editToolbar = null;
       }
-
       t.editId = '';
-    } // 绘制图元
-
+    }
+    // 绘制图元
   }, {
     key: "draw",
     value: function draw(obj) {
@@ -1167,38 +1024,35 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       var drawInfo = t.drawInfo;
       var gis = t.state.gis;
       var drawParam = {},
-          image,
-          stroke,
-          fill; //初始化参数
-
+        image,
+        stroke,
+        fill;
+      //初始化参数
       drawParam.geometryType = obj.geometryType || 'point';
       drawParam.parameter = obj.parameter ? _objectSpread({}, obj.parameter) : {};
       drawParam.data = obj.data ? _objectSpread({}, obj.data) : {};
-      drawParam.data.id = (obj.data || {}).id || "draw".concat(new Date().getTime()); //缓存 绘制的数据
-
-      t.drawParam = drawParam; //判断id是否存在
-
+      drawParam.data.id = (obj.data || {}).id || "draw".concat(new Date().getTime());
+      //缓存 绘制的数据
+      t.drawParam = drawParam;
+      //判断id是否存在
       var len = t.state.drawIds[drawParam.geometryType].indexOf(drawParam.data.id);
-
       if (len > -1) {
         //如果id存在 删除存在的图元,清除drawId中的id数据
         t.removeGraphic(drawParam.data.id);
         t.state.drawIds[drawParam.geometryType].splice(len, 1);
       }
-
       var type = 'Point',
-          style = new ol.style.Style({
-        image: new ol.style.Icon({
-          anchor: [-drawParam.parameter.markerContentX || -15, -drawParam.parameter.markerContentY || -15],
-          anchorXUnits: 'pixels',
-          anchorYUnits: 'pixels',
-          src: drawParam.parameter.url || require("../images/defaultMarker.png"),
-          opacity: 1,
-          scale: drawParam.parameter.scale || 1
-        })
-      });
+        style = new ol.style.Style({
+          image: new ol.style.Icon({
+            anchor: [-drawParam.parameter.markerContentX || -15, -drawParam.parameter.markerContentY || -15],
+            anchorXUnits: 'pixels',
+            anchorYUnits: 'pixels',
+            src: drawParam.parameter.url || require("../images/defaultMarker.png"),
+            opacity: 1,
+            scale: drawParam.parameter.scale || 1
+          })
+        });
       var geometryFunction;
-
       switch (drawParam.geometryType) {
         case 'point':
           type = 'Point';
@@ -1213,7 +1067,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             })
           });
           break;
-
         case 'polyline':
           type = 'LineString';
           style = new ol.style.Style({
@@ -1224,7 +1077,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             })
           });
           break;
-
         case 'polygon':
           type = 'Polygon';
           style = new ol.style.Style({
@@ -1238,12 +1090,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             })
           });
           break;
-
         case 'rectangle':
           type = 'Circle';
           geometryFunction = ol.interaction.Draw.createBox();
           break;
-
         case 'circle':
           type = 'Circle';
           style = new ol.style.Style({
@@ -1258,38 +1108,33 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           });
           break;
       }
-
       if (!t.drawToolbar) {
         t.drawToolbar = new ol.interaction.Draw({
           source: t.drawSource,
           type: type,
-          geometryFunction: geometryFunction // style: style
-
+          geometryFunction: geometryFunction
+          // style: style
         });
         gis.addInteraction(t.drawToolbar);
       } else {
         gis.addInteraction(t.drawToolbar);
       }
-
       t.drawToolbar.on('drawend', function (e) {
         var _t$frameSelectProps$p;
-
         // 关闭绘制事件
-        t.drawToolbar.finishDrawing(); // 移除
-
+        t.drawToolbar.finishDrawing();
+        // 移除
         gis.removeInteraction(t.drawToolbar);
-        var gc = e.feature.getGeometry(); //返回参数
-
-        var param = {}; // 绘制内部管理的图元
-
+        var gc = e.feature.getGeometry();
+        //返回参数
+        var param = {};
+        // 绘制内部管理的图元
         if (t.drawParam.geometryType == 'point') {
           var _gc$flatCoordinates = _slicedToArray(gc.flatCoordinates, 2),
-              lng = _gc$flatCoordinates[0],
-              lat = _gc$flatCoordinates[1];
-
+            lng = _gc$flatCoordinates[0],
+            lat = _gc$flatCoordinates[1];
           gc.x = lng;
           gc.y = lat;
-
           if (t.GM.isRepetition(t.drawParam.data.id)) {
             t.updatePoint([{
               id: t.drawParam.data.id,
@@ -1306,9 +1151,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               url: t.drawParam.parameter.url || require("../images/defaultMarker.png"),
               config: _objectSpread({}, t.drawParam.parameter)
             }], 'point');
-          } //处理点返回参数
-
+          }
 
+          //处理点返回参数
           param = {
             id: t.drawParam.data.id,
             attributes: {
@@ -1323,12 +1168,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             geometryType: 'point',
             mapLayer: t.GM.getGraphic(t.drawParam.data.id)
           };
-        } //线
-
-
+        }
+        //线
         if (t.drawParam.geometryType == 'polyline') {
           var oddList = [],
-              evenList = [];
+            evenList = [];
           gc.flatCoordinates.map(function (item, index) {
             // 判断下标奇偶数
             if (index % 2 === 0) {
@@ -1340,7 +1184,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           var path = oddList.map(function (item, index) {
             return [evenList[index], oddList[index]];
           });
-
           if (t.GM.isRepetition(t.drawParam.data.id)) {
             t.updateLine([{
               id: t.drawParam.data.id,
@@ -1353,13 +1196,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               paths: path,
               config: _objectSpread({}, t.drawParam.parameter)
             }], 'polyline');
-          } //处理线返回参数
-
-
+          }
+          //处理线返回参数
           var _t$dealData3 = t.dealData(path),
-              lnglatAry = _t$dealData3.lnglatAry,
-              _extent = _t$dealData3._extent;
-
+            lnglatAry = _t$dealData3.lnglatAry,
+            _extent = _t$dealData3._extent;
           param = {
             lnglatAry: lnglatAry,
             id: t.drawParam.data.id,
@@ -1375,12 +1216,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             geometryType: 'polyline',
             mapLayer: t.GM.getGraphic(t.drawParam.data.id)
           };
-        } //面
-
-
+        }
+        //面
         if (t.drawParam.geometryType == 'polygon') {
           var _oddList2 = [],
-              _evenList2 = [];
+            _evenList2 = [];
           gc.flatCoordinates.map(function (item, index) {
             // 判断下标奇偶数
             if (index % 2 === 0) {
@@ -1389,11 +1229,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               _oddList2.push(item);
             }
           });
-
           var _path2 = _oddList2.map(function (item, index) {
             return [_evenList2[index], _oddList2[index]];
           });
-
           if (t.GM.isRepetition(t.drawParam.data.id)) {
             t.updatePolygon([{
               id: t.drawParam.data.id,
@@ -1406,13 +1244,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               rings: _path2,
               config: _objectSpread({}, t.drawParam.parameter)
             }], t.drawParam.geometryType);
-          } //处理线返回参数
-
-
+          }
+          //处理线返回参数
           var _t$dealData4 = t.dealData(_path2),
-              _lnglatAry2 = _t$dealData4.lnglatAry,
-              _extent3 = _t$dealData4._extent;
-
+            _lnglatAry2 = _t$dealData4.lnglatAry,
+            _extent3 = _t$dealData4._extent;
           param = {
             lnglatAry: _lnglatAry2,
             id: t.drawParam.data.id,
@@ -1430,10 +1266,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             mapLayer: t.GM.getGraphic(t.drawParam.data.id)
           };
         }
-
         if (t.drawParam.geometryType == 'rectangle') {
           var _path3 = e.feature.getGeometry().getCoordinates()[0];
-
           if (t.GM.isRepetition(t.drawParam.data.id)) {
             t.updatePolygon([{
               id: t.drawParam.data.id,
@@ -1446,13 +1280,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               rings: _path3,
               config: _objectSpread({}, t.drawParam.parameter)
             }], t.drawParam.geometryType);
-          } //处理线返回参数
-
-
+          }
+          //处理线返回参数
           var _t$dealData5 = t.dealData(_path3),
-              _lnglatAry3 = _t$dealData5.lnglatAry,
-              _extent4 = _t$dealData5._extent;
-
+            _lnglatAry3 = _t$dealData5.lnglatAry,
+            _extent4 = _t$dealData5._extent;
           param = {
             lnglatAry: _lnglatAry3,
             id: t.drawParam.data.id,
@@ -1470,14 +1302,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             mapLayer: t.GM.getGraphic(t.drawParam.data.id)
           };
         }
-
         if (t.drawParam.geometryType == 'circle') {
           var center = e.feature.getGeometry().getCenter();
           var cur = e.feature.getProperties().geometry;
           var sketchCoords_ = [cur.flatCoordinates[0], cur.flatCoordinates[1]];
           var sketchCoords_2 = [cur.flatCoordinates[2], cur.flatCoordinates[3]];
           var radius = ol.sphere.getDistance(sketchCoords_, sketchCoords_2);
-
           if (t.GM.isRepetition(t.drawParam.data.id)) {
             t.updateCircle([{
               id: t.drawParam.data.id,
@@ -1495,7 +1325,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               config: _objectSpread({}, t.drawParam.parameter)
             }], t.drawParam.geometryType);
           }
-
           param = {
             area: Math.PI * Math.pow(radius, 2),
             attributes: {
@@ -1512,29 +1341,26 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             mapLayer: t.GM.getGraphic(t.drawParam.data.id)
           };
         }
-
         if ('drawEnd' in t.props && typeof t.props.drawEnd == 'function') {
           t.props.drawEnd(param);
         }
-
         if (((_t$frameSelectProps$p = t.frameSelectProps[param.attributes.id]) === null || _t$frameSelectProps$p === void 0 ? void 0 : _t$frameSelectProps$p.callback) instanceof Function) {
           t.frameSelectProps[param.attributes.id].callback(param);
         }
-      }); //保存绘制图元的id便于后期比对
-
+      });
+      //保存绘制图元的id便于后期比对
       t.state.drawIds[drawParam.geometryType].push(drawParam.data.id);
-    } // 关闭绘制
-
+    }
+    // 关闭绘制
   }, {
     key: "closeDraw",
     value: function closeDraw() {
       var t = this;
       var gis = t.state.gis;
-
       if (t.drawToolbar) {
         // 关闭绘制事件
-        t.drawToolbar.finishDrawing(); // 移除
-
+        t.drawToolbar.finishDrawing();
+        // 移除
         gis.removeInteraction(t.drawToolbar);
         t.drawToolbar = null;
         t.drawInfo = {
@@ -1544,7 +1370,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       }
     }
     /*工具方法*/
-
   }, {
     key: "vtxRangingTool",
     value: function vtxRangingTool() {
@@ -1596,8 +1421,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       t.createMeasureTooltip();
       t.createDeleteTooltip();
       t.state.gis.addLayer(t.rangingInfo.drawLayer);
-      t.state.gis.addInteraction(t.rangingInfo.draw); // 开始监听绘制
-
+      t.state.gis.addInteraction(t.rangingInfo.draw);
+      // 开始监听绘制
       t.rangingInfo.draw.on('drawstart', function (evt) {
         t.rangingInfo.feature = evt.feature;
         var tooltipCoord = evt.coordinate;
@@ -1616,32 +1441,29 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           t.rangingInfo.deleteToolTip.setPosition(tooltipCoord);
           t.rangingInfo.deleteToolTip.setOffset([20, 10]);
         });
-      }); // 双击绘制完成
-
+      });
+      // 双击绘制完成
       t.rangingInfo.draw.on('drawend', function () {
         t.rangingInfo.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
         t.rangingInfo.measureTooltip.setOffset([0, -7]);
         t.rangingInfo.feature = null;
-        t.rangingInfo.measureTooltipElement = null; // t.createMeasureTooltip();
-
+        t.rangingInfo.measureTooltipElement = null;
+        // t.createMeasureTooltip();
         new ol.Observable.unByKey(t.rangingInfo.listener);
         t.state.gis.removeInteraction(t.rangingInfo.draw);
-
         if ('mapRangingTool' in t.props) {
           t.props.mapRangingTool(obj);
         }
       });
-    } // 绘图时创建提示
-
+    }
+    // 绘图时创建提示
   }, {
     key: "createHelpTooltip",
     value: function createHelpTooltip() {
       var t = this;
-
       if (t.rangingTool.helpTooltipElement) {
         t.rangingTool.helpTooltipElement.parentNode.removeChild(t.rangingTool.helpTooltipElement);
       }
-
       t.rangingTool.helpTooltipElement = document.createElement('div');
       t.rangingTool.helpTooltipElement.className = 'ol-tooltip hidden';
       t.rangingTool.helpTooltip = new ol.Overlay({
@@ -1650,17 +1472,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         positioning: 'center-left'
       });
       t.state.gis.addOverlay(t.rangingTool.helpTooltip);
-    } // 工具画图提示
-
+    }
+    // 工具画图提示
   }, {
     key: "createMeasureTooltip",
     value: function createMeasureTooltip() {
       var t = this;
-
       if (t.rangingInfo.measureTooltipElement) {
         t.rangingInfo.measureTooltipElement.parentNode.removeChild(t.rangingInfo.measureTooltipElement);
       }
-
       t.rangingInfo.measureTooltipElement = document.createElement('div');
       t.rangingInfo.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
       t.rangingInfo.measureTooltip = new ol.Overlay({
@@ -1671,17 +1491,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         insertFirst: false
       });
       t.state.gis.addOverlay(t.rangingInfo.measureTooltip);
-    } // 创建删除提示
-
+    }
+    // 创建删除提示
   }, {
     key: "createDeleteTooltip",
     value: function createDeleteTooltip() {
       var t = this;
-
       if (t.rangingInfo.deleteToolTipElement) {
         t.rangingInfo.deleteToolTipElement.parentNode.removeChild(t.rangingInfo.deleteToolTipElement);
       }
-
       t.rangingInfo.deleteToolTipElement = document.createElement('div');
       t.rangingInfo.deleteToolTipElement.className = 'ol-tooltip-delete';
       t.rangingInfo.deleteToolTipElement.innerHTML = 'X';
@@ -1708,14 +1526,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "formatLength",
     value: function formatLength(line) {
-      var flatCoordinates = line.flatCoordinates; // const length = new ol.sphere.getDistance([flatCoordinates[0], flatCoordinates[1]],[flatCoordinates[2], flatCoordinates[3]]);
-
+      var flatCoordinates = line.flatCoordinates;
+      // const length = new ol.sphere.getDistance([flatCoordinates[0], flatCoordinates[1]],[flatCoordinates[2], flatCoordinates[3]]);
       var paths = [];
-
       for (var n = 0; n < flatCoordinates.length; n += 2) {
         paths.push([flatCoordinates[n], flatCoordinates[n + 1]]);
       }
-
       var length = 0;
       if (paths.length >= 2) paths.map(function (item, index) {
         if (index <= paths.length - 2) {
@@ -1723,23 +1539,21 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         }
       });
       var output = '';
-
       if (length > 100) {
         output = Math.round(length / 1000 * 100) / 100 + ' ' + 'km';
       } else {
         output = Math.round(length * 100) / 100 + ' ' + 'm';
       }
-
       return output;
     }
   }, {
     key: "getMapExtent",
-    value: // 获取地图的当前位置状态信息
+    value:
+    // 获取地图的当前位置状态信息
     function getMapExtent() {
       var t = this;
       var gis = t.state.gis;
       var obj = {};
-
       if (gis) {
         var nowBounds = gis.getView().calculateExtent(gis.getSize());
         obj.southWest = {
@@ -1752,12 +1566,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         };
         obj.nowCenter = t.getCenter();
         obj.zoom = t.getZoomLevel();
-
         var _gis$getSize = gis.getSize(),
-            _gis$getSize2 = _slicedToArray(_gis$getSize, 2),
-            width = _gis$getSize2[0],
-            height = _gis$getSize2[1];
-
+          _gis$getSize2 = _slicedToArray(_gis$getSize, 2),
+          width = _gis$getSize2[0],
+          height = _gis$getSize2[1];
         obj.mapSize = {
           width: width,
           height: height
@@ -1765,14 +1577,13 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         obj.radius = ol.sphere.getDistance([obj.nowCenter.lng, obj.nowCenter.lat], [obj.northEast.lng, obj.northEast.lat]);
         return obj;
       }
-    } //将制定图元展示在视野内 (强制改变地图中心位置)
-
+    }
+    //将制定图元展示在视野内 (强制改变地图中心位置)
     /*
         参数arg格式如下1,2
         1.string   格式如:'1,a,2,3,4'
         2.数组 ['1','2']
     */
-
   }, {
     key: "setVisiblePoints",
     value: function setVisiblePoints(mapVisiblePoints) {
@@ -1781,64 +1592,50 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       var arg = null;
       var type = mapVisiblePoints.type;
       var ary = []; //图元id集合
-
       var obj = []; //经纬度集合
-
       switch (mapVisiblePoints.fitView) {
         case 'point':
           arg = this.state.pointIds;
           break;
-
         case 'line':
           arg = this.state.lineIds;
           break;
-
         case 'polygon':
           arg = this.state.polygonIds;
           break;
-
         case 'circle':
           arg = this.state.circleIds;
           break;
-
         case 'all':
           arg = this.state.pointIds.concat(this.state.lineIds).concat(this.state.polygonIds).concat(this.state.circleIds);
           break;
-
         default:
           arg = mapVisiblePoints.fitView;
           break;
       }
-
       if (typeof arg === 'string') {
         ary = arg.split(',');
       } else if (arg instanceof Array) {
         ary = arg;
       }
-
       for (var i = 0; i < ary.length; i++) {
         var g = t.GM.getGraphicParam(ary[i]);
-
         if (g) {
           switch (g.geometry.type) {
             case 'point':
               obj.push([g.geometry.x, g.geometry.y]);
-
             case 'circle':
               obj.push([g.geometry.x, g.geometry.y]);
               break;
-
             case 'polyline':
               obj = [].concat(_toConsumableArray(obj), _toConsumableArray(g.geometry.paths));
               break;
-
             case 'polygon':
               obj = [].concat(_toConsumableArray(obj), _toConsumableArray(g.geometry.rings));
               break;
           }
         }
       }
-
       if (obj.length > 0) {
         var displayRange = new ol.extent.boundingExtent(obj);
         gis.getView().fit(displayRange, gis.getSize());
@@ -1848,17 +1645,14 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
     key: "getFitView",
     value: function getFitView(ids) {
       var t = this;
-
       if (ids.length > 0) {
         var maxX = null,
-            maxY = null,
-            minX = null,
-            minY = null;
-
+          maxY = null,
+          minX = null,
+          minY = null;
         for (var i = 0; i < ids.length; i++) {
           var coord = t.GM.getGraphic(ids[i]);
           var boundsArry = coord.getGeometry().getExtent();
-
           if (minX === null) {
             minX = boundsArry[0];
             minY = boundsArry[1];
@@ -1871,14 +1665,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             maxY = Math.max(boundsArry[3], maxY);
           }
         }
-
         var bounds = [minX, minY, maxX, maxY];
         return bounds;
       }
     }
     /*功能方法*/
     //获取当前地图的中心位置
-
   }, {
     key: "getCurrentCenter",
     value: function getCurrentCenter() {
@@ -1886,36 +1678,31 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       var gis = t.state.gis;
       var extent = gis.getView().calculateExtent(gis.getSize());
       return [(extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2];
-    } //获取当前比例尺
-
+    }
+    //获取当前比例尺
   }, {
     key: "getZoomLevel",
     value: function getZoomLevel() {
       var t = this;
       return t.state.gis.getView().getZoom();
-    } //获取图元数据
-
+    }
+    //获取图元数据
   }, {
     key: "getGraphic",
     value: function getGraphic(id) {
       var t = this;
-
       if (!id) {
         return false;
       }
-
       var gp = t.GM.getGraphicParam(id);
       var gg = t.GM.getGraphic(id);
-
       if (!gg) {
         return false;
       }
-
       var p = {},
-          pts = [],
-          lng = 0,
-          lat = 0;
-
+        pts = [],
+        lng = 0,
+        lat = 0;
       switch (gp.geometryType) {
         case 'point':
           lng = gp.geometry.x;
@@ -1936,7 +1723,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             })
           });
           break;
-
         case 'polyline':
           pts = gp.geometry.paths;
           p = _objectSpread(_objectSpread({}, gp), {}, {
@@ -1952,7 +1738,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             })
           });
           break;
-
         case 'polygon':
           pts = gp.geometry.rings;
           p = _objectSpread(_objectSpread({}, gp), {}, {
@@ -1969,7 +1754,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             area: (0, _MapToolFunction.getPolygonArea)(pts)
           });
           break;
-
         case 'circle':
           lng = gp.geometry.x;
           lat = gp.geometry.y;
@@ -1994,18 +1778,17 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           });
           break;
       }
-
       return p;
-    } // 转换dom节点
-
+    }
+    // 转换dom节点
   }, {
     key: "parseDom",
     value: function parseDom(domStr) {
       var domObj = document.createElement('div');
       domObj.innerHTML = domStr;
       return domObj.childNodes;
-    } //添加海量点
-
+    }
+    //添加海量点
   }, {
     key: "addPointCollection",
     value: function addPointCollection() {
@@ -2017,12 +1800,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           var p = t.state.gis.getPixelFromCoordinate([d.lng, d.lat]);
           return [p[0], p[1]];
         });
-
         var _t$state$gis$getSize = t.state.gis.getSize(),
-            _t$state$gis$getSize2 = _slicedToArray(_t$state$gis$getSize, 2),
-            width = _t$state$gis$getSize2[0],
-            height = _t$state$gis$getSize2[1];
-
+          _t$state$gis$getSize2 = _slicedToArray(_t$state$gis$getSize, 2),
+          width = _t$state$gis$getSize2[0],
+          height = _t$state$gis$getSize2[1];
         var options = {
           size: d.size,
           shape: d.shape,
@@ -2038,8 +1819,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         });
         VotexpointCollection.draw();
       });
-    } //更新海量点
-
+    }
+    //更新海量点
   }, {
     key: "updatePointCollection",
     value: function updatePointCollection() {
@@ -2052,12 +1833,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               var p = t.state.gis.getPixelFromCoordinate([d.lng, d.lat]);
               return [p[0], p[1]];
             });
-
             var _t$state$gis$getSize3 = t.state.gis.getSize(),
-                _t$state$gis$getSize4 = _slicedToArray(_t$state$gis$getSize3, 2),
-                width = _t$state$gis$getSize4[0],
-                height = _t$state$gis$getSize4[1];
-
+              _t$state$gis$getSize4 = _slicedToArray(_t$state$gis$getSize3, 2),
+              width = _t$state$gis$getSize4[0],
+              height = _t$state$gis$getSize4[1];
             var options = {
               size: ds.size,
               shape: ds.shape,
@@ -2069,8 +1848,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           }
         });
       });
-    } //删除海量点
-
+    }
+    //删除海量点
   }, {
     key: "clearPointCollection",
     value: function clearPointCollection() {
@@ -2083,8 +1862,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           }
         });
       });
-    } //删除全部海量点
+    }
 
+    //删除全部海量点
   }, {
     key: "clearAllPointCollection",
     value: function clearAllPointCollection() {
@@ -2092,26 +1872,24 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       t.morepoints.map(function (item, index) {
         item.value.clear();
       });
-    } // 框选
-
+    }
+    // 框选
   }, {
     key: "frameSelect",
     value: function frameSelect(_ref2, callback) {
       var geometryType = _ref2.geometryType,
-          _ref2$parameter = _ref2.parameter,
-          parameter = _ref2$parameter === void 0 ? {} : _ref2$parameter,
-          _ref2$data = _ref2.data,
-          data = _ref2$data === void 0 ? {} : _ref2$data;
-
+        _ref2$parameter = _ref2.parameter,
+        parameter = _ref2$parameter === void 0 ? {} : _ref2$parameter,
+        _ref2$data = _ref2.data,
+        data = _ref2$data === void 0 ? {} : _ref2$data;
       if (!['polygon', 'circle', 'rectangle'].includes(geometryType)) {
         message.warn("传入的类型不支持框选！");
         return false;
       }
-
       var t = this;
       var params = {},
-          type = geometryType || 'polygon',
-          id = data.id || "frameSelectFeature_".concat(Math.random());
+        type = geometryType || 'polygon',
+        id = data.id || "frameSelectFeature_".concat(Math.random());
       params.color = parameter.color || '#FF0000';
       params.lineColor = parameter.lineColor || '#FF0000';
       params.lineOpacity = parameter.lineOpacity || 1;
@@ -2130,18 +1908,17 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         id: id,
         type: geometryType
       };
-    } // 清除框选
-
+    }
+    // 清除框选
   }, {
     key: "clearFrameSelect",
     value: function clearFrameSelect() {
       for (var key in this.frameSelectProps) {
         this.removeGraphic(this.frameSelectProps[key].id, this.frameSelectProps[key].type);
       }
-
       this.frameSelectProps = {};
-    } // 清除框选ById
-
+    }
+    // 清除框选ById
   }, {
     key: "clearFrameSelectById",
     value: function clearFrameSelectById(id) {
@@ -2156,17 +1933,14 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
     * @content: String|HTML
     * @close: boolean
     */
-
   }, {
     key: "showInfoWindow",
     value: function showInfoWindow() {
       var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var t = this;
-
       if (t.popupWindow) {
         t.hideInfoWindow();
       }
-
       t.popupWindow = new Popup({
         map: t.state.gis,
         position: params.position,
@@ -2179,38 +1953,31 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
     key: "hideInfoWindow",
     value: function hideInfoWindow() {
       var t = this;
-
       if (t.popupWindow) {
         t.popupWindow.removePopup();
       }
-
       t.popupWindow = null;
-    } // 添加点
-
+    }
+    // 添加点
   }, {
     key: "addPoint",
     value: function addPoint(mapPoints, type) {
-      var _this2 = this;
-
+      var _this3 = this;
       var t = this;
       var ps = [];
-
       var psids = _toConsumableArray(t.state.pointIds);
-
       mapPoints.map(function (item, index) {
         //如果id重复,直接跳过不执行.
-        if (_this2.GM.isRepetition(item.id)) {
+        if (_this3.GM.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 feature = new ol.Feature({
           geometry: new ol.geom.Point([parseFloat(item.longitude), parseFloat(item.latitude)]),
           name: item.name,
@@ -2228,25 +1995,23 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           zIndex: 100,
           deg: 0,
           scale: 1
-        }; //初始化默认数据
-
+        };
+        //初始化默认数据
         if (item.config) {
           cg = _objectSpread(_objectSpread({}, cg), item.config);
-        } // 覆盖物样式参数
-
-
+        }
+        // 覆盖物样式参数
         var style, icon, txt;
         var myImage = new Image(cg.width, cg.height);
-
         if (!!item.markerContent) {
-          var nodes = t.parseDom(item.markerContent)[0]; // 自定义图层需要把事件加在dom上
-
+          var nodes = t.parseDom(item.markerContent)[0];
+          // 自定义图层需要把事件加在dom上
           nodes.addEventListener("click", function (e) {
             t.clickGraphic(item.id, _objectSpread(_objectSpread({}, e), {}, {
               pixel: [e.clientX, e.clientY]
             }));
-          }); // 创建地图自定义覆盖物
-
+          });
+          // 创建地图自定义覆盖物
           var pop = new ol.Overlay({
             id: item.id,
             position: [parseFloat(item.longitude), parseFloat(item.latitude)],
@@ -2265,8 +2030,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             height: cg.height
           }, function (base64) {
             myImage.src = base64;
-          }); // 创建地图要素图标样式
-
+          });
+          // 创建地图要素图标样式
           style = new ol.style.Style({
             image: new ol.style.Icon({
               anchor: [-cg.markerContentX, -cg.markerContentY],
@@ -2279,7 +2044,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             })
           });
         }
-
         if (!!item.canShowLabel && item.canShowLabel) {
           var textStyle = _objectSpread({
             textAlign: 'center',
@@ -2304,20 +2068,17 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             }),
             padding: [2, 5, 2, 5]
           }, cg.labelStyle || {});
-
           if (cg.labelStyle && cg.labelStyle.fill) {
             textStyle['fill'] = new ol.style.Fill({
               color: cg.labelStyle.fill
             });
           }
-
           if (cg.labelStyle && cg.labelStyle.backgroundFill) {
             textStyle['backgroundFill'] = new ol.style.Fill({
               color: cg.labelStyle.backgroundFill
             });
-          } // 创建地图要素图标样式
-
-
+          }
+          // 创建地图要素图标样式
           style = new ol.style.Style({
             image: new ol.style.Icon({
               anchor: [-cg.markerContentX, -cg.markerContentY],
@@ -2333,9 +2094,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             text: new ol.style.Text(textStyle)
           });
         }
-
-        feature.setStyle(style); // 初始化适量数据源
-
+        feature.setStyle(style);
+        // 初始化适量数据源
         var source = new ol.source.Vector({
           features: [feature],
           name: 'point',
@@ -2349,19 +2109,17 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         t.pointLayers.push({
           id: item.id,
           layer: pointLayer
-        }); //添加点位图层
-
+        });
+        //添加点位图层
         t.state.gis.addLayer(pointLayer);
-
         if (!item.markerContent && cg.BAnimationType == 0) {
           marker.setAnimation(BMAP_ANIMATION_BOUNCE);
         } else if (!item.markerContent && cg.BAnimationType == 1) {
           marker.setAnimation(BMAP_ANIMATION_DROP);
         }
-
-        psids.push(item.id); //缓存图元的数据,偏于后期操作
-
-        _this2.GM.setGraphic(item.id, feature).setGraphicParam(item.id, {
+        psids.push(item.id);
+        //缓存图元的数据,偏于后期操作
+        _this3.GM.setGraphic(item.id, feature).setGraphicParam(item.id, {
           attributes: _objectSpread(_objectSpread({}, item), {}, {
             other: item
           }),
@@ -2374,32 +2132,28 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           source: source
         });
       });
-
       if (type !== 'defined') {
         // t.state.pointIds = psids;
         t.setState({
           pointIds: psids
         });
       }
-    } //更新点
-
+    }
+    //更新点
   }, {
     key: "updatePoint",
     value: function updatePoint() {
-      var _this3 = this;
-
+      var _this4 = this;
       var mapPoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       var t = this;
       var index = 0;
-
       var dealPoint = function dealPoint(item) {
-        if (_this3.GM.isRepetition(item.id)) {
+        if (_this4.GM.isRepetition(item.id)) {
           //点位数据不符合,直接跳过
           if (!item.longitude || !item.latitude) {
             console.warn("\u70B9 \u7ECF\u7EAC\u5EA6 \u6570\u636E\u9519\u8BEF");
             return false;
           }
-
           var gc = t.GM.getGraphic(item.id);
           var gp = t.GM.getGraphicParam(item.id);
           var cg = {
@@ -2414,15 +2168,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             markerContentY: -30,
             deg: 0
           };
-
           if (item.config) {
             cg = _objectSpread(_objectSpread({}, cg), item.config);
           }
-
           var text, icon, _marker;
-
           var myImage = new Image(cg.width, cg.height);
-
           if (item.markerContent) {
             var overlay = t.state.gis.getOverlayById(item.id);
             var nodes = t.parseDom(item.markerContent)[0];
@@ -2452,7 +2202,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               scale: cg.scale || 1,
               rotation: Math.PI / 180 * cg.deg
             });
-
             if (item.canShowLabel) {
               var textStyle = _objectSpread({
                 textAlign: 'center',
@@ -2477,22 +2226,18 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
                 }),
                 padding: [2, 5, 2, 5]
               }, cg.labelStyle || {});
-
               if (cg.labelStyle && cg.labelStyle.fill) {
                 textStyle['fill'] = new ol.style.Fill({
                   color: cg.labelStyle.fill
                 });
               }
-
               if (cg.labelStyle && cg.labelStyle.backgroundFill) {
                 textStyle['backgroundFill'] = new ol.style.Fill({
                   color: cg.labelStyle.backgroundFill
                 });
               }
-
               text = new ol.style.Text(textStyle);
             }
-
             if (text) {
               gc.setStyle(new ol.style.Style({
                 image: icon,
@@ -2504,10 +2249,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               }));
             }
           }
-
           gc.setGeometry(new ol.geom.Point([parseFloat(item.longitude), parseFloat(item.latitude)]));
-
-          _this3.GM.setGraphicParam(item.id, {
+          _this4.GM.setGraphicParam(item.id, {
             attributes: _objectSpread(_objectSpread({}, item), {}, {
               other: item
             }),
@@ -2523,7 +2266,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           console.warn("\u66F4\u65B0\u7684\u70B9\u4F4Did\u4E0D\u5B58\u5728!");
           return false;
         }
-
         if (index < mapPoints.length - 1) {
           requestIdleCallback(function () {
             return dealPoint(mapPoints[++index]);
@@ -2532,14 +2274,13 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           t.refresh();
         }
       };
-
       if (!(0, _lodash.isEmpty)(mapPoints)) {
         requestIdleCallback(function () {
           return dealPoint(mapPoints[index]);
         });
       }
-    } // 更新图层
-
+    }
+    // 更新图层
   }, {
     key: "refresh",
     value: function refresh() {
@@ -2548,32 +2289,27 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         clearTimeout(timer);
         window.VtxMap[t.props.mapId].redrawText();
       }, 100);
-    } // 添加先
-
+    }
+    // 添加先
   }, {
     key: "addLine",
     value: function addLine(mapLines, type) {
-      var _this4 = this;
-
+      var _this5 = this;
       var t = this;
       var ls = [];
-
-      var lsids = _toConsumableArray(t.state.lineIds); //遍历添加线(图元)
-
-
+      var lsids = _toConsumableArray(t.state.lineIds);
+      //遍历添加线(图元)
       mapLines.map(function (item, index) {
         //如果id重复,直接跳过不执行.
-        if (_this4.GM.isRepetition(item.id)) {
+        if (_this5.GM.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,
@@ -2581,11 +2317,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           lineType: 'solid',
           isHidden: false
         };
-
         if (item.config) {
           cg = _objectSpread(_objectSpread({}, cg), item.config);
         }
-
         var style = new ol.style.Style({
           stroke: new ol.style.Stroke({
             color: cg.color,
@@ -2609,13 +2343,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           id: item.id,
           source: source
         });
-        t.state.gis.addLayer(lineLayer); //缓存图元的数据,便于后期操作
-
+        t.state.gis.addLayer(lineLayer);
+        //缓存图元的数据,便于后期操作
         var pts = item.paths.map(function (itt, ind) {
           return _toConsumableArray(itt);
         });
-
-        _this4.GM.setGraphic(item.id, polyline).setGraphicParam(item.id, {
+        _this5.GM.setGraphic(item.id, polyline).setGraphicParam(item.id, {
           attributes: _objectSpread(_objectSpread({}, item), {}, {
             paths: pts,
             other: item
@@ -2627,34 +2360,30 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           },
           source: source
         });
-
         ls.push(polyline);
         lsids.push(item.id);
         t.state.lineIds.push(item.id);
       });
-
       if (type !== 'defined') {
         t.state.lineIds = lsids;
       }
-    } //更新线
-
+    }
+    //更新线
   }, {
     key: "updateLine",
     value: function updateLine(mapLines) {
-      var _this5 = this;
-
-      var t = this; //遍历添加线(图元)
-
+      var _this6 = this;
+      var t = this;
+      //遍历添加线(图元)
       mapLines.map(function (item, index) {
         //判断图元是否存在.
-        if (_this5.GM.isRepetition(item.id)) {
+        if (_this6.GM.isRepetition(item.id)) {
           //多折线点位数据不符合,直接跳过
           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,
@@ -2662,17 +2391,14 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             lineType: 'solid',
             //'solid'  'dashed'
             isHidden: false
-          }; //获取原有的图元
-
-          var gc = _this5.GM.getGraphic(item.id);
-
-          var gp = _this5.GM.getGraphicParam(item.id); //重新初始化值
-
-
+          };
+          //获取原有的图元
+          var gc = _this6.GM.getGraphic(item.id);
+          var gp = _this6.GM.getGraphicParam(item.id);
+          //重新初始化值
           if (item.config) {
             cg = _objectSpread(_objectSpread({}, cg), item.config);
           }
-
           var pts = item.paths.map(function (itt, ind) {
             return _toConsumableArray(itt);
           });
@@ -2688,8 +2414,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             return style;
           });
           gc.setGeometry(new ol.geom.LineString(pts));
-
-          _this5.GM.setGraphicParam(item.id, {
+          _this6.GM.setGraphicParam(item.id, {
             attributes: _objectSpread(_objectSpread({}, item), {}, {
               paths: pts,
               other: item
@@ -2706,32 +2431,27 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           return false;
         }
       });
-    } //添加面
-
+    }
+    //添加面
   }, {
     key: "addPolygon",
     value: function addPolygon(mapPolygons) {
-      var _this6 = this;
-
+      var _this7 = this;
       var t = this;
       var pgs = [];
-
-      var pgsids = _toConsumableArray(t.state.polygonIds); //遍历添加面(图元)
-
-
+      var pgsids = _toConsumableArray(t.state.polygonIds);
+      //遍历添加面(图元)
       mapPolygons.map(function (item, index) {
         //如果id重复,直接跳过不执行.
-        if (_this6.GM.isRepetition(item.id)) {
+        if (_this7.GM.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,
@@ -2740,11 +2460,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           color: '#fff',
           pellucidity: 0.5
         };
-
         if (item.config) {
           cg = _objectSpread(_objectSpread({}, cg), item.config);
         }
-
         var style = new ol.style.Style({
           stroke: new ol.style.Stroke({
             color: cg.lineColor,
@@ -2771,13 +2489,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           id: item.id,
           source: source
         });
-        t.state.gis.addLayer(polygonLayer); //缓存图元的数据,便于后期操作
-
+        t.state.gis.addLayer(polygonLayer);
+        //缓存图元的数据,便于后期操作
         var pts = item.rings.map(function (itt, ind) {
           return _toConsumableArray(itt);
         });
-
-        _this6.GM.setGraphic(item.id, polygon).setGraphicParam(item.id, {
+        _this7.GM.setGraphic(item.id, polygon).setGraphicParam(item.id, {
           attributes: _objectSpread(_objectSpread({}, item), {}, {
             rings: pts,
             other: item
@@ -2789,33 +2506,29 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           },
           source: source
         });
-
         pgs.push(polygon);
         pgsids.push(item.id);
       });
       t.state.polygonIds = pgsids;
-    } //更新面
-
+    }
+    //更新面
   }, {
     key: "updatePolygon",
     value: function updatePolygon(mapPolygons) {
-      var _this7 = this;
-
+      var _this8 = this;
       var t = this;
       mapPolygons.map(function (item, index) {
         //判断图元是否存在.
-        if (_this7.GM.isRepetition(item.id)) {
+        if (_this8.GM.isRepetition(item.id)) {
           //多边形点位数据不符合,直接跳过
           if (!(item.rings && item.rings.length >= 3)) {
             console.warn("\u591A\u8FB9\u5F62rings\u6570\u636E\u9519\u8BEF");
             return false;
-          } //获取原有的图元
-
-
-          var gc = _this7.GM.getGraphic(item.id);
-
-          var gp = t.GM.getGraphicParam(item.id); //获取原有的面属性,转换key值
-
+          }
+          //获取原有的图元
+          var gc = _this8.GM.getGraphic(item.id);
+          var gp = t.GM.getGraphicParam(item.id);
+          //获取原有的面属性,转换key值
           var cg = {
             lineType: 'solid',
             lineWidth: 5,
@@ -2823,12 +2536,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             lineOpacity: 1,
             color: '#fff',
             pellucidity: 0.5
-          }; //重新初始化值
-
+          };
+          //重新初始化值
           if (item.config) {
             cg = _objectSpread(_objectSpread({}, cg), item.config);
           }
-
           var pts = item.rings.map(function (itt, ind) {
             return _toConsumableArray(itt);
           });
@@ -2843,8 +2555,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               color: cg.pellucidity ? getRgbColor(cg.color, cg.pellucidity) : cg.color
             })
           }));
-
-          _this7.GM.setGraphicParam(item.id, {
+          _this8.GM.setGraphicParam(item.id, {
             attributes: _objectSpread(_objectSpread({}, item), {}, {
               rings: pts,
               other: item
@@ -2861,46 +2572,39 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           return false;
         }
       });
-    } //添加圆  circle
-
+    }
+    //添加圆  circle
   }, {
     key: "addCircle",
     value: function addCircle(mapCircles, type) {
       var t = this;
-
       var ccsids = _toConsumableArray(t.state.circleIds);
-
       if (type) {
         ccsids = _toConsumableArray(t.state.drawIds[type]);
       }
-
       mapCircles.map(function (item, index) {
         //如果id重复,直接跳过不执行.
         if (t.GM.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 // isHidden: false  //后期需要在加
-
+          pellucidity: 0.5
+          // isHidden: false  //后期需要在加
         };
-
         if (item.config) {
           cg = _objectSpread(_objectSpread({}, cg), item.config);
         }
-
         var style = new ol.style.Style({
           stroke: new ol.style.Stroke({
             color: cg.lineColor,
@@ -2945,15 +2649,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           },
           source: source
         });
-      }); //添加绘制点
-
+      });
+      //添加绘制点
       if (type) {
         t.state.drawIds = _objectSpread(_objectSpread({}, t.state.drawIds), {}, _defineProperty({}, type, ccsids));
       } else {
         t.state.circleIds = ccsids;
       }
-    } //更新圆
-
+    }
+    //更新圆
   }, {
     key: "updateCircle",
     value: function updateCircle(mapCircles) {
@@ -2969,26 +2673,23 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         } else {
           console.warn("\u66F4\u65B0\u7684\u5706id\u4E0D\u5B58\u5728!");
           return false;
-        } //获取原有的图元
-
-
+        }
+        //获取原有的图元
         var gc = t.GM.getGraphic(item.id);
-        var gp = t.GM.getGraphicParam(item.id); //获取原有的面属性,转换key值
-
+        var gp = t.GM.getGraphicParam(item.id);
+        //获取原有的面属性,转换key值
         var cg = {
           lineType: 'solid',
           lineWidth: 5,
           lineColor: '#277ffa',
           lineOpacity: 1,
           color: '#fff',
-          pellucidity: 0.5 // isHidden: false  //后期需要在加
-
+          pellucidity: 0.5
+          // isHidden: false  //后期需要在加
         };
-
         if (item.config) {
           cg = _objectSpread(_objectSpread({}, cg), item.config);
         }
-
         var metersPerUnit = t.state.gis.getView().getProjection().getMetersPerUnit();
         var circleRadius = item.radius / metersPerUnit;
         gc.setGeometry(new ol.geom.Circle([item.longitude, item.latitude], parseFloat(circleRadius)));
@@ -3015,126 +2716,106 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           },
           source: gp.source
         });
-      }); //刷新图元
-    } // 工具方法
+      });
+      //刷新图元
+    }
+    // 工具方法
     //删除图元
-
   }, {
     key: "removeGraphic",
     value: function removeGraphic(id, type) {
       var t = this;
       var graphic = t.GM.getGraphic(id);
-      var gp = t.GM.getGraphicParam(id); //刪除label
-
+      var gp = t.GM.getGraphicParam(id);
+      //刪除label
       if (t.Label[id]) {
         t.Label[id].html.remove();
         delete t.Label[id];
       }
-
       if (!!graphic) {
         //清除聚合点 避免异常
         // t._cluster.removeMarker(this.GM.getGraphic(id));
         //清除地图中图元
         // const layers = t.state.gis.getLayers().getArray();
         // const layer = layers.filter(item => item.getProperties().name == type)[0];
-        gp.source.removeFeature(graphic); // layer && layer.getSource().removeFeature(graphic);
+        gp.source.removeFeature(graphic);
+        // layer && layer.getSource().removeFeature(graphic);
         //清除对应id的图元数据缓存
-
         t.GM.removeGraphic(id);
         t.GM.removeGraphicParam(id);
-
         if (t.state.gis.getOverlayById(id)) {
           t.state.gis.removeOverlay(t.state.gis.getOverlayById(id));
         }
       } else {
         return false;
       }
-
       for (var i = 0; i < t.movePoints.length; i++) {
         if (t.movePoints[i].id == id) {
           t.movePoints.splice(i, 1);
           continue;
         }
       }
-
       var ids = [];
-
       switch (type) {
         case 'point':
           ids = t.state.pointIds;
           break;
-
         case 'line':
           ids = t.state.lineIds;
           break;
-
         case 'polygon':
           ids = t.state.polygonIds;
           break;
-
         case 'circle':
           ids = t.state.circleIds;
           break;
-
         case 'draw':
           if (t.state.drawIds.point.indexOf(id) > -1) {
             t.state.drawIds.point.splice(t.state.drawIds.point.indexOf(id), 1);
           }
-
           if (t.state.drawIds.polyline.indexOf(id) > -1) {
             t.state.drawIds.polyline.splice(t.state.drawIds.polyline.indexOf(id), 1);
           }
-
           if (t.state.drawIds.polygon.indexOf(id) > -1) {
             t.state.drawIds.polygon.splice(t.state.drawIds.polygon.indexOf(id), 1);
           }
-
           if (t.state.drawIds.circle.indexOf(id) > -1) {
             t.state.drawIds.circle.splice(t.state.drawIds.circle.indexOf(id), 1);
           }
-
           if (t.state.drawIds.rectangle.indexOf(id) > -1) {
             t.state.drawIds.rectangle.splice(t.state.drawIds.rectangle.indexOf(id), 1);
           }
-
           break;
-
         default:
           if (t.state.pointIds.indexOf(id) > -1) {
             t.state.pointIds.splice(t.state.pointIds.indexOf(id), 1);
           }
-
           if (t.state.lineIds.indexOf(id) > -1) {
             t.state.lineIds.splice(t.state.lineIds.indexOf(id), 1);
           }
-
           if (t.state.polygonIds.indexOf(id) > -1) {
             t.state.polygonIds.splice(t.state.polygonIds.indexOf(id), 1);
           }
-
           if (t.state.circleIds.indexOf(id) > -1) {
             t.state.circleIds.splice(t.state.circleIds.indexOf(id), 1);
           }
-
           break;
       }
-
       if (id == t.state.editId) {
         t.state.editId = '';
       }
-
       if (ids.indexOf(id) != -1) {
         ids.splice(ids.indexOf(id), 1);
       }
-    } //清空地图
-
+    }
+    //清空地图
   }, {
     key: "clearAll",
     value: function clearAll() {
       var t = this;
       var gis = t.state.gis;
-      var layers = gis.getLayers(); //清空热力图
-
+      var layers = gis.getLayers();
+      //清空热力图
       if (t.heatmap) {
         var hMap = layers.filter(function (item) {
           return item.name == 'heatMap';
@@ -3142,7 +2823,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         hMap.getSource().clear();
         gis.removeLayer(layer);
       }
-
       t.heatmap = null;
       t.movePoints = [];
       t.state.pointIds = [];
@@ -3152,7 +2832,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       });
       t.clearAllPointCollection();
       t.closeDraw();
-
       if (t.clusterInfo.clusterHulls || t.clusterInfo.clusters || t.clusterInfo.clusterCircles) {
         t.clusterHulls.getSource().clear();
         t.clusterInfo.clusterSource = null;
@@ -3162,82 +2841,69 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         t.clusterInfo.clusterHulls = null;
         t.clusterInfo.clusters = null;
         t.clusterInfo.clusterCircles = null;
-      } //清空缓存数据
-
-
-      t.GM.clearAll(); //循环所有id删除
-
+      }
+      //清空缓存数据
+      t.GM.clearAll();
+      //循环所有id删除
       var _t$state = t.state,
-          pointIds = _t$state.pointIds,
-          lineIds = _t$state.lineIds,
-          polygonIds = _t$state.polygonIds,
-          circleIds = _t$state.circleIds,
-          drawIds = _t$state.drawIds; //拷贝数组,避免原数组操作,影响循环
-
+        pointIds = _t$state.pointIds,
+        lineIds = _t$state.lineIds,
+        polygonIds = _t$state.polygonIds,
+        circleIds = _t$state.circleIds,
+        drawIds = _t$state.drawIds;
+      //拷贝数组,避免原数组操作,影响循环
       var ps = _toConsumableArray(pointIds),
-          ls = _toConsumableArray(lineIds),
-          pgs = _toConsumableArray(polygonIds),
-          cs = _toConsumableArray(circleIds); // 删除点
-
-
+        ls = _toConsumableArray(lineIds),
+        pgs = _toConsumableArray(polygonIds),
+        cs = _toConsumableArray(circleIds);
+      // 删除点
       for (var i = 0; i < ps.length; i++) {
         t.removeGraphic(ps[i], 'point');
-      } // 删除线
-
-
-      for (var _i2 = 0; _i2 < ls.length; _i2++) {
-        t.removeGraphic(ls[_i2], 'line');
-      } // 删除面
-
-
-      for (var _i3 = 0; _i3 < pgs.length; _i3++) {
-        t.removeGraphic(pgs[_i3], 'polygon');
-      } // 删除圆
-
-
-      for (var _i4 = 0; _i4 < cs.length; _i4++) {
-        t.removeGraphic(cs[_i4], 'circle');
-      } //删除绘制的点
-
-
+      }
+      // 删除线
+      for (var _i = 0; _i < ls.length; _i++) {
+        t.removeGraphic(ls[_i], 'line');
+      }
+      // 删除面
+      for (var _i2 = 0; _i2 < pgs.length; _i2++) {
+        t.removeGraphic(pgs[_i2], 'polygon');
+      }
+      // 删除圆
+      for (var _i3 = 0; _i3 < cs.length; _i3++) {
+        t.removeGraphic(cs[_i3], 'circle');
+      }
+      //删除绘制的点
       var point = drawIds.point,
-          polyline = drawIds.polyline,
-          polygon = drawIds.polygon,
-          circle = drawIds.circle,
-          rectangle = drawIds.rectangle;
-
-      for (var i = 0; i < point.length; i++) {
-        t.removeGraphic(point[i]);
+        polyline = drawIds.polyline,
+        polygon = drawIds.polygon,
+        circle = drawIds.circle,
+        rectangle = drawIds.rectangle;
+      for (var _i4 = 0; _i4 < point.length; _i4++) {
+        t.removeGraphic(point[_i4]);
       }
-
       for (var _i5 = 0; _i5 < polyline.length; _i5++) {
         t.removeGraphic(polyline[_i5]);
       }
-
       for (var _i6 = 0; _i6 < polygon.length; _i6++) {
         t.removeGraphic(polygon[_i6]);
       }
-
       for (var _i7 = 0; _i7 < circle.length; _i7++) {
         t.removeGraphic(circle[_i7]);
       }
-
       for (var _i8 = 0; _i8 < rectangle.length; _i8++) {
         t.removeGraphic(rectangle[_i8]);
       }
-    } //展示比例尺
-
+    }
+    //展示比例尺
   }, {
     key: "showControl",
     value: function showControl(props) {
       var t = this;
       var gis = t.state.gis;
       var config = props.showControl;
-
       if (t.scaleControl) {
         gis.removeControl(t.scaleControl);
       }
-
       t.scaleControl = new ol.control.ScaleLine({
         units: 'metric',
         //设置度量单位
@@ -3275,65 +2941,61 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           });
         }
       }, 20);
-    } //设置区域限制
-
+    }
+    //设置区域限制
   }, {
     key: "setAreaRestriction",
     value: function setAreaRestriction(areaRestriction) {
       var t = this;
-
       var _t$dealData6 = t.dealData(areaRestriction),
-          _et = _t$dealData6._extent;
-
+        _et = _t$dealData6._extent;
       t.areaRestriction = t.state.gis.getView().setProperties({
         extent: [_et.xmax, _et.ymax, _et.xmin, _et.ymin]
       }, false);
-    } //关闭区域限制
-
+    }
+    //关闭区域限制
   }, {
     key: "clearAreaRestriction",
     value: function clearAreaRestriction() {
       var t = this;
       t.areaRestriction = null;
-    } //区域限制逻辑
-
+    }
+    //区域限制逻辑
   }, {
     key: "dealAreaRestriction",
     value: function dealAreaRestriction(e) {
-      var t = this; //如果在区域内,不处理
-
+      var t = this;
+      //如果在区域内,不处理
       if (t.areaRestriction.contains(e.extent.getCenter())) {
         return;
-      } // if(t.containsExtent(t.areaRestriction,e.extent)){
+      }
+      // if(t.containsExtent(t.areaRestriction,e.extent)){
       //    return;
       // }
-
-
       var _t$areaRestriction = t.areaRestriction,
-          xmin1 = _t$areaRestriction.xmin,
-          xmax1 = _t$areaRestriction.xmax,
-          ymin1 = _t$areaRestriction.ymin,
-          ymax1 = _t$areaRestriction.ymax;
+        xmin1 = _t$areaRestriction.xmin,
+        xmax1 = _t$areaRestriction.xmax,
+        ymin1 = _t$areaRestriction.ymin,
+        ymax1 = _t$areaRestriction.ymax;
       var _e$extent = e.extent,
-          xmin2 = _e$extent.xmin,
-          xmax2 = _e$extent.xmax,
-          ymin2 = _e$extent.ymin,
-          ymax2 = _e$extent.ymax;
+        xmin2 = _e$extent.xmin,
+        xmax2 = _e$extent.xmax,
+        ymin2 = _e$extent.ymin,
+        ymax2 = _e$extent.ymax;
       var x = e.extent.getCenter().x,
-          y = e.extent.getCenter().y;
+        y = e.extent.getCenter().y;
       if (x < xmin1) x = xmin1 + 0.1;
       if (x > xmax1) x = xmax1 - 0.1;
       if (y < ymin1) y = ymin1 + 0.1;
       if (y > ymax1) y = ymax1 - 0.1;
       t.state.gis.getView().setCenter([x, y]);
-    } //聚合地图图元(arg为空时聚合全部点)
-
+    }
+    //聚合地图图元(arg为空时聚合全部点)
   }, {
     key: "cluster",
     value: function cluster(arg) {
       var t = this;
       var ary = [];
-
       if (!arg) {
         var pointIds = t.state.pointIds;
         ary = pointIds;
@@ -3344,7 +3006,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           ary = arg.split(',');
         }
       }
-
       t.pointLayers.map(function (item) {
         t.state.gis.removeLayer(item.layer);
         t.pointLayers = [];
@@ -3361,7 +3022,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         minDistance: 0,
         source: source
       });
-
       if (t.clusterInfo.clusterHulls) {
         t.clusterInfo.clusterHulls.setSource(t.clusterInfo.clusterSource);
       } else {
@@ -3371,7 +3031,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         });
         t.state.gis.addLayer(t.clusterInfo.clusterHulls);
       }
-
       if (t.clusterInfo.clusters) {
         t.clusterInfo.clusters.setSource(t.clusterInfo.clusterSource);
       } else {
@@ -3381,7 +3040,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         });
         t.state.gis.addLayer(t.clusterInfo.clusters);
       }
-
       if (t.clusterInfo.clusterCircles) {
         t.clusterInfo.clusterCircles.setSource(t.clusterInfo.clusterSource);
       } else {
@@ -3391,7 +3049,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         });
         t.state.gis.addLayer(t.clusterInfo.clusterCircles);
       }
-
       function clusterMemberStyle(clusterMember) {
         var style = clusterMember.getStyle();
         var image = style && style.getImage ? style.getImage() : null;
@@ -3401,12 +3058,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           text: text
         });
       }
-
       function clusterCircleStyle(cluster, resolution) {
         if (cluster !== t.clusterInfo.clickFeature || resolution !== t.clusterInfo.clickResolution) {
           return;
         }
-
         var clusterMembers = cluster.get('features');
         var centerCoordinates = cluster.getGeometry().getCoordinates();
         return generatePointsCircle(clusterMembers.length, cluster.getGeometry().getCoordinates(), resolution).reduce(function (styles, coordinates, i) {
@@ -3425,30 +3080,24 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           return styles;
         }, []);
       }
-
       function generatePointsCircle(count, clusterCenter, resolution) {
         var circumference = 1 * 28 * (2 + count);
         var legLength = circumference / (Math.PI * 2); //radius from circumference
-
         var angleStep = Math.PI * 2 / count;
         var res = [];
         var angle;
         legLength = Math.max(legLength, 35) * resolution; // Minimum distance to get outside the cluster icon.
-
         for (var i = 0; i < count; ++i) {
           // Clockwise, like spiral.
           angle = Math.PI / 2 + i * angleStep;
           res.push([clusterCenter[0] + legLength * Math.cos(angle), clusterCenter[1] + legLength * Math.sin(angle)]);
         }
-
         return res;
       }
-
       function clusterHullStyle(cluster) {
         if (cluster !== t.clusterInfo.hoverFeature) {
           return;
         }
-
         var originalFeatures = cluster.get('features');
         var points = originalFeatures.map(function (feature) {
           return feature.getGeometry().getCoordinates();
@@ -3464,10 +3113,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           })
         });
       }
-
       function clusterStyle(feature) {
         var size = feature.get('features').length;
-
         if (size > 2) {
           return [new ol.style.Style({
             image: new ol.style.Circle({
@@ -3506,27 +3153,22 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
     value: function clearCluster(arg) {
       var t = this;
       var ids = arg && (arg === null || arg === void 0 ? void 0 : arg.length) > 0 ? arg : t.state.pointIds;
-
       if (t.clusterInfo.clusterHulls) {
         t.state.gis.removeLayer(t.clusterInfo.clusterHulls);
         t.clusterInfo.clusterHulls = null;
       }
-
       if (t.clusterInfo.clusters) {
         t.state.gis.removeLayer(t.clusterInfo.clusters);
         t.clusterInfo.clusters = null;
       }
-
       if (t.clusterInfo.clusterCircles) {
         t.state.gis.removeLayer(t.clusterInfo.clusterCircles);
         t.clusterInfo.clusterCircles = null;
       }
-
       ids.map(function (id) {
         if (t.GM.getGraphic(id)) {
           t.GM.removeGraphic(id);
         }
-
         t.state.pointIds.splice(t.state.pointIds.indexOf(id), 1);
       });
       t.addPoint(t.props.mapPoints);
@@ -3534,21 +3176,20 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
     }
     /*公共方法*/
     //判断extent1是否在extent2内部
-
   }, {
     key: "containsExtent",
     value: function containsExtent(e1, e2) {
       var xmin1 = e1.xmin,
-          xmax1 = e1.xmax,
-          ymin1 = e1.ymin,
-          ymax1 = e1.ymax;
+        xmax1 = e1.xmax,
+        ymin1 = e1.ymin,
+        ymax1 = e1.ymax;
       var xmin2 = e2.xmin,
-          xmax2 = e2.xmax,
-          ymin2 = e2.ymin,
-          ymax2 = e2.ymax;
+        xmax2 = e2.xmax,
+        ymin2 = e2.ymin,
+        ymax2 = e2.ymax;
       return xmin2 > xmin1 && xmax2 < xmax1 && ymin2 > ymin1 && ymax2 < ymax1;
-    } //将图元z-index设置成最高
-
+    }
+    //将图元z-index设置成最高
   }, {
     key: "czIndex",
     value: function czIndex(id) {
@@ -3559,8 +3200,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
     key: "equalsPoint",
     value: function equalsPoint(a, b) {
       return a.x == b.x && a.y == b.y;
-    } //计算2点间距离 单位m 精确到2位小数
-
+    }
+    //计算2点间距离 单位m 精确到2位小数
   }, {
     key: "calculatePointsDistance",
     value: function calculatePointsDistance(fp, ep) {
@@ -3568,18 +3209,16 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       var distance = ol.sphere.getDistance(fp, ep);
       console.log(distance);
       return Math.round(distance);
-    } //计算多个点的距离(常用于线计算)
-
+    }
+    //计算多个点的距离(常用于线计算)
   }, {
     key: "calculateDistance",
     value: function calculateDistance(ps) {
       var t = this,
-          totalDistance = 0;
-
+        totalDistance = 0;
       if (ps.length < 0) {
         return 0;
       }
-
       for (var i = 0; i < ps.length; i++) {
         if (i < ps.length - 1) {
           var distance = t.calculatePointsDistance(ps[i], ps[i + 1]);
@@ -3587,43 +3226,37 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           totalDistance += distance;
         }
       }
-
       console.log(totalDistance);
       return Math.round(totalDistance * 100) / 100;
-    } //处理线和面的 经纬度数据
-
+    }
+    //处理线和面的 经纬度数据
   }, {
     key: "dealData",
     value: function dealData(paths) {
       //区别点和圆的经纬度数据处理
       var lnglatAry = [],
-          _extent = {
-        xmax: 0,
-        xmin: 0,
-        ymax: 0,
-        ymin: 0
-      },
-          path = [];
+        _extent = {
+          xmax: 0,
+          xmin: 0,
+          ymax: 0,
+          ymin: 0
+        },
+        path = [];
       path = paths.map(function (item, index) {
         var lng = item[0],
-            lat = item[1];
-
+          lat = item[1];
         if (lng > _extent.xmax) {
           _extent.xmax = lng;
         }
-
         if (lng < _extent.xmin || _extent.xmin == 0) {
           _extent.xmin = lng;
         }
-
         if (lat > _extent.ymax) {
           _extent.ymax = lat;
         }
-
         if (lat < _extent.ymin || _extent.ymin == 0) {
           _extent.ymin = lat;
         }
-
         lnglatAry.push({
           lngX: lng,
           latX: lat
@@ -3635,55 +3268,50 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         _extent: _extent,
         path: path
       };
-    } //处理点位图元的添加 和 更新
-
+    }
+    //处理点位图元的添加 和 更新
   }, {
     key: "dealLabelGraphics",
     value: function dealLabelGraphics(id, label) {
       var t = this;
-
       if (label) {
-        var position = (t.GM.getGraphic(id) || {}).geometry || label.position; //经纬度转top和left
-
+        var position = (t.GM.getGraphic(id) || {}).geometry || label.position;
+        //经纬度转top和left
         var tl = t.state.gis.toScreen(position),
-            lbl = _objectSpread({}, label); //渲染優化
-
-
+          lbl = _objectSpread({}, label);
+        //渲染優化
         if (!(tl.y < -50 || tl.x < -50 || tl.y > t.state.gis.height || tl.x > t.state.gis.width)) {
           //设置label的位置(通过定位来实现)
           label.html.css({
             position: 'absolute',
             top: tl.y + (label.offset.y || 0) - t.labelLayer.y,
             left: tl.x + (label.offset.x || 0) - t.labelLayer.x
-          }); //添加点位到(地图)
-
+          });
+          //添加点位到(地图)
           $("#".concat(t.htmlPointsId)).append(label.html);
           lbl.add = true;
         } else {
           lbl.add = false;
-        } //记录下label的dom对象,用于后期修改和删除(基本是删除)
-
-
+        }
+        //记录下label的dom对象,用于后期修改和删除(基本是删除)
         t.Label[id] = lbl;
       }
-    } //点的跳动动画
-
+    }
+    //点的跳动动画
   }, {
     key: "pointAnimation",
     value: function pointAnimation(id, marker) {
-      var t = this; //null时关闭跳动
-
+      var t = this;
+      //null时关闭跳动
       if (!!marker) {
         if (t.animTimer[id]) {
           clearInterval(t.animTimer[id]);
         }
-
         t.animTimer[id] = setInterval(function () {
           //点被隐藏时,没有执行,定时不关
           if (marker.symbol) {
-            var shape = _objectSpread({}, marker.symbol); //初始数据  点位有变动,重新刷新数据
-
-
+            var shape = _objectSpread({}, marker.symbol);
+            //初始数据  点位有变动,重新刷新数据
             if (!t.animCount[id] || shape.yoffset != t.animCount[id].now) {
               t.animCount[id] = {
                 start: shape.yoffset,
@@ -3691,15 +3319,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
                 notation: -1
               };
             }
-
             if (t.animCount[id].now - t.animCount[id].start == 20) {
               t.animCount[id].notation = -1;
             }
-
             if (t.animCount[id].now - t.animCount[id].start == 0) {
               t.animCount[id].notation = 1;
             }
-
             shape.yoffset = t.animCount[id].now = t.animCount[id].now + t.animCount[id].notation * 2;
             marker.symbol.setOffset(shape.xoffset, shape.yoffset);
             t.state.gis.graphics.refresh();
@@ -3713,107 +3338,93 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
     key: "moveAnimation",
     value: function moveAnimation() {
       var t = this;
-
       if (t.moveToTimer) {
         clearInterval(t.moveToTimer);
       }
-
       t.moveToTimer = setInterval(function () {
         for (var i = 0; i < t.movePoints.length; i++) {
           t.movePoints[i].waitTime += 10;
           t.movePoints[i].deleteTime -= 10;
         }
-
         t.movePoints.sort(function (x, y) {
           return y.waitTime - x.waitTime;
         });
         var nowMovePoints = t.movePoints.slice(0, 10),
-            deleteIndex = [];
-
+          deleteIndex = [];
         for (var _i9 = 0; _i9 < nowMovePoints.length; _i9++) {
           var _nowMovePoints$_i = nowMovePoints[_i9],
-              id = _nowMovePoints$_i.id,
-              rx = _nowMovePoints$_i.rx,
-              ry = _nowMovePoints$_i.ry,
-              waitTime = _nowMovePoints$_i.waitTime,
-              deleteTime = _nowMovePoints$_i.deleteTime,
-              ddeg = _nowMovePoints$_i.ddeg;
+            id = _nowMovePoints$_i.id,
+            rx = _nowMovePoints$_i.rx,
+            ry = _nowMovePoints$_i.ry,
+            waitTime = _nowMovePoints$_i.waitTime,
+            deleteTime = _nowMovePoints$_i.deleteTime,
+            ddeg = _nowMovePoints$_i.ddeg;
           var gc = t.GM.getGraphic(id);
-
           if (!gc || !gc._graphicsLayer) {
             clearInterval(t.moveToTimer);
           } else {
             var gg = gc.getGeometry();
             var tx = gg[0] + rx,
-                ty = gg[1] + ry;
+              ty = gg[1] + ry;
             gc.setGeometry([tx, ty]);
             t.movePoints[_i9].waitTime = 0;
-
             if (deleteTime <= 0) {
               deleteIndex.push(_i9);
             }
           }
         }
-
         deleteIndex.sort(function (a, b) {
           return b - a;
         });
-
         for (var _i10 = 0; _i10 < deleteIndex.length; _i10++) {
           t.movePoints.splice(deleteIndex[_i10], 1);
         }
-
         if (nowMovePoints.length == 0) {
           clearInterval(t.moveToTimer);
         }
       }, 10);
-    } //点位移动动画效果
-
+    }
+    //点位移动动画效果
   }, {
     key: "moveTo",
     value: function moveTo(id, lnglat, delay, autoRotation, urlright, urlleft) {
       delay = delay || 3;
       var t = this,
-          timer = 10;
+        timer = 10;
       delay = eval(delay) * 1000;
       var count = delay / timer,
-          gc = this.GM.getGraphic(id);
+        gc = this.GM.getGraphic(id);
       var s = gc.geometry,
-          e = {
-        x: lnglat[0],
-        y: lnglat[1]
-      };
-
+        e = {
+          x: lnglat[0],
+          y: lnglat[1]
+        };
       if (t.equalsPoint(s, e)) {
         return false;
       } else {
         var ddeg = 0,
-            url = null; //计算角度,旋转
-
+          url = null;
+        //计算角度,旋转
         if (autoRotation) {
           //自己实现旋转
           ddeg = t.rotateDeg(gc.geometry, lnglat);
-
           if (urlleft && ddeg < -90 && ddeg > -270) {
             ddeg += 180;
             url = urlleft;
           } else {
             url = urlright;
           }
-
           gc.setStyle(new ol.style.Style({
             image: new ol.style.Icon({
               src: url,
               rotation: Math.PI / 180 * ddeg
             })
           }));
-        } //拆分延迟移动定位
-
-
+        }
+        //拆分延迟移动定位
         var rx = (e.x - s.x) / count,
-            ry = (e.y - s.y) / count;
+          ry = (e.y - s.y) / count;
         var isHave = false;
-
         for (var i = 0; i < t.movePoints.length; i++) {
           if (t.movePoints[i].id == id) {
             t.movePoints.splice(i, 1, {
@@ -3826,7 +3437,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             isHave = true;
           }
         }
-
         if (!isHave) {
           t.movePoints.push({
             id: id,
@@ -3837,34 +3447,30 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           });
         }
       }
-    } //点位角度旋转(以指向东(右)为0°)
-
+    }
+    //点位角度旋转(以指向东(右)为0°)
   }, {
     key: "rotateDeg",
     value: function rotateDeg(sp, ep) {
       var t = this;
       var spLngLat = sp;
-
       if (Array.isArray(sp)) {
         spLngLat = new ol.geom.Point(sp[0], sp[1]);
       }
-
       var s = t.state.gis.getPixelFromCoordinate(spLngLat),
-          //获取当前点位的经纬度
-      e = t.state.gis.getPixelFromCoordinate(new ol.geom.Point(ep[0], ep[1])),
-          deg = 0;
-
+        //获取当前点位的经纬度
+        e = t.state.gis.getPixelFromCoordinate(new ol.geom.Point(ep[0], ep[1])),
+        deg = 0;
       if (e.x != s.x) {
         var tan = (e.y - s.y) / (e.x - s.x),
-            atan = Math.atan(tan);
-        deg = atan * 360 / (2 * Math.PI); //degree  correction;
-
+          atan = Math.atan(tan);
+        deg = atan * 360 / (2 * Math.PI);
+        //degree  correction;
         if (e.x < s.x) {
           deg = -deg + 90 + 90;
         } else {
           deg = -deg;
         }
-
         deg = -deg;
       } else {
         var disy = e.y - s.y;
@@ -3873,16 +3479,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         if (disy == 0) bias = 0;
         deg = -bias * 90;
       }
-
       return deg;
-    } //对比对象数据是否相等
-
+    }
+    //对比对象数据是否相等
   }, {
     key: "deepEqual",
     value: function deepEqual(a, b) {
       return _immutable["default"].is(_immutable["default"].fromJS(a), _immutable["default"].fromJS(b));
-    } //数据解析(分析,新增,更新,删除对应的数据)
-
+    }
+    //数据解析(分析,新增,更新,删除对应的数据)
   }, {
     key: "dataMatch",
     value: function dataMatch(oldData, newData, type) {
@@ -3913,14 +3518,13 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         updatedData: updatedData,
         replacedData: replacedData
       };
-    } //处理需要增加图元的数据(避免意外问题)
-
+    }
+    //处理需要增加图元的数据(避免意外问题)
   }, {
     key: "dealAdd",
     value: function dealAdd(ary, ids) {
       var ads = [],
-          otherupds = [];
-
+        otherupds = [];
       for (var i = 0; i < ary.length; i++) {
         if (ids.indexOf(ary[i].id) > -1) {
           otherupds.push(ary[i]);
@@ -3928,19 +3532,17 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           ads.push(ary[i]);
         }
       }
-
       return {
         ads: ads,
         otherupds: otherupds
       };
-    } //处理需要更新图元的数据(避免意外问题)
-
+    }
+    //处理需要更新图元的数据(避免意外问题)
   }, {
     key: "dealUpdate",
     value: function dealUpdate(ary, ids) {
       var upds = [],
-          otherads = [];
-
+        otherads = [];
       for (var i = 0; i < ary.length; i++) {
         if (ids.indexOf(ary[i].id) > -1) {
           upds.push(ary[i]);
@@ -3948,7 +3550,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           otherads.push(ary[i]);
         }
       }
-
       return {
         upds: upds,
         otherads: otherads
@@ -3966,8 +3567,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           height: '100%'
         }
       });
-    } //初始化
-
+    }
+    //初始化
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -3975,75 +3576,74 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       t.loadMapComplete.then(function () {
         t.init();
       });
-    } //已加载组件，收到新的参数时调用
-
+    }
+    //已加载组件，收到新的参数时调用
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps, prevProps) {
-      var t = this; //点/线旧数据
-
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps, prevProps) {
+      var t = this;
+      //点/线旧数据
       var _t$state2 = t.state,
-          pointIds = _t$state2.pointIds,
-          lineIds = _t$state2.lineIds,
-          polygonIds = _t$state2.polygonIds,
-          circleIds = _t$state2.circleIds,
-          drawIds = _t$state2.drawIds;
+        pointIds = _t$state2.pointIds,
+        lineIds = _t$state2.lineIds,
+        polygonIds = _t$state2.polygonIds,
+        circleIds = _t$state2.circleIds,
+        drawIds = _t$state2.drawIds;
       var point = drawIds.point,
-          polyline = drawIds.polyline,
-          polygon = drawIds.polygon,
-          circle = drawIds.circle,
-          rectangle = drawIds.rectangle; //点/线新数据
-
+        polyline = drawIds.polyline,
+        polygon = drawIds.polygon,
+        circle = drawIds.circle,
+        rectangle = drawIds.rectangle;
+      //点/线新数据
       var _nextProps$mapPoints = nextProps.mapPoints,
-          mapPoints = _nextProps$mapPoints === void 0 ? [] : _nextProps$mapPoints,
-          _nextProps$mapLines = nextProps.mapLines,
-          mapLines = _nextProps$mapLines === void 0 ? [] : _nextProps$mapLines,
-          _nextProps$mapPolygon = nextProps.mapPolygons,
-          mapPolygons = _nextProps$mapPolygon === void 0 ? [] : _nextProps$mapPolygon,
-          _nextProps$mapCircles = nextProps.mapCircles,
-          mapCircles = _nextProps$mapCircles === void 0 ? [] : _nextProps$mapCircles,
-          _nextProps$customized = nextProps.customizedBoundary,
-          customizedBoundary = _nextProps$customized === void 0 ? [] : _nextProps$customized,
-          isOpenTrafficInfo = nextProps.isOpenTrafficInfo,
-          boundaryName = nextProps.boundaryName,
-          heatMapData = nextProps.heatMapData,
-          mapVisiblePoints = nextProps.mapVisiblePoints,
-          setVisiblePoints = nextProps.setVisiblePoints,
-          setCenter = nextProps.setCenter,
-          mapCenter = nextProps.mapCenter,
-          setZoomLevel = nextProps.setZoomLevel,
-          mapZoomLevel = nextProps.mapZoomLevel,
-          setCluster = nextProps.setCluster,
-          mapCluster = nextProps.mapCluster,
-          isRangingTool = nextProps.isRangingTool,
-          mapRangingTool = nextProps.mapRangingTool,
-          isRemove = nextProps.isRemove,
-          mapRemove = nextProps.mapRemove,
-          mapDraw = nextProps.mapDraw,
-          isDraw = nextProps.isDraw,
-          isCloseDraw = nextProps.isCloseDraw,
-          editGraphicId = nextProps.editGraphicId,
-          isDoEdit = nextProps.isDoEdit,
-          isEndEdit = nextProps.isEndEdit,
-          mapPointCollection = nextProps.mapPointCollection,
-          isclearAllPointCollection = nextProps.isclearAllPointCollection,
-          isSetAreaRestriction = nextProps.isSetAreaRestriction,
-          areaRestriction = nextProps.areaRestriction,
-          isClearAreaRestriction = nextProps.isClearAreaRestriction,
-          isClearAll = nextProps.isClearAll,
-          olProps = nextProps.olProps; // 等待地图加载
-
-      if (!t.state.mapCreated) return;
+        mapPoints = _nextProps$mapPoints === void 0 ? [] : _nextProps$mapPoints,
+        _nextProps$mapLines = nextProps.mapLines,
+        mapLines = _nextProps$mapLines === void 0 ? [] : _nextProps$mapLines,
+        _nextProps$mapPolygon = nextProps.mapPolygons,
+        mapPolygons = _nextProps$mapPolygon === void 0 ? [] : _nextProps$mapPolygon,
+        _nextProps$mapCircles = nextProps.mapCircles,
+        mapCircles = _nextProps$mapCircles === void 0 ? [] : _nextProps$mapCircles,
+        _nextProps$customized = nextProps.customizedBoundary,
+        customizedBoundary = _nextProps$customized === void 0 ? [] : _nextProps$customized,
+        isOpenTrafficInfo = nextProps.isOpenTrafficInfo,
+        boundaryName = nextProps.boundaryName,
+        heatMapData = nextProps.heatMapData,
+        mapVisiblePoints = nextProps.mapVisiblePoints,
+        setVisiblePoints = nextProps.setVisiblePoints,
+        setCenter = nextProps.setCenter,
+        mapCenter = nextProps.mapCenter,
+        setZoomLevel = nextProps.setZoomLevel,
+        mapZoomLevel = nextProps.mapZoomLevel,
+        setCluster = nextProps.setCluster,
+        mapCluster = nextProps.mapCluster,
+        isRangingTool = nextProps.isRangingTool,
+        mapRangingTool = nextProps.mapRangingTool,
+        isRemove = nextProps.isRemove,
+        mapRemove = nextProps.mapRemove,
+        mapDraw = nextProps.mapDraw,
+        isDraw = nextProps.isDraw,
+        isCloseDraw = nextProps.isCloseDraw,
+        editGraphicId = nextProps.editGraphicId,
+        isDoEdit = nextProps.isDoEdit,
+        isEndEdit = nextProps.isEndEdit,
+        mapPointCollection = nextProps.mapPointCollection,
+        isclearAllPointCollection = nextProps.isclearAllPointCollection,
+        isSetAreaRestriction = nextProps.isSetAreaRestriction,
+        areaRestriction = nextProps.areaRestriction,
+        isClearAreaRestriction = nextProps.isClearAreaRestriction,
+        isClearAll = nextProps.isClearAll,
+        olProps = nextProps.olProps;
+      // 等待地图加载
+      if (!t.mapCreated) return;
       /*点数据处理
           pointData[2]相同的点,执行刷新
           pointData[1]的数据在idsForGraphicId中不存在的,执行新增
           pointData[0]数据中多余的id,执行删除
       */
-
       if (mapPoints instanceof Array && t.props.mapPoints instanceof Array && !t.deepEqual(mapPoints, t.props.mapPoints)) {
         var oldMapPoints = t.props.mapPoints;
-        var newMapPoints = mapPoints; //过滤编辑的图元
-
+        var newMapPoints = mapPoints;
+        //过滤编辑的图元
         if (!!t.editId) {
           oldMapPoints = t.props.mapPoints.filter(function (item) {
             return item.id !== editGraphicId;
@@ -4052,52 +3652,41 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             return item.id !== editGraphicId;
           });
         }
-
         var _t$dataMatch = t.dataMatch(oldMapPoints, newMapPoints, 'id'),
-            deletedDataIDs = _t$dataMatch.deletedDataIDs,
-            addedData = _t$dataMatch.addedData,
-            updatedData = _t$dataMatch.updatedData;
-
+          deletedDataIDs = _t$dataMatch.deletedDataIDs,
+          addedData = _t$dataMatch.addedData,
+          updatedData = _t$dataMatch.updatedData;
         var _t$dealAdd = t.dealAdd(addedData, [].concat(_toConsumableArray(pointIds), _toConsumableArray(point))),
-            ads = _t$dealAdd.ads,
-            otherupds = _t$dealAdd.otherupds;
-
+          ads = _t$dealAdd.ads,
+          otherupds = _t$dealAdd.otherupds;
         var _t$dealUpdate = t.dealUpdate(updatedData, [].concat(_toConsumableArray(pointIds), _toConsumableArray(point))),
-            upds = _t$dealUpdate.upds,
-            otherads = _t$dealUpdate.otherads; //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
-
-
+          upds = _t$dealUpdate.upds,
+          otherads = _t$dealUpdate.otherads;
+        //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
         var index = 0;
-
         var removeGraphic = function removeGraphic(id) {
           t.removeGraphic(id, 'point');
-
           if (index < deletedDataIDs.length - 1) {
             requestIdleCallback(function () {
               return removeGraphic(deletedDataIDs[++index]);
             });
           }
         };
-
         if (!(0, _lodash.isEmpty)(deletedDataIDs)) {
           removeGraphic(deletedDataIDs[index]);
-        } //增加
-
-
-        t.addPoint([].concat(_toConsumableArray(ads), _toConsumableArray(otherads))); //更新
-
+        }
+        //增加
+        t.addPoint([].concat(_toConsumableArray(ads), _toConsumableArray(otherads)));
+        //更新
         t.updatePoint([].concat(_toConsumableArray(upds), _toConsumableArray(otherupds)));
       }
       /*
           线数据处理
           先全删除,再新增
       */
-
-
       if (mapLines instanceof Array && t.props.mapLines instanceof Array && !t.deepEqual(mapLines, t.props.mapLines)) {
         var oldMapLines = t.props.mapLines;
         var newMapLines = mapLines;
-
         if (!!t.editId) {
           oldMapLines = t.props.mapLines.filter(function (item) {
             return item.id !== editGraphicId;
@@ -4106,50 +3695,41 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             return item.id !== editGraphicId;
           });
         }
-
         var _t$dataMatch2 = t.dataMatch(oldMapLines, newMapLines, 'id'),
-            _deletedDataIDs = _t$dataMatch2.deletedDataIDs,
-            _addedData = _t$dataMatch2.addedData,
-            _updatedData = _t$dataMatch2.updatedData;
-
+          _deletedDataIDs = _t$dataMatch2.deletedDataIDs,
+          _addedData = _t$dataMatch2.addedData,
+          _updatedData = _t$dataMatch2.updatedData;
         var _t$dealAdd2 = t.dealAdd(_addedData, [].concat(_toConsumableArray(lineIds), _toConsumableArray(polyline))),
-            _ads = _t$dealAdd2.ads,
-            _otherupds = _t$dealAdd2.otherupds;
-
+          _ads = _t$dealAdd2.ads,
+          _otherupds = _t$dealAdd2.otherupds;
         var _t$dealUpdate2 = t.dealUpdate(_updatedData, [].concat(_toConsumableArray(lineIds), _toConsumableArray(polyline))),
-            _upds = _t$dealUpdate2.upds,
-            _otherads = _t$dealUpdate2.otherads; //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
-
-
+          _upds = _t$dealUpdate2.upds,
+          _otherads = _t$dealUpdate2.otherads;
+        //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
         var _iterator = _createForOfIteratorHelper(_deletedDataIDs),
-            _step;
-
+          _step;
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var id = _step.value;
             t.removeGraphic(id, 'line');
-          } //增加
-
+          }
+          //增加
         } catch (err) {
           _iterator.e(err);
         } finally {
           _iterator.f();
         }
-
-        t.addLine([].concat(_toConsumableArray(_ads), _toConsumableArray(_otherads))); //更新
-
+        t.addLine([].concat(_toConsumableArray(_ads), _toConsumableArray(_otherads)));
+        //更新
         t.updateLine([].concat(_toConsumableArray(_upds), _toConsumableArray(_otherupds)));
       }
       /*
           面数据处理
           先全删除,再新增
       */
-
-
       if (mapPolygons instanceof Array && t.props.mapPolygons instanceof Array && !t.deepEqual(mapPolygons, t.props.mapPolygons)) {
         var oldMapPolygons = t.props.mapPolygons;
         var newMapPolygons = mapPolygons;
-
         if (!!t.editId) {
           oldMapPolygons = t.props.mapPolygons.filter(function (item) {
             return item.id !== editGraphicId;
@@ -4158,50 +3738,41 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             return item.id !== editGraphicId;
           });
         }
-
         var _t$dataMatch3 = t.dataMatch(oldMapPolygons, newMapPolygons, 'id'),
-            _deletedDataIDs2 = _t$dataMatch3.deletedDataIDs,
-            _addedData2 = _t$dataMatch3.addedData,
-            _updatedData2 = _t$dataMatch3.updatedData;
-
+          _deletedDataIDs2 = _t$dataMatch3.deletedDataIDs,
+          _addedData2 = _t$dataMatch3.addedData,
+          _updatedData2 = _t$dataMatch3.updatedData;
         var _t$dealAdd3 = t.dealAdd(_addedData2, [].concat(_toConsumableArray(rectangle), _toConsumableArray(polygon), _toConsumableArray(polygonIds))),
-            _ads2 = _t$dealAdd3.ads,
-            _otherupds2 = _t$dealAdd3.otherupds;
-
+          _ads2 = _t$dealAdd3.ads,
+          _otherupds2 = _t$dealAdd3.otherupds;
         var _t$dealUpdate3 = t.dealUpdate(_updatedData2, [].concat(_toConsumableArray(rectangle), _toConsumableArray(polygon), _toConsumableArray(polygonIds))),
-            _upds2 = _t$dealUpdate3.upds,
-            _otherads2 = _t$dealUpdate3.otherads; //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
-
-
+          _upds2 = _t$dealUpdate3.upds,
+          _otherads2 = _t$dealUpdate3.otherads;
+        //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
         var _iterator2 = _createForOfIteratorHelper(_deletedDataIDs2),
-            _step2;
-
+          _step2;
         try {
           for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
             var _id = _step2.value;
             t.removeGraphic(_id, 'polygon');
-          } //增加
-
+          }
+          //增加
         } catch (err) {
           _iterator2.e(err);
         } finally {
           _iterator2.f();
         }
-
-        t.addPolygon([].concat(_toConsumableArray(_ads2), _toConsumableArray(_otherads2))); //更新
-
+        t.addPolygon([].concat(_toConsumableArray(_ads2), _toConsumableArray(_otherads2)));
+        //更新
         t.updatePolygon([].concat(_toConsumableArray(_upds2), _toConsumableArray(_otherupds2)));
       }
       /*
           圆数据处理
           先全删除,再新增
       */
-
-
       if (mapCircles instanceof Array && t.props.mapCircles instanceof Array && !t.deepEqual(mapCircles, t.props.mapCircles)) {
         var oldMapCircles = t.props.mapCircles;
         var newMapCircles = mapCircles;
-
         if (!!t.editId) {
           oldMapCircles = t.props.mapCircles.filter(function (item) {
             return item.id !== editGraphicId;
@@ -4210,147 +3781,121 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             return item.id !== editGraphicId;
           });
         }
-
         var _t$dataMatch4 = t.dataMatch(oldMapCircles, newMapCircles, 'id'),
-            _deletedDataIDs3 = _t$dataMatch4.deletedDataIDs,
-            _addedData3 = _t$dataMatch4.addedData,
-            _updatedData3 = _t$dataMatch4.updatedData;
-
+          _deletedDataIDs3 = _t$dataMatch4.deletedDataIDs,
+          _addedData3 = _t$dataMatch4.addedData,
+          _updatedData3 = _t$dataMatch4.updatedData;
         var _t$dealAdd4 = t.dealAdd(_addedData3, [].concat(_toConsumableArray(circleIds), _toConsumableArray(circle))),
-            _ads3 = _t$dealAdd4.ads,
-            _otherupds3 = _t$dealAdd4.otherupds;
-
+          _ads3 = _t$dealAdd4.ads,
+          _otherupds3 = _t$dealAdd4.otherupds;
         var _t$dealUpdate4 = t.dealUpdate(_updatedData3, [].concat(_toConsumableArray(circleIds), _toConsumableArray(circle))),
-            _upds3 = _t$dealUpdate4.upds,
-            _otherads3 = _t$dealUpdate4.otherads; //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
-
-
+          _upds3 = _t$dealUpdate4.upds,
+          _otherads3 = _t$dealUpdate4.otherads;
+        //删在增之前,(因为增加后会刷新pointIds的值,造成多删的问题)
         var _iterator3 = _createForOfIteratorHelper(_deletedDataIDs3),
-            _step3;
-
+          _step3;
         try {
           for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
             var _id2 = _step3.value;
             t.removeGraphic(_id2, 'circle');
-          } //增加
-
+          }
+          //增加
         } catch (err) {
           _iterator3.e(err);
         } finally {
           _iterator3.f();
         }
-
-        t.addCircle([].concat(_toConsumableArray(_ads3), _toConsumableArray(_otherads3))); //更新
-
+        t.addCircle([].concat(_toConsumableArray(_ads3), _toConsumableArray(_otherads3)));
+        //更新
         t.updateCircle([].concat(_toConsumableArray(_upds3), _toConsumableArray(_otherupds3)));
-      } //图元编辑调用
-
-
+      }
+      //图元编辑调用
       if (typeof isDoEdit == 'boolean' && isDoEdit || isDoEdit && isDoEdit !== t.props.isDoEdit) {
         t.doEdit(editGraphicId);
-      } // 获取热力图
-
-
+      }
+      // 获取热力图
       if (heatMapData && heatMapData.data && !t.deepEqual(heatMapData, t.props.heatMapData)) {
         t.heatMapOverlay(heatMapData);
       } else if (!t.deepEqual(heatMapData, t.props.heatMapData)) {
         t.clearHeatMap(heatMapData);
-      } //清空地图
-
-
+      }
+      //清空地图
       if (typeof isClearAll == 'boolean' && isClearAll || isClearAll && isClearAll !== t.props.isClearAll) {
         t.clearAll();
-      } //测距工具调用
-
-
+      }
+      //测距工具调用
       if (typeof isRangingTool == 'boolean' && isRangingTool || isRangingTool && isRangingTool !== t.props.isRangingTool) {
         t.vtxRangingTool(mapRangingTool);
       }
       /*设置指定图元展示*/
-
-
       if (typeof setVisiblePoints == 'boolean' && setVisiblePoints || setVisiblePoints && setVisiblePoints !== t.props.setVisiblePoints) {
         t.setVisiblePoints(mapVisiblePoints);
-      } //设置中心点
+      }
+      //设置中心点
       // if ((typeof (setCenter) == 'boolean' && setCenter) || (setCenter && setCenter !== t.props.setCenter)) {
       //     if (!(t.getCurrentCenter().lng == mapCenter[0] && t.getCurrentCenter().lat == mapCenter[1])) {
       //         t.setCenter(mapCenter);
       //     }
       // }
-
-
       if (nextProps.mapCenter && nextProps.mapCenter.length > 0 && JSON.stringify(nextProps.mapCenter) !== JSON.stringify(this.props.mapCenter)) {
         t.setCenter(mapCenter);
-      } //设置点聚合
-
-
+      }
+      //设置点聚合
       if (typeof setCluster == 'boolean' && setCluster || setCluster && setCluster !== t.props.setCluster) {
         t.cluster(mapCluster);
       }
-
       if (!setCluster && setCluster !== t.props.setCluster) {
         t.clearCluster(mapCluster);
-      } //图元编辑调用
-
-
+      }
+      //图元编辑调用
       if (typeof isDoEdit == 'boolean' && isDoEdit || isDoEdit && isDoEdit !== t.props.isDoEdit) {
         t.doEdit(editGraphicId);
-      } //关闭图元编辑
-
-
+      }
+      //关闭图元编辑
       if (typeof isEndEdit == 'boolean' && isEndEdit || isEndEdit && isEndEdit !== t.props.isEndEdit) {
         t.endEdit();
-      } //绘制图元
-
-
+      }
+      //绘制图元
       if (typeof isDraw == 'boolean' && isDraw || isDraw && isDraw !== t.props.isDraw) {
         t.draw(mapDraw);
-      } //关闭绘制
-
-
+      }
+      //关闭绘制
       if (typeof isCloseDraw == 'boolean' && isCloseDraw || isCloseDraw && isCloseDraw !== t.props.isCloseDraw) {
         t.closeDraw();
-      } //单独删除操作
-
-
+      }
+      //单独删除操作
       if (typeof isRemove == 'boolean' && isRemove || isRemove && isRemove !== t.props.isRemove) {
         mapRemove.map(function (item, index) {
           t.removeGraphic(item.id, item.type);
         });
-      } //设置区域限制
-
-
+      }
+      //设置区域限制
       if (typeof isSetAreaRestriction == 'boolean' && isSetAreaRestriction || isSetAreaRestriction && isSetAreaRestriction !== t.props.isSetAreaRestriction && areaRestriction && !!areaRestriction[0] && !!areaRestriction[1]) {
         t.setAreaRestriction(areaRestriction);
-      } //关闭区域限制
-
-
+      }
+      //关闭区域限制
       if (typeof isClearAreaRestriction == 'boolean' && isClearAreaRestriction || isClearAreaRestriction && isClearAreaRestriction !== t.props.isClearAreaRestriction) {
         t.clearAreaRestriction();
-      } // 设置地图层级
-
-
+      }
+      // 设置地图层级
       if (typeof setZoomLevel == 'boolean' && setZoomLevel || setZoomLevel && setZoomLevel !== t.props.setZoomLevel) {
         t.setZoomLevel(mapZoomLevel);
-      } // 比例尺控件位置改变
-
-
+      }
+      // 比例尺控件位置改变
       if (nextProps.showControl && JSON.stringify(nextProps.showControl) != JSON.stringify(t.props.showControl)) {
         t.showControl(nextProps);
-      } // 更新需要加载的图层
-
-
+      }
+      // 更新需要加载的图层
       if (nextProps.olProps && JSON.stringify(nextProps.olProps) !== JSON.stringify(t.props.olProps)) {
         t.loadLayers(nextProps.olProps.olCoverage, t.props.olProps.olCoverage);
       }
-    } // 地图事件
+    }
+    // 地图事件
     //地图点击事件
-
   }, {
     key: "clickMap",
     value: function clickMap(e) {
       var t = this;
-
       if (typeof t.props.clickMap === 'function') {
         var obj = t.getMapExtent();
         obj.e = e;
@@ -4368,20 +3913,17 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             temp.push(t.getFeatureInfo(e, t.state.gis.getView(), item.layer.getSource()));
           }
         });
-
         if (temp.length) {
           obj.features = temp;
         }
-
         t.props.clickMap(obj);
       }
-    } // 获取geoServer要素
-
+    }
+    // 获取geoServer要素
   }, {
     key: "getFeatureInfo",
     value: function getFeatureInfo(event, view, source) {
-      var _this8 = this;
-
+      var _this9 = this;
       var sourceParam = source.getParams();
       var url = source.getFeatureInfoUrl(event.coordinate, view.getResolution(), view.getProjection(), {
         cql_filter: sourceParam === null || sourceParam === void 0 ? void 0 : sourceParam.cql_filter,
@@ -4390,49 +3932,41 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         REQUEST: "GetFeatureInfo",
         FEATURE_COUNT: 50
       });
-
       var _this$formatUrl2 = this.formatUrl(url),
-          param = _this$formatUrl2.param,
-          address = _this$formatUrl2.address; // let temp = param.BBOX.split(",");
+        param = _this$formatUrl2.param,
+        address = _this$formatUrl2.address;
+      // let temp = param.BBOX.split(",");
       // let BBOX = [temp[1],temp[0],temp[3],temp[2]].join(",");
       // param.BBOX = BBOX;
-
-
       param.QUERY_LAYERS = param.LAYERS;
       var temp = [];
-
       for (var key in param) {
         temp.push("".concat(key, "=").concat(param[key]));
       }
-
       address += "?".concat(temp.join("&"));
       var geoJsonFormat = new ol.format.GeoJSON();
       return fetch(address).then(function (res) {
         return res.json();
       }).then(function (data) {
         var _data$features;
-
         var features = [];
-
         if (data !== null && data !== void 0 && (_data$features = data.features) !== null && _data$features !== void 0 && _data$features.length) {
           features = geoJsonFormat.readFeatures(data);
           features.map(function (item) {
-            item.key = _this8 === null || _this8 === void 0 ? void 0 : _this8.key;
+            item.key = _this9 === null || _this9 === void 0 ? void 0 : _this9.key;
           });
         }
-
         return features;
       })["catch"](function () {
         return [];
       });
-    } // 要素鼠标悬浮事件
-
+    }
+    // 要素鼠标悬浮事件
   }, {
     key: "mouseOverGraphic",
     value: function mouseOverGraphic(id, e) {
       var t = this;
       if (t.state.editId == id) return false;
-
       if (typeof t.props.mouseOverGraphic === 'function') {
         var obj = {
           e: e,
@@ -4444,15 +3978,14 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         };
         t.props.mouseOverGraphic(obj);
       }
-    } // 要素鼠标移开事件
-
+    }
+    // 要素鼠标移开事件
   }, {
     key: "mouseOutGraphic",
     value: function mouseOutGraphic(id, e) {
-      var t = this; //编辑中的图元关闭其他事件返回
-
+      var t = this;
+      //编辑中的图元关闭其他事件返回
       if (t.state.editId == id) return false;
-
       if (typeof t.props.mouseOutGraphic === 'function') {
         var obj = {
           e: e,
@@ -4464,32 +3997,30 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         };
         t.props.mouseOutGraphic(obj);
       }
-    } //地图拖动之前事件
-
+    }
+    //地图拖动之前事件
   }, {
     key: "dragMapStart",
     value: function dragMapStart(e) {
       var t = this;
-
       if (typeof t.props.dragMapStart === 'function') {
         var obj = t.getMapExtent();
         obj.e = e;
         t.props.dragMapStart(obj);
       }
-    } //地图拖动结束后事件
-
+    }
+    //地图拖动结束后事件
   }, {
     key: "dragMapEnd",
     value: function dragMapEnd(e) {
       var t = this;
-
       if (typeof t.props.dragMapEnd === 'function') {
         var obj = t.getMapExtent();
         obj.e = e;
         t.props.dragMapEnd(obj);
       }
-    } //热力图
-
+    }
+    //热力图
   }, {
     key: "heatMapOverlay",
     value: function heatMapOverlay() {
@@ -4502,28 +4033,23 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         opacity: 0.7,
         gradient: ['#00f', '#0ff', '#0f0', '#ff0', '#f00']
       };
-
       if (d.config) {
         cg = _objectSpread(_objectSpread({}, cg), d.config);
       }
-
       var gradient = [];
-
       if (cg.gradient) {
         for (var key in cg.gradient) {
           gradient.push(cg.gradient[key]);
         }
-
         cg.gradient = gradient;
-      } // if(d.data){
+      }
+      // if(d.data){
       //     t.state.pointIds = [];
       //     t.pointLayers.map(item => {
       //         t.state.gis.removeLayer(item.layer);
       //         t.pointLayers=[];
       //     })
       // }
-
-
       var heatData = {
         type: 'FeatureCollection',
         features: (d.data || []).map(function (item) {
@@ -4562,69 +4088,63 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       if (t.heatmap) t.state.gis.removeLayer(t.heatmap);
       t.heatmap = null;
       t.refresh();
-    } //地图移动之前事件
-
+    }
+    //地图移动之前事件
   }, {
     key: "moveStart",
     value: function moveStart(e) {
       var t = this;
-
       if (typeof t.props.moveStart === 'function') {
         var obj = t.getMapExtent();
         obj.e = e;
         t.props.moveStart(obj);
       }
-    } //地图移动结束后事件
-
+    }
+    //地图移动结束后事件
   }, {
     key: "moveEnd",
     value: function moveEnd(e) {
       var t = this;
-
       if (typeof t.props.moveEnd === 'function') {
         var obj = t.getMapExtent();
         obj.e = e;
         t.props.moveEnd(obj);
       }
-    } //地图更改缩放级别开始时触发触发此事件
-
+    }
+    //地图更改缩放级别开始时触发触发此事件
   }, {
     key: "zoomStart",
     value: function zoomStart(e) {
       var t = this;
-
       if (typeof t.props.zoomStart === 'function') {
         var obj = t.getMapExtent();
         obj.e = e;
         t.props.zoomStart(obj);
       }
-    } //地图更改缩放级别结束时触发触发此事件
-
+    }
+    //地图更改缩放级别结束时触发触发此事件
   }, {
     key: "zoomEnd",
     value: function zoomEnd(e) {
       var t = this;
-
       if (typeof t.props.zoomEnd === 'function') {
         var obj = t.getMapExtent();
         obj.e = e;
         t.props.zoomEnd(obj);
       }
-    } // 图元点击事件
-
+    }
+    // 图元点击事件
   }, {
     key: "clickGraphic",
     value: function clickGraphic(id, e) {
       var target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      var t = this; //编辑中的图元关闭其他事件返回
-
+      var t = this;
+      //编辑中的图元关闭其他事件返回
       if (t.editId == id) return false;
-
       if (typeof t.props.clickGraphic === 'function') {
         var _e$pixel = _slicedToArray(e.pixel, 2),
-            clientX = _e$pixel[0],
-            clientY = _e$pixel[1];
-
+          clientX = _e$pixel[0],
+          clientY = _e$pixel[1];
         var param = t.getGraphic(id, clientX, clientY);
         var obj = {
           param: param,
@@ -4648,58 +4168,46 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
     value: function componentWillUnmount() {
       //关闭moveTo定时
       var t = this;
-
       if (t.moveToTimer) {
         clearInterval(t.moveToTimer);
-      } //关闭animation定时
-
-
+      }
+      //关闭animation定时
       for (var j in t.animTimer) {
         if (t.animTimer[j]) {
           clearInterval(t.animTimer[j]);
         }
       }
-
       window.VtxMap && (window.VtxMap[t.state.mapId] = null);
     }
   }]);
-
   return OlMap;
 }(_react["default"].Component);
-
-var _default = OlMap;
-exports["default"] = _default;
-
+var _default = exports["default"] = OlMap;
 var Popup = /*#__PURE__*/function (_React$Component2) {
   _inherits(Popup, _React$Component2);
-
   var _super2 = _createSuper(Popup);
-
   function Popup(props) {
-    var _this9;
-
+    var _this10;
     _classCallCheck(this, Popup);
+    _this10 = _super2.call(this);
+    _this10.map = props.map;
+    _this10.position = props.position;
+    _this10.overlay = null;
+    _this10.container = null;
+    _this10.innerHTML = props.innerHTML;
+    _this10.closeble = props.close;
+    return _this10;
+  }
 
-    _this9 = _super2.call(this);
-    _this9.map = props.map;
-    _this9.position = props.position;
-    _this9.overlay = null;
-    _this9.container = null;
-    _this9.innerHTML = props.innerHTML;
-    _this9.closeble = props.close;
-    return _this9;
-  } // 弹出框
-
-
+  // 弹出框
   _createClass(Popup, [{
     key: "showPopup",
     value: function showPopup() {
       var t = this;
-      this.removePopup(); // 获取弹出层DOM
-
+      this.removePopup();
+      // 获取弹出层DOM
       t.container = document.createElement("div");
       t.container['className'] = "ol-popup";
-
       if (t.closeble) {
         var close = document.createElement("a");
         close['className'] = "ol-popup-closer";
@@ -4708,10 +4216,8 @@ var Popup = /*#__PURE__*/function (_React$Component2) {
         });
         t.container.appendChild(close);
       }
-
       var content = document.createElement("div");
       t.container.appendChild(content);
-
       if (t.overlay) {} else {
         // 创建Overlay弹出层绑定DOM
         t.overlay = new ol.Overlay({
@@ -4721,100 +4227,85 @@ var Popup = /*#__PURE__*/function (_React$Component2) {
               duration: 250
             }
           }
-        }); // 添加到map
-
+        });
+        // 添加到map
         t.map.addOverlay(t.overlay);
-      } // 弹出层内容
-
-
-      content.innerHTML = t.innerHTML; // 设置弹出层位置即可出现
-
+      }
+      // 弹出层内容
+      content.innerHTML = t.innerHTML;
+      // 设置弹出层位置即可出现
       t.overlay.setPosition(t.position);
-    } // 清除弹出框
-
+    }
+    // 清除弹出框
   }, {
     key: "removePopup",
     value: function removePopup() {
       if (this.overlay) {
-        this.container.remove(); // 设置位置undefined可达到隐藏清除弹出框
-
+        this.container.remove();
+        // 设置位置undefined可达到隐藏清除弹出框
         this.overlay.setPosition(undefined);
         this.overlay = null;
       }
     }
   }]);
-
   return Popup;
 }(_react["default"].Component);
-
 function getRgbColor(color, opacity) {
   var reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
-
   if (!reg.test(color) && typeof color !== 'string') {
     return;
   }
-
   var newStr = color.toLowerCase().replace(/\#/g, '');
   var len = newStr.length;
-
   if (len == 3) {
     var t = '';
-
     for (var i = 0; i < len; i++) {
       t += newStr.slice(i, i + 1).concat(newStr.slice(i, i + 1));
     }
-
     newStr = t;
   }
-
   var arr = []; //将字符串分隔，两个两个的分隔
-
   for (var i = 0; i < 6; i = i + 2) {
     var s = newStr.slice(i, i + 2);
     arr.push(parseInt('0x' + s));
   }
-
   return 'rgba(' + arr.join(',') + ',' + opacity + ')';
-} // 压缩图片的方法
-
+}
 
+// 压缩图片的方法
 function canvasDataURL(path, obj, callback) {
   var img = new Image();
   img.src = path;
   img.setAttribute("crossOrigin", 'Anonymous');
-
   img.onload = function () {
-    var that = this; // 默认按比例压缩
-
+    var that = this;
+    // 默认按比例压缩
     var w = that.width,
-        h = that.height,
-        scale = w / h;
+      h = that.height,
+      scale = w / h;
     w = obj.width || w;
     h = obj.height || w / scale;
     var quality = 0.7; // 默认图片质量为0.7
     //生成canvas
-
     var canvas = document.createElement('canvas');
-    var ctx = canvas.getContext('2d'); // 创建属性节点
-
+    var ctx = canvas.getContext('2d');
+    // 创建属性节点
     var anw = document.createAttribute("width");
     anw.nodeValue = w;
     var anh = document.createAttribute("height");
     anh.nodeValue = h;
     canvas.setAttributeNode(anw);
     canvas.setAttributeNode(anh);
-    ctx.drawImage(that, 0, 0, w, h); // 图像质量
-
+    ctx.drawImage(that, 0, 0, w, h);
+    // 图像质量
     if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
       quality = obj.quality;
-    } // quality值越小，所绘制出的图像越模糊
-
-
-    var base64 = canvas.toDataURL('image/png', quality); // 回调函数返回base64的值
-
+    }
+    // quality值越小，所绘制出的图像越模糊
+    var base64 = canvas.toDataURL('image/png', quality);
+    // 回调函数返回base64的值
     callback(base64);
   };
 }
-
 module.exports = exports["default"];
 //# sourceMappingURL=Map.js.map