@vtx/map 1.1.9 → 1.1.12

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

@@ -496,6 +496,38 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
         t.state.gis.addLayer(_layer3);
       }
+
+      t.initPropsForUser();
+    } // 初始化对外方法
+
+  }, {
+    key: "initPropsForUser",
+    value: function initPropsForUser() {
+      var t = this;
+
+      t.state.gis["getCenter"] = function () {
+        return t.getCenter();
+      };
+
+      t.state.gis["setCenter"] = function (gt) {
+        t.setCenter(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();
+      };
     } // 设置中心点
 
   }, {
@@ -1630,6 +1662,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;
     } // 添加点
 
   }, {
@@ -1682,12 +1751,6 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
         var style, icon, txt;
         var myImage = new Image(cg.width, cg.height);
-        canvasDataURL(item.url || "".concat(_default2["default"].mapServerURL, "/images/defaultMarker.png"), {
-          width: cg.width,
-          height: cg.height
-        }, function (base64) {
-          myImage.src = base64;
-        });
 
         if (!!item.markerContent) {
           var nodes = t.parseDom(item.markerContent)[0]; // 创建地图自定义覆盖物
@@ -1704,13 +1767,19 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           });
           t.state.gis.addOverlay(pop);
         } else {
-          // 创建地图要素图标样式
+          // item.url || `${configUrl.mapServerURL}/images/defaultMarker.png`,
+          canvasDataURL(item.url || require("../images/defaultMarker.png"), {
+            width: cg.width,
+            height: cg.height
+          }, function (base64) {
+            myImage.src = base64;
+          }); // 创建地图要素图标样式
+
           style = new ol.style.Style({
             image: new ol.style.Icon({
               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,
@@ -1843,18 +1912,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             cg = _objectSpread(_objectSpread({}, cg), item.config);
           }
 
-          var fStyle = gc.getStyle();
-          var fText = fStyle.getText();
-
           var text, icon, _marker;
 
           var myImage = new Image(cg.width, cg.height);
-          canvasDataURL(item.url || "".concat(_default2["default"].mapServerURL, "/images/defaultMarker.png"), {
-            width: cg.width,
-            height: cg.height
-          }, function (base64) {
-            myImage.src = base64;
-          });
 
           if (item.markerContent) {
             var overlay = t.state.gis.getOverlayById(item.id);
@@ -1863,6 +1923,12 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             overlay.setPosition([item.longitude, item.latitude]);
             t.state.gis.changed();
           } else {
+            canvasDataURL(item.url || require("../images/defaultMarker.png"), {
+              width: cg.width,
+              height: cg.height
+            }, function (base64) {
+              myImage.src = base64;
+            });
             icon = new ol.style.Icon({
               anchor: [-cg.markerContentX, -cg.markerContentY],
               anchorXUnits: 'pixels',
@@ -3936,6 +4002,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})$/;