@vtx/map 1.1.11 → 1.1.14

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

@@ -868,6 +868,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           scale: drawParam.parameter.scale || 1
         })
       });
+      var geometryFunction;
 
       switch (drawParam.geometryType) {
         case 'point':
@@ -909,6 +910,11 @@ 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({
@@ -927,7 +933,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       if (!t.drawToolbar) {
         t.drawToolbar = new ol.interaction.Draw({
           source: t.drawSource,
-          type: type // style: style
+          type: type,
+          geometryFunction: geometryFunction // style: style
 
         });
         gis.addInteraction(t.drawToolbar);
@@ -1056,14 +1063,42 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             };
           }
 
-          if (t.drawParam.geometryType == 'circle') {
-            var center = e.feature.getGeometry().getCenter(); // let radius = e.feature.getGeometry().getRadius();
+          if (t.drawParam.geometryType == 'rectangle') {
+            var _path3 = e.feature.getGeometry().getCoordinates()[0];
+            t.addPolygon([{
+              id: t.drawParam.data.id,
+              rings: _path3,
+              config: _objectSpread({}, t.drawParam.parameter)
+            }], t.drawParam.geometryType); //处理线返回参数
+
+            var _t$dealData5 = t.dealData(_path3),
+                _lnglatAry3 = _t$dealData5.lnglatAry,
+                _extent4 = _t$dealData5._extent;
 
-            var sketchCoords_ = e.target.sketchCoords_[0];
-            var sketchCoords_2 = e.target.sketchCoords_[1];
-            var radius = ol.sphere.getDistance(sketchCoords_, sketchCoords_2); // let metersPerUnit = gis.getView().getProjection().getMetersPerUnit();
-            // let circleRadius =  radius / metersPerUnit;
+            param = {
+              lnglatAry: _lnglatAry3,
+              id: t.drawParam.data.id,
+              geometry: _objectSpread(_objectSpread({}, e.geometry), {}, {
+                rings: _path3,
+                type: t.drawParam.geometryType,
+                _extent: _extent4
+              }),
+              attributes: {
+                id: t.drawParam.data.id,
+                config: _objectSpread({}, t.drawParam.parameter)
+              },
+              area: (0, _MapToolFunction.getPolygonArea)(_path3),
+              geometryType: t.drawParam.geometryType,
+              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);
             t.addCircle([{
               id: t.drawParam.data.id,
               longitude: center[0],
@@ -1337,10 +1372,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       }
     } //将制定图元展示在视野内 (强制改变地图中心位置)
 
-    /*
-        参数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']
     */
 
   }, {
@@ -1663,12 +1698,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         item.value.clear();
       });
     }
-    /*
-    * 添加信息窗口
-    * params
-    * @position: Array[longitude,latitude]
-    * @content: String|HTML
-    * @close: boolean
+    /*
+    * 添加信息窗口
+    * params
+    * @position: Array[longitude,latitude]
+    * @content: String|HTML
+    * @close: boolean
     */
 
   }, {
@@ -2719,8 +2754,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
     value: function setAreaRestriction(areaRestriction) {
       var t = this;
 
-      var _t$dealData5 = t.dealData(areaRestriction),
-          _et = _t$dealData5._extent;
+      var _t$dealData6 = t.dealData(areaRestriction),
+          _et = _t$dealData6._extent;
 
       t.areaRestriction = t.state.gis.getView().setProperties({
         extent: [_et.xmax, _et.ymax, _et.xmin, _et.ymin]
@@ -2817,7 +2852,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
       function clusterMemberStyle(clusterMember) {
         var style = clusterMember.getStyle();
-        var image = style.getImage();
+        var image = style && style.getImage ? style.getImage() : null;
         return new ol.style.Style({
           geometry: clusterMember.getGeometry(),
           image: image
@@ -3445,10 +3480,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           isClearAll = nextProps.isClearAll; // 等待地图加载
 
       if (!t.state.mapCreated) return;
-      /*点数据处理
-          pointData[2]相同的点,执行刷新
-          pointData[1]的数据在idsForGraphicId中不存在的,执行新增
-          pointData[0]数据中多余的id,执行删除
+      /*点数据处理
+          pointData[2]相同的点,执行刷新
+          pointData[1]的数据在idsForGraphicId中不存在的,执行新增
+          pointData[0]数据中多余的id,执行删除
       */
 
       if (mapPoints instanceof Array && t.props.mapPoints instanceof Array && !t.deepEqual(mapPoints, t.props.mapPoints)) {
@@ -3497,9 +3532,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
         t.updatePoint([].concat(_toConsumableArray(upds), _toConsumableArray(otherupds)));
       }
-      /*
-          线数据处理
-          先全删除,再新增
+      /*
+          线数据处理
+          先全删除,再新增
       */
 
 
@@ -3549,9 +3584,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
         t.updateLine([].concat(_toConsumableArray(_upds), _toConsumableArray(_otherupds)));
       }
-      /*
-          面数据处理
-          先全删除,再新增
+      /*
+          面数据处理
+          先全删除,再新增
       */
 
 
@@ -3601,9 +3636,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
         t.updatePolygon([].concat(_toConsumableArray(_upds2), _toConsumableArray(_otherupds2)));
       }
-      /*
-          圆数据处理
-          先全删除,再新增
+      /*
+          圆数据处理
+          先全删除,再新增
       */
 
 
@@ -3747,12 +3782,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         var obj = t.getMapExtent();
         obj.e = e;
         obj.clickLngLat = {
-          lng: (e.mapPoint || {}).x,
-          lat: (e.mapPoint || {}).y
+          lng: e.coordinate ? e.coordinate[0] : undefined,
+          lat: e.coordinate ? e.coordinate[1] : undefined
         };
         obj.pixel = {
-          x: (e.screenPoint || {}).x,
-          y: (e.screenPoint || {}).y
+          x: e.pixel ? e.pixel[0] : undefined,
+          y: e.pixel ? e.pixel[1] : undefined
         };
         t.props.clickMap(obj);
       }