@vtx/map 1.1.12 → 1.1.15

package/lib/VtxMap/OlMap/Map.js

@@ -446,13 +446,15 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
       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({
         target: mapId.toString(),
         view: new ol.View({
-          center: mapCenter && mapCenter instanceof Array && mapCenter.length == 2 ? mapCenter : [116.400433, 39.906705],
-          //中心点
+          center: center,
           zoom: mapZoomLevel || 10,
           projection: projection,
           minZoom: minZoom,
@@ -466,8 +468,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       }); // 基本地图视图
 
       t.viewer = new ol.View({
-        center: mapCenter && mapCenter instanceof Array && mapCenter.length == 2 ? mapCenter : [116.400433, 39.906705],
-        //中心点
+        center: center,
         zoom: mapZoomLevel || 10,
         projection: projection,
         minZoom: minZoom,
@@ -868,6 +869,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           scale: drawParam.parameter.scale || 1
         })
       });
+      var geometryFunction;
 
       switch (drawParam.geometryType) {
         case 'point':
@@ -909,6 +911,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 +934,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);
@@ -945,6 +953,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
                 lng = _gc$flatCoordinates[0],
                 lat = _gc$flatCoordinates[1];
 
+            gc.x = lng;
+            gc.y = lat;
             t.addPoint([{
               id: t.drawParam.data.id,
               longitude: lng,
@@ -1056,14 +1066,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 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;
+            var _t$dealData5 = t.dealData(_path3),
+                _lnglatAry3 = _t$dealData5.lnglatAry,
+                _extent4 = _t$dealData5._extent;
 
+            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],
@@ -1726,7 +1764,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
 
         var feature = new ol.Feature({
-          geometry: new ol.geom.Point([item.longitude, item.latitude]),
+          geometry: new ol.geom.Point([parseFloat(item.longitude), parseFloat(item.latitude)]),
           name: item.name,
           id: item.id,
           params: _objectSpread({}, item)
@@ -1757,7 +1795,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
           var pop = new ol.Overlay({
             id: item.id,
-            position: [item.longitude, item.latitude],
+            position: [parseFloat(item.longitude), parseFloat(item.latitude)],
             positioning: 'center-center',
             element: nodes,
             autoPanMargin: 20,
@@ -1862,8 +1900,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           geometryType: 'point',
           geometry: {
             type: 'point',
-            x: item.longitude,
-            y: item.latitude
+            x: parseFloat(item.longitude),
+            y: parseFloat(item.latitude)
           },
           source: source
         });
@@ -1920,7 +1958,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             var overlay = t.state.gis.getOverlayById(item.id);
             var nodes = t.parseDom(item.markerContent)[0];
             overlay.setElement(nodes);
-            overlay.setPosition([item.longitude, item.latitude]);
+            overlay.setPosition([parseFloat(item.longitude), parseFloat(item.latitude)]);
             t.state.gis.changed();
           } else {
             canvasDataURL(item.url || require("../images/defaultMarker.png"), {
@@ -1979,7 +2017,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             }
           }
 
-          gc.setGeometry(new ol.geom.Point([item.longitude, item.latitude]));
+          gc.setGeometry(new ol.geom.Point([parseFloat(item.longitude), parseFloat(item.latitude)]));
 
           _this3.GM.setGraphicParam(item.id, {
             attributes: _objectSpread(_objectSpread({}, item), {}, {
@@ -1988,8 +2026,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             geometryType: 'point',
             geometry: {
               type: 'point',
-              x: item.longitude,
-              y: item.latitude
+              x: parseFloat(item.longitude),
+              y: parseFloat(item.latitude)
             },
             source: gp.source
           });
@@ -2719,8 +2757,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 +2855,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
@@ -3747,12 +3785,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);
       }