@vtx/map 1.2.8 → 1.2.10

package/lib/VtxSearchMap/VtxSearchMap.js

@@ -267,7 +267,9 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
       msgConfirmInputText: '请输入搜索关键字',
       msgEndEditingDrawText: '请双击结束图元编辑',
       msgClickGraphicEditText: '请点击图元进行编辑',
-      placeholderSearchInputText: '输入关键字'
+      placeholderSearchInputText: '输入关键字',
+      lengthText: '长度',
+      areaText: '面积'
     }, props.customEnumText || {});
     return _this;
   } // 绘制多个图元时返回参数
@@ -822,49 +824,114 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
           break;
       }
     }
+  }, {
+    key: "computeGraphic",
+    value: function computeGraphic() {
+      var _this7 = this;
+
+      var str = '';
+      var _this$state4 = this.state,
+          graphicValue = _this$state4.graphicValue,
+          editGraphicId = _this$state4.editGraphicId;
+
+      switch (this.state.graphicType) {
+        case 'circle':
+          if (this.map.getGraphic(editGraphicId)) {
+            var p = this.map.getGraphic(editGraphicId);
+            str = "".concat(this.TextEnum.areaText, "\uFF1A").concat(formatNumber(Math.PI * Math.pow(p.geometry.radius, 2)), "\u33A1");
+          } else {
+            str = "".concat(this.TextEnum.areaText, "\uFF1A").concat(graphicValue ? formatNumber(graphicValue.area) : '-', "\u33A1");
+          }
+
+          break;
+
+        case 'polygon':
+          if (this.map.getGraphic(editGraphicId)) {
+            var _p4 = this.map.getGraphic(editGraphicId);
+
+            str = "".concat(this.TextEnum.areaText, "\uFF1A").concat(formatNumber(this.map.getPolygonArea(distinct(_p4.geometry.rings))), "\u33A1");
+          } else {
+            str = "".concat(this.TextEnum.areaText, "\uFF1A").concat(graphicValue ? formatNumber(graphicValue.area) : '-', "\u33A1");
+          }
+
+          break;
+
+        case 'rectangle':
+          str = "".concat(this.TextEnum.areaText, "\uFF1A").concat(graphicValue ? formatNumber(graphicValue.area) : '-', "\u33A1");
+          break;
+
+        case 'polyline':
+          if (this.map.getGraphic(editGraphicId)) {
+            var _p5 = this.map.getGraphic(editGraphicId);
+
+            str = "".concat(this.TextEnum.lengthText, "\uFF1A").concat(formatNumber(this.map.calculateDistance(_p5.geometry.paths)), "m");
+          } else {
+            str = "".concat(this.TextEnum.lengthText, "\uFF1A").concat(graphicValue ? formatNumber(this.map.calculateDistance(graphicValue.geometry.paths)) : '-', "m");
+          }
+
+          break;
+      }
+
+      if (str) {
+        return /*#__PURE__*/_react["default"].createElement("span", {
+          style: {
+            display: 'inline-block',
+            marginLeft: '10px'
+          }
+        }, /*#__PURE__*/_react["default"].createElement("span", null, str), /*#__PURE__*/_react["default"].createElement("span", {
+          onClick: function onClick() {
+            _this7.setState({
+              flag: Math.random()
+            });
+          }
+        }, getIcon('sync')));
+      } else {
+        return null;
+      }
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this7 = this;
+      var _this8 = this;
 
       var t = this;
       var TextEnum = t.TextEnum;
-      var _this$state4 = this.state,
-          isShowList = _this$state4.isShowList,
-          searchValue = _this$state4.searchValue,
-          locationPoint = _this$state4.locationPoint,
-          listPoint = _this$state4.listPoint,
-          listMess = _this$state4.listMess,
-          mapZoomLevel = _this$state4.mapZoomLevel,
-          setZoomLevel = _this$state4.setZoomLevel,
-          maxZoom = _this$state4.maxZoom,
-          minZoom = _this$state4.minZoom,
-          wkid = _this$state4.wkid,
-          mapServer = _this$state4.mapServer,
-          mapCenter = _this$state4.mapCenter,
-          setCenter = _this$state4.setCenter,
-          mapType = _this$state4.mapType,
-          mapStyle = _this$state4.mapStyle,
-          mapVisiblePoints = _this$state4.mapVisiblePoints,
-          setVisiblePoints = _this$state4.setVisiblePoints,
-          isDoEdit = _this$state4.isDoEdit,
-          editGraphicId = _this$state4.editGraphicId,
-          isEndEdit = _this$state4.isEndEdit,
-          modal1Visible = _this$state4.modal1Visible,
-          drawGraphID = _this$state4.drawGraphID,
-          isShowOther = _this$state4.isShowOther,
-          otherText = _this$state4.otherText,
-          isShowOtherGraph = _this$state4.isShowOtherGraph,
-          editGraphic = _this$state4.editGraphic,
-          graphicType = _this$state4.graphicType,
-          graphicValue = _this$state4.graphicValue,
-          olProps = _this$state4.olProps,
-          isChangeMapType = _this$state4.isChangeMapType,
-          currentMap = _this$state4.currentMap,
-          showControl = _this$state4.showControl,
-          coverageType = _this$state4.coverageType,
-          customNodes = _this$state4.customNodes,
-          language = _this$state4.language;
+      var _this$state5 = this.state,
+          isShowList = _this$state5.isShowList,
+          searchValue = _this$state5.searchValue,
+          locationPoint = _this$state5.locationPoint,
+          listPoint = _this$state5.listPoint,
+          listMess = _this$state5.listMess,
+          mapZoomLevel = _this$state5.mapZoomLevel,
+          setZoomLevel = _this$state5.setZoomLevel,
+          maxZoom = _this$state5.maxZoom,
+          minZoom = _this$state5.minZoom,
+          wkid = _this$state5.wkid,
+          mapServer = _this$state5.mapServer,
+          mapCenter = _this$state5.mapCenter,
+          setCenter = _this$state5.setCenter,
+          mapType = _this$state5.mapType,
+          mapStyle = _this$state5.mapStyle,
+          mapVisiblePoints = _this$state5.mapVisiblePoints,
+          setVisiblePoints = _this$state5.setVisiblePoints,
+          isDoEdit = _this$state5.isDoEdit,
+          editGraphicId = _this$state5.editGraphicId,
+          isEndEdit = _this$state5.isEndEdit,
+          modal1Visible = _this$state5.modal1Visible,
+          drawGraphID = _this$state5.drawGraphID,
+          isShowOther = _this$state5.isShowOther,
+          otherText = _this$state5.otherText,
+          isShowOtherGraph = _this$state5.isShowOtherGraph,
+          editGraphic = _this$state5.editGraphic,
+          graphicType = _this$state5.graphicType,
+          graphicValue = _this$state5.graphicValue,
+          olProps = _this$state5.olProps,
+          isChangeMapType = _this$state5.isChangeMapType,
+          currentMap = _this$state5.currentMap,
+          showControl = _this$state5.showControl,
+          coverageType = _this$state5.coverageType,
+          customNodes = _this$state5.customNodes,
+          language = _this$state5.language;
       var InputProps = {
         style: {
           'width': '200px'
@@ -882,19 +949,19 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
         isDraw: this.state.isDraw,
         isCloseDraw: this.state.isCloseDraw,
         drawEnd: function drawEnd(obj) {
-          _this7.isDrawStatus = false;
-          _this7.isClickMap = false;
+          _this8.isDrawStatus = false;
+          _this8.isClickMap = false;
           var objparam = {
-            graphicValue: _this7.multiDraw ? [].concat(_toConsumableArray(graphicValue || []), [obj]) : obj,
-            isDoEdit: !_this7.multiDraw,
-            isDraw: _this7.multiDraw
+            graphicValue: _this8.multiDraw ? [].concat(_toConsumableArray(graphicValue || []), [obj]) : obj,
+            isDoEdit: !_this8.multiDraw,
+            isDraw: _this8.multiDraw
           };
 
-          if (!_this7.multiDraw && (obj.geometryType == 'polyline' || obj.geometryType == 'polygon')) {
+          if (!_this8.multiDraw && (obj.geometryType == 'polyline' || obj.geometryType == 'polygon')) {
             objparam.editGraphicId = obj.id;
           }
 
-          _this7.setState(objparam);
+          _this8.setState(objparam);
         },
         mapDraw: {
           geometryType: this.state.graphicType,
@@ -992,8 +1059,8 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
         },
         maskClosable: false,
         onModalResize: function onModalResize() {
-          if (_this7.state.mapType == 'olmap') {
-            _this7.map.updateSize();
+          if (_this8.state.mapType == 'olmap') {
+            _this8.map.updateSize();
           }
         },
         onCancel: this.closeModal.bind(this),
@@ -1002,13 +1069,13 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
           type: "primary",
           onClick: function onClick() {
-            if (_this7.multiDraw && _this7.state.isDoEdit && !_this7.state.isEndEdit) {
-              _this7.continueDraw(_this7.callback.bind(_this7));
+            if (_this8.multiDraw && _this8.state.isDoEdit && !_this8.state.isEndEdit) {
+              _this8.continueDraw(_this8.callback.bind(_this8));
 
               return;
             }
 
-            _this7.callback();
+            _this8.callback();
           },
           icon: getIcon('check')
         }, TextEnum.footerConfirmBtnText), /*#__PURE__*/_react["default"].createElement(_button["default"], {
@@ -1038,10 +1105,10 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
       }, TextEnum.searchRelocateBtnText) : null, this.state.graphicType != 'point' ? /*#__PURE__*/_react["default"].createElement(_button["default"], {
         disabled: this.isDrawStatus,
         onClick: function onClick() {
-          _this7.isDrawStatus = true;
+          _this8.isDrawStatus = true;
 
-          if (_this7.multiDraw) {
-            _this7.clickable = false;
+          if (_this8.multiDraw) {
+            _this8.clickable = false;
             graphicValue === null || graphicValue === void 0 ? void 0 : graphicValue.forEach(function (item) {
               return t.map.removeGraphic(item.id, 'draw');
             });
@@ -1049,21 +1116,21 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
               return t.map.removeGraphic(item.id, 'draw');
             });
 
-            _this7.setState({
+            _this8.setState({
               isDraw: false,
               isCloseDraw: true,
               isEndEdit: false,
               graphicValue: null,
               editGraphic: null
             }, function () {
-              _this7.setState({
+              _this8.setState({
                 isDraw: true,
                 isCloseDraw: false,
                 isEndEdit: true
               });
             });
           } else {
-            _this7.setState({
+            _this8.setState({
               isDraw: true,
               graphicValue: null,
               editGraphic: null,
@@ -1076,7 +1143,7 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
             });
           }
 
-          _this7.callback('editDraw');
+          _this8.callback('editDraw');
         },
         icon: getIcon('edit')
       }, TextEnum.searchRedrawBtnText) : null, this.multiDraw && /*#__PURE__*/_react["default"].createElement(_button["default"], {
@@ -1088,14 +1155,14 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
       }, TextEnum.searchEditGraphicBtnText), /*#__PURE__*/_react["default"].createElement(_button["default"], {
         onClick: this.setFitView.bind(this),
         icon: getIcon('sync')
-      }, TextEnum.searchGlobalBtnText)), /*#__PURE__*/_react["default"].createElement("div", {
+      }, TextEnum.searchGlobalBtnText), !this.multiDraw && this.map && this.computeGraphic()), /*#__PURE__*/_react["default"].createElement("div", {
         className: styles.top_right
       }, typeof customNodes == 'function' && customNodes(t.map), isShowOther ? /*#__PURE__*/_react["default"].createElement("div", {
         className: styles.otherModal
       }, /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
         checked: isShowOtherGraph,
         onChange: function onChange(e) {
-          _this7.setState({
+          _this8.setState({
             isShowOtherGraph: e.target.checked
           });
         }
@@ -1106,7 +1173,7 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
             var key = _ref.key;
             console.log(key);
 
-            _this7.setState({
+            _this8.setState({
               coverageType: key
             });
           },
@@ -1141,7 +1208,7 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
         className: styles.title
       }, TextEnum.labelSearchResultText), /*#__PURE__*/_react["default"].createElement("div", {
         onClick: function onClick() {
-          return _this7.showOrhidden(false);
+          return _this8.showOrhidden(false);
         },
         className: styles.btn
       }, /*#__PURE__*/_react["default"].createElement(_default2.VtxMapIcon, {
@@ -1152,13 +1219,13 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: index,
           onClick: function onClick() {
-            return _this7.chooseAddress(item.id);
+            return _this8.chooseAddress(item.id);
           },
           className: "".concat(styles.lists, " ").concat(item.isSelect ? styles.select : '')
         }, item.title);
       }))), /*#__PURE__*/_react["default"].createElement("div", {
         onClick: function onClick() {
-          return _this7.showOrhidden(true);
+          return _this8.showOrhidden(true);
         },
         className: "".concat(styles.btn, " ").concat(!isShowList ? styles.show : styles.hidden)
       }, /*#__PURE__*/_react["default"].createElement(_default2.VtxMapIcon, {
@@ -1167,7 +1234,7 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
         className: styles.content_right
       }, /*#__PURE__*/_react["default"].createElement(_VtxMap.VtxMap, _extends({
         getMapInstance: function getMapInstance(map) {
-          if (map) _this7.map = map;
+          if (map) _this8.map = map;
         },
         mapType: mapType,
         mapStyle: mapStyle,
@@ -1203,25 +1270,25 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "initSearchMap",
     value: function initSearchMap() {
-      var _this8 = this;
+      var _this9 = this;
 
       if (this.props.modal1Visible
       /*&& !this.state.locationPoint[0]*/
       ) {
         if (this.map) {
           this.map.loadMapComplete.then(function () {
-            if (!_this8.mapLoaded) {
-              var _this8$props$editPara, _this8$props$editPara2;
+            if (!_this9.mapLoaded) {
+              var _this9$props$editPara, _this9$props$editPara2;
 
-              _this8.mapLoaded = true;
+              _this9.mapLoaded = true;
 
-              _this8.drawLocationPoint();
+              _this9.drawLocationPoint();
 
-              if ((_this8$props$editPara = _this8.props.editParam) !== null && _this8$props$editPara !== void 0 && _this8$props$editPara.rings || (_this8$props$editPara2 = _this8.props.editParam) !== null && _this8$props$editPara2 !== void 0 && _this8$props$editPara2.paths) {
+              if ((_this9$props$editPara = _this9.props.editParam) !== null && _this9$props$editPara !== void 0 && _this9$props$editPara.rings || (_this9$props$editPara2 = _this9.props.editParam) !== null && _this9$props$editPara2 !== void 0 && _this9$props$editPara2.paths) {
                 var timer = setTimeout(function () {
-                  var _this8$props$editPara3, _this8$props$editPara4;
+                  var _this9$props$editPara3, _this9$props$editPara4;
 
-                  _this8.map.fitView(((_this8$props$editPara3 = _this8.props.editParam) === null || _this8$props$editPara3 === void 0 ? void 0 : _this8$props$editPara3.rings) || ((_this8$props$editPara4 = _this8.props.editParam) === null || _this8$props$editPara4 === void 0 ? void 0 : _this8$props$editPara4.paths) || []);
+                  _this9.map.fitView(((_this9$props$editPara3 = _this9.props.editParam) === null || _this9$props$editPara3 === void 0 ? void 0 : _this9$props$editPara3.rings) || ((_this9$props$editPara4 = _this9.props.editParam) === null || _this9$props$editPara4 === void 0 ? void 0 : _this9$props$editPara4.paths) || []);
 
                   clearTimeout(timer);
                 }, 100);
@@ -1246,7 +1313,7 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _this9 = this;
+      var _this10 = this;
 
       var t = this;
       this.isClickMap = false;
@@ -1284,49 +1351,49 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
       setTimeout(function () {
         //实现2+次进入时,清理数据
         if (nextProps.modal1Visible) {
-          _this9.clearList();
+          _this10.clearList();
 
-          _this9.setState({
+          _this10.setState({
             setZoomLevel: true
           }, function () {
-            _this9.setState({
+            _this10.setState({
               setZoomLevel: false
             });
           });
 
-          if (!!_this9.map && !!_this9.state.locationPoint[0] && nextProps.mapCenter && !!nextProps.mapCenter[0]) {
-            if (_this9.map.getGraphic('locationPoint')) {
+          if (!!_this10.map && !!_this10.state.locationPoint[0] && nextProps.mapCenter && !!nextProps.mapCenter[0]) {
+            if (_this10.map.getGraphic('locationPoint')) {
               switch (nextProps.mapType) {
                 case 'bmap':
-                  _this9.map.getGraphic('locationPoint').mapLayer.setPosition(new BMap.Point(nextProps.mapCenter[0], nextProps.mapCenter[1]));
+                  _this10.map.getGraphic('locationPoint').mapLayer.setPosition(new BMap.Point(nextProps.mapCenter[0], nextProps.mapCenter[1]));
 
                   break;
 
                 case 'amap':
-                  _this9.map.getGraphic('locationPoint').mapLayer.setPosition(new AMap.LngLat(nextProps.mapCenter[0], nextProps.mapCenter[1]));
+                  _this10.map.getGraphic('locationPoint').mapLayer.setPosition(new AMap.LngLat(nextProps.mapCenter[0], nextProps.mapCenter[1]));
 
                   break;
 
                 case 'tmap':
-                  _this9.map.getGraphic('locationPoint').mapLayer.setLngLat(new T.LngLat(nextProps.mapCenter[0], nextProps.mapCenter[1]));
+                  _this10.map.getGraphic('locationPoint').mapLayer.setLngLat(new T.LngLat(nextProps.mapCenter[0], nextProps.mapCenter[1]));
 
                   break;
 
                 case 'gmap':
-                  _this9.map.getGraphic('locationPoint').mapLayer.geometry.setLatitude(nextProps.mapCenter[1]);
+                  _this10.map.getGraphic('locationPoint').mapLayer.geometry.setLatitude(nextProps.mapCenter[1]);
 
-                  _this9.map.getGraphic('locationPoint').mapLayer.geometry.setLongitude(nextProps.mapCenter[0]);
+                  _this10.map.getGraphic('locationPoint').mapLayer.geometry.setLongitude(nextProps.mapCenter[0]);
 
-                  _this9.map.state.gis.graphics.refresh();
+                  _this10.map.state.gis.graphics.refresh();
 
                 case 'olMap':
-                  _this9.map.getGraphic('locationPoint').mapLayer.setGeometry(new ol.geom.Point(nextProps.mapCenter));
+                  _this10.map.getGraphic('locationPoint').mapLayer.setGeometry(new ol.geom.Point(nextProps.mapCenter));
 
                   break;
               }
             }
 
-            _this9.map.setCenter(nextProps.mapCenter);
+            _this10.map.setCenter(nextProps.mapCenter);
           }
         }
       }, 100);
@@ -1348,5 +1415,10 @@ var VtxSearchMap = /*#__PURE__*/function (_React$Component) {
 
 var _default = VtxSearchMap;
 exports["default"] = _default;
+
+function formatNumber(num) {
+  return Number(num).toFixed(2);
+}
+
 module.exports = exports["default"];
 //# sourceMappingURL=VtxSearchMap.js.map