@vtx/map 1.2.38 → 2.0.0-beta.2

package/lib/VtxMap/OMap/Map.less

@@ -1,70 +1,70 @@
-.label-content{
-    display: inline-block;
-    padding: 5px;
-    line-height: 22px;
-    text-align: center;
-    border-radius: 5px;
-    background-color: #fff;
-    opacity: 1;
-    color: #5DD0EE;
-    transform: translate(-50%);
-    -ms-transform: translate(-50%);
-}
-.noselect {
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Chrome/Safari/Opera */
-    -khtml-user-select: none; /* Konqueror */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none; /* Non-prefixed version, currently
-    not supported by any browser */
-}
-.vtx_gmap_html_pointCollection_a{
-    position: absolute;
-    canvas{
-        z-index: 111;
-    }
-}
-.vtx-g-rangingPoint{
-    width: 8px;
-    height: 8px;
-    background-color: #fff;
-    border: 2px solid #108ee9;
-    display: inline-block;
-    border-radius: 8px;
-    position: relative;
-    top: 5px;
-    left: 1px;
-}
-.vtx-g-rangingDistance{
-    position: relative;
-    top: -36px;
-    left: 15px;
-    height: 30px;
-    line-height: 28px;
-    background-color: #fff;
-    border: 1px solid #108ee9;
-    font-size: 12px;
-    word-break: keep-all;
-    padding: 0px 3px;
-    color: #108ee9;
-}
-.vtx-g-rang-exit{
-    width: 12px;
-    height: 12px;
-    background-color: #fff;
-    border: 2px solid #108ee9;
-    color: #108ee9;
-    line-height: 7px;
-    text-align: center;
-    font-size: 12px;
-    cursor: pointer;
-}
-.vtx-g-rang-showRangTool{
-    line-height: 18px;
-    font-size: 12px;
-    border: 1px solid #108ee9;
-    word-break: keep-all;
-    background-color: #fff;
-    padding: 0px 5px;
-}
+.label-content{
+    display: inline-block;
+    padding: 5px;
+    line-height: 22px;
+    text-align: center;
+    border-radius: 5px;
+    background-color: #fff;
+    opacity: 1;
+    color: #5DD0EE;
+    transform: translate(-50%);
+    -ms-transform: translate(-50%);
+}
+.noselect {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Chrome/Safari/Opera */
+    -khtml-user-select: none; /* Konqueror */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently
+    not supported by any browser */
+}
+.vtx_gmap_html_pointCollection_a{
+    position: absolute;
+    canvas{
+        z-index: 111;
+    }
+}
+.vtx-g-rangingPoint{
+    width: 8px;
+    height: 8px;
+    background-color: #fff;
+    border: 2px solid #108ee9;
+    display: inline-block;
+    border-radius: 8px;
+    position: relative;
+    top: 5px;
+    left: 1px;
+}
+.vtx-g-rangingDistance{
+    position: relative;
+    top: -36px;
+    left: 15px;
+    height: 30px;
+    line-height: 28px;
+    background-color: #fff;
+    border: 1px solid #108ee9;
+    font-size: 12px;
+    word-break: keep-all;
+    padding: 0px 3px;
+    color: #108ee9;
+}
+.vtx-g-rang-exit{
+    width: 12px;
+    height: 12px;
+    background-color: #fff;
+    border: 2px solid #108ee9;
+    color: #108ee9;
+    line-height: 7px;
+    text-align: center;
+    font-size: 12px;
+    cursor: pointer;
+}
+.vtx-g-rang-showRangTool{
+    line-height: 18px;
+    font-size: 12px;
+    border: 1px solid #108ee9;
+    word-break: keep-all;
+    background-color: #fff;
+    padding: 0px 5px;
+}

package/lib/VtxMap/OlMap/Map.js

@@ -5,11 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _default2 = _interopRequireDefault(require("../../default"));
+var _default2 = _interopRequireWildcard(require("../../default"));
 var _MapToolFunction = require("../MapToolFunction");
 var _immutable = _interopRequireDefault(require("immutable"));
-var _lodash = require("lodash");
-var _proj = _interopRequireDefault(require("proj4"));
+var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
+var _isEmpty = _interopRequireDefault(require("lodash-es/isEmpty"));
+var _get = _interopRequireDefault(require("lodash-es/get"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
@@ -92,7 +94,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           } else if (item.coverage == 'customLayer') {
             var layers = item.initLayer();
             if (layers) {
-              if ((0, _lodash.isArray)(layers)) {
+              if ((0, _isArray["default"])(layers)) {
                 layers.map(function (layer) {
                   t.state.gis.addLayer(layer);
                 });
@@ -103,7 +105,7 @@ 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)) {
+              if ((0, _isArray["default"])(_layers)) {
                 _layers.map(function (layer) {
                   t.state.gis.addLayer(layer);
                 });
@@ -116,7 +118,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       } else {
         if (first) {
           var layers = eval(OL_SCREEN.tmap_normal.initLayer);
-          if ((0, _lodash.isArray)(layers)) {
+          if ((0, _isArray["default"])(layers)) {
             layers.map(function (layer) {
               t.state.gis.addLayer(layer);
             });
@@ -136,7 +138,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
     }; //label图层 位置管理
     _this.viewer = null;
     _this.GM = new _MapToolFunction.graphicManage(); //初始化 图元管理方法
-    // this.getPolygonArea = getPolygonArea;
+    _this.getPolygonArea = _MapToolFunction.getPolygonArea;
     _this.layer = null; //保存地图图层数据
     _this.loadTimer = null; //初始化地图 load时延缓数据处理
     _this.animTimer = {}; //点位跳动动画 定时集合
@@ -250,32 +252,34 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
     key: "loadMapJs",
     value: function loadMapJs() {
       this.loadMapComplete = new Promise(function (resolve, reject) {
-        if (window.OlMap) {
-          resolve(window.OlMap);
-        } else {
-          $.getScript("".concat(_default2["default"].openlayerServerURL, "/ol.js"), function () {
-            var PointCollection = new Promise(function (resolve, reject) {
-              $.getScript("".concat(_default2["default"].mapServerURL, "/GPointCollection.js"), function () {
-                resolve();
+        (0, _default2.ensurejQuery)().then(function () {
+          if (window.OlMap) {
+            resolve(window.OlMap);
+          } else {
+            $.getScript("".concat(_default2["default"].openlayerServerURL, "/ol.js"), function () {
+              var PointCollection = new Promise(function (resolve, reject) {
+                $.getScript("".concat(_default2["default"].mapServerURL, "/GPointCollection.js"), function () {
+                  resolve();
+                });
               });
-            });
-            var Client9 = new Promise(function (resolve, reject) {
-              $.getScript("".concat(_default2["default"].openlayerServerURL, "/iclient-openlayers.min.js"), function () {
-                resolve();
+              var Client9 = new Promise(function (resolve, reject) {
+                $.getScript("".concat(_default2["default"].openlayerServerURL, "/iclient-openlayers.min.js"), function () {
+                  resolve();
+                });
+              });
+              Promise.all([PointCollection, Client9]).then(function () {
+                resolve(window.OlMap);
               });
             });
-            Promise.all([PointCollection, Client9]).then(function () {
-              resolve(window.OlMap);
-            });
-          });
-          $.getScript("".concat(_default2["default"].openlayerServerURL, "/bd09.js"));
-          $.getScript("".concat(_default2["default"].openlayerServerURL, "/olScreen.js"));
-          $('<link>').attr({
-            rel: 'stylesheet',
-            type: 'text/css',
-            href: "".concat(_default2["default"].openlayerServerURL, "/ol.css")
-          }).appendTo('head');
-        }
+            $.getScript("".concat(_default2["default"].openlayerServerURL, "/bd09.js"));
+            $.getScript("".concat(_default2["default"].openlayerServerURL, "/olScreen.js"));
+            $('<link>').attr({
+              rel: 'stylesheet',
+              type: 'text/css',
+              href: "".concat(_default2["default"].openlayerServerURL, "/ol.css")
+            }).appendTo('head');
+          }
+        });
       });
     }
     // 初始化地圖
@@ -379,7 +383,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             var target = feature.getProperties();
             var id = '';
             var elementId = '';
-            if ((0, _lodash.isArray)(target.features)) {
+            if ((0, _isArray["default"])(target.features)) {
               // 处理聚合点击
               var properties = target.features[0].getProperties();
               id = properties.id;
@@ -462,9 +466,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         mapZoomLevel = _t$props2.mapZoomLevel,
         minZoom = _t$props2.minZoom,
         maxZoom = _t$props2.maxZoom;
-      var epsg = olProps.epsg,
-        proj4 = olProps.proj4,
-        projection = olProps.projection,
+      var projection = olProps.projection,
         olCoverage = olProps.olCoverage;
       if (window.VtxMap) {
         window.VtxMap[mapId] = null;
@@ -477,13 +479,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       if (!maxZoom) {
         maxZoom = 19;
       }
-      if (epsg) {
-        console.log('epsg', epsg, proj4);
-        projection = "EPSG:".concat(epsg);
-        _proj["default"].defs("EPSG:".concat(epsg), proj4);
-        ol.proj.proj4.register(_proj["default"]);
-      } else {
-        projection = projection || 'EPSG:4326';
+      if (!projection) {
+        projection = 'EPSG:4326';
       }
       //中心点
       var center = mapCenter && mapCenter instanceof Array && mapCenter.length == 2 ? mapCenter : [116.400433, 39.906705];
@@ -514,30 +511,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       t.loadLayers(olCoverage, [], true);
       t.initPropsForUser();
     }
-
-    // 坐标转化
-  }, {
-    key: "projectToWGS84",
-    value: function projectToWGS84(point, eg) {
-      var t = this;
-      var epsg = t.props.olProps.epsg;
-      return (0, _proj["default"])("EPSG:".concat(eg || epsg), 'EPSG:4326', point);
-    }
-
-    // 计算面积
-  }, {
-    key: "getPolygonArea",
-    value: function getPolygonArea(polygon) {
-      var t = this;
-      var epsg = t.props.olProps.epsg;
-      if (epsg) {
-        var temp = polygon.map(function (v) {
-          return t.projectToWGS84(v, epsg);
-        });
-        return (0, _MapToolFunction.getPolygonArea)(temp);
-      }
-      return (0, _MapToolFunction.getPolygonArea)(polygon);
-    }
   }, {
     key: "getWMTS",
     value:
@@ -1014,7 +987,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               type: 'polygon',
               _extent: _extent2
             },
-            area: t.getPolygonArea(_path)
+            area: (0, _MapToolFunction.getPolygonArea)(_path)
           });
         }
         if (gp.geometry.type == 'circle') {
@@ -1022,7 +995,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           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(t.projectToWGS84(sketchCoords_), t.projectToWGS84(sketchCoords_2));
+          var radius = ol.sphere.getDistance(sketchCoords_, sketchCoords_2);
           param = _objectSpread(_objectSpread({}, param), {}, {
             attributes: _objectSpread(_objectSpread({}, gp.attributes), {}, {
               longitude: center[0],
@@ -1329,7 +1302,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               id: t.drawParam.data.id,
               config: _objectSpread({}, t.drawParam.parameter)
             },
-            area: t.getPolygonArea(_path2),
+            area: (0, _MapToolFunction.getPolygonArea)(_path2),
             geometryType: t.drawParam.geometryType,
             mapLayer: t.GM.getGraphic(t.drawParam.data.id)
           };
@@ -1365,7 +1338,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               id: t.drawParam.data.id,
               config: _objectSpread({}, t.drawParam.parameter)
             },
-            area: t.getPolygonArea(_path3),
+            area: (0, _MapToolFunction.getPolygonArea)(_path3),
             geometryType: t.drawParam.geometryType,
             mapLayer: t.GM.getGraphic(t.drawParam.data.id)
           };
@@ -1375,7 +1348,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           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(t.projectToWGS84(sketchCoords_), t.projectToWGS84(sketchCoords_2));
+          var radius = ol.sphere.getDistance(sketchCoords_, sketchCoords_2);
           if (t.GM.isRepetition(t.drawParam.data.id)) {
             t.updateCircle([{
               id: t.drawParam.data.id,
@@ -1642,15 +1615,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           width: width,
           height: height
         };
-        obj.radius = ol.sphere.getDistance(t.projectToWGS84([obj.nowCenter.lng, obj.nowCenter.lat]), t.projectToWGS84([obj.northEast.lng, obj.northEast.lat]));
+        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']
+    /*
+        参数arg格式如下1,2
+        1.string   格式如:'1,a,2,3,4'
+        2.数组 ['1','2']
     */
   }, {
     key: "setVisiblePoints",
@@ -1832,7 +1805,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
                 rings: pts
               })
             }),
-            area: t.getPolygonArea(pts)
+            area: (0, _MapToolFunction.getPolygonArea)(pts)
           });
           break;
         case 'circle':
@@ -2007,12 +1980,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       this.removeGraphic(obj.id, obj.type);
       delete this.frameSelectProps[id];
     }
-    /*
-    * 添加信息窗口
-    * params
-    * @position: Array[longitude,latitude]
-    * @content: String|HTML
-    * @close: boolean
+    /*
+    * 添加信息窗口
+    * params
+    * @position: Array[longitude,latitude]
+    * @content: String|HTML
+    * @close: boolean
     */
   }, {
     key: "showInfoWindow",
@@ -2356,7 +2329,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           t.refresh();
         }
       };
-      if (!(0, _lodash.isEmpty)(mapPoints)) {
+      if (!(0, _isEmpty["default"])(mapPoints)) {
         requestIdleCallback(function () {
           return _dealPoint(mapPoints[index]);
         });
@@ -2572,9 +2545,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
     value: function refresh() {
       var t = this;
       var timer = setTimeout(function () {
-        var _window$VtxMap$t$prop;
         clearTimeout(timer);
-        (_window$VtxMap$t$prop = window.VtxMap[t.props.mapId]) === null || _window$VtxMap$t$prop === void 0 || _window$VtxMap$t$prop.redrawText();
+        window.VtxMap[t.props.mapId].redrawText();
       }, 100);
     }
     // 添加先
@@ -3498,7 +3470,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "calculatePointsDistance",
     value: function calculatePointsDistance(fp, ep) {
+      console.log(fp, ep);
       var distance = ol.sphere.getDistance(fp, ep);
+      console.log(distance);
       return Math.round(distance);
     }
     //计算多个点的距离(常用于线计算)
@@ -3512,10 +3486,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       }
       for (var i = 0; i < ps.length; i++) {
         if (i < ps.length - 1) {
-          var distance = t.calculatePointsDistance(t.projectToWGS84(ps[i]), t.projectToWGS84(ps[i + 1]));
+          var distance = t.calculatePointsDistance(ps[i], ps[i + 1]);
+          console.log(distance);
           totalDistance += distance;
         }
       }
+      console.log(totalDistance);
       return Math.round(totalDistance * 100) / 100;
     }
     //处理线和面的 经纬度数据
@@ -3926,10 +3902,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         pointsFeature = _nextProps$pointsFeat === void 0 ? [] : _nextProps$pointsFeat;
       // 等待地图加载
       if (!t.mapCreated) return;
-      /*点数据处理
-          pointData[2]相同的点,执行刷新
-          pointData[1]的数据在idsForGraphicId中不存在的,执行新增
-          pointData[0]数据中多余的id,执行删除
+      /*点数据处理
+          pointData[2]相同的点,执行刷新
+          pointData[1]的数据在idsForGraphicId中不存在的,执行新增
+          pointData[0]数据中多余的id,执行删除
       */
       if (pointsFeature instanceof Array && !t.deepEqual(pointsFeature, t.props.pointsFeature)) {
         t.addPointLayer(pointsFeature);
@@ -3966,7 +3942,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             });
           }
         };
-        if (!(0, _lodash.isEmpty)(deletedDataIDs)) {
+        if (!(0, _isEmpty["default"])(deletedDataIDs)) {
           _removeGraphic(deletedDataIDs[index]);
         }
         //增加
@@ -3974,9 +3950,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         //更新
         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;
@@ -4017,9 +3993,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         //更新
         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;
@@ -4060,9 +4036,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         //更新
         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;
@@ -4131,7 +4107,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       //         t.setCenter(mapCenter);
       //     }
       // }
-      if (setCenter && nextProps.mapCenter && nextProps.mapCenter.length > 0) {
+      if (nextProps.mapCenter && nextProps.mapCenter.length > 0 && JSON.stringify(nextProps.mapCenter) !== JSON.stringify(this.props.mapCenter)) {
         t.setCenter(mapCenter);
       }
       //设置点聚合