@vtx/map 1.1.10 → 1.1.13

package/lib/VtxMap/OlMap/Map.css

@@ -124,3 +124,46 @@
 .ol-tooltip-static:before {
   border-top-color: #ffcc33;
 }
+.ol-popup {
+  position: absolute;
+  background-color: white;
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #cccccc;
+  bottom: 12px;
+  left: -50px;
+  min-width: 280px;
+}
+.ol-popup:after,
+.ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol-popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+.ol-popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 2px;
+  right: 8px;
+}
+.ol-popup-closer:after {
+  content: "✖";
+}

package/lib/VtxMap/OlMap/Map.js

@@ -513,7 +513,19 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         t.setCenter(gt);
       };
 
-      t.state.gis["refresh"] = function (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["refresh"] = function () {
         t.refresh();
       };
     } // 设置中心点
@@ -856,6 +868,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           scale: drawParam.parameter.scale || 1
         })
       });
+      var geometryFunction;
 
       switch (drawParam.geometryType) {
         case 'point':
@@ -897,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({
@@ -915,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);
@@ -1044,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],
@@ -1650,6 +1697,43 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       t.morepoints.map(function (item, index) {
         item.value.clear();
       });
+    }
+    /*
+    * 添加信息窗口
+    * params
+    * @position: Array[longitude,latitude]
+    * @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,
+        innerHTML: params.content,
+        close: params.close
+      });
+      t.popupWindow.showPopup();
+    }
+  }, {
+    key: "hideInfoWindow",
+    value: function hideInfoWindow() {
+      var t = this;
+
+      if (t.popupWindow) {
+        t.popupWindow.removePopup();
+      }
+
+      t.popupWindow = null;
     } // 添加点
 
   }, {
@@ -1718,7 +1802,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           });
           t.state.gis.addOverlay(pop);
         } else {
-          canvasDataURL(item.url || "".concat(_default2["default"].mapServerURL, "/images/defaultMarker.png"), {
+          // item.url || `${configUrl.mapServerURL}/images/defaultMarker.png`,
+          canvasDataURL(item.url || require("../images/defaultMarker.png"), {
             width: cg.width,
             height: cg.height
           }, function (base64) {
@@ -1730,7 +1815,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               anchor: [-cg.markerContentX, -cg.markerContentY],
               anchorXUnits: 'pixels',
               anchorYUnits: 'pixels',
-              // src: item.url || `${configUrl.mapServerURL}/images/defaultMarker.png`,
               img: myImage,
               imgSize: [cg.width, cg.height],
               opacity: cg.opacity,
@@ -1874,7 +1958,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             overlay.setPosition([item.longitude, item.latitude]);
             t.state.gis.changed();
           } else {
-            canvasDataURL(item.url || "".concat(_default2["default"].mapServerURL, "/images/defaultMarker.png"), {
+            canvasDataURL(item.url || require("../images/defaultMarker.png"), {
               width: cg.width,
               height: cg.height
             }, function (base64) {
@@ -2670,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]
@@ -2768,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
@@ -3698,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);
       }
@@ -3953,6 +4037,83 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 var _default = OlMap;
 exports["default"] = _default;
 
+var Popup = /*#__PURE__*/function (_React$Component2) {
+  _inherits(Popup, _React$Component2);
+
+  var _super2 = _createSuper(Popup);
+
+  function Popup(props) {
+    var _this8;
+
+    _classCallCheck(this, Popup);
+
+    _this8 = _super2.call(this);
+    _this8.map = props.map;
+    _this8.position = props.position;
+    _this8.overlay = null;
+    _this8.container = null;
+    _this8.innerHTML = props.innerHTML;
+    _this8.closeble = props.close;
+    return _this8;
+  } // 弹出框
+
+
+  _createClass(Popup, [{
+    key: "showPopup",
+    value: function showPopup() {
+      var t = this;
+      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";
+        close.addEventListener("click", function (e) {
+          t.removePopup();
+        });
+        t.container.appendChild(close);
+      }
+
+      var content = document.createElement("div");
+      t.container.appendChild(content);
+
+      if (t.overlay) {} else {
+        // 创建Overlay弹出层绑定DOM
+        t.overlay = new ol.Overlay({
+          element: t.container,
+          autoPan: {
+            animation: {
+              duration: 250
+            }
+          }
+        }); // 添加到map
+
+        t.map.addOverlay(t.overlay);
+      } // 弹出层内容
+
+
+      content.innerHTML = t.innerHTML; // 设置弹出层位置即可出现
+
+      t.overlay.setPosition(t.position);
+    } // 清除弹出框
+
+  }, {
+    key: "removePopup",
+    value: function removePopup() {
+      if (this.overlay) {
+        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})$/;