@vtx/map 1.1.15 → 1.1.17

package/lib/VtxMap/OlMap/Map.css

@@ -167,3 +167,63 @@
 .ol-popup-closer:after {
   content: "✖";
 }
+.ol-scale-line {
+  background-color: transparent;
+  width: 113px;
+  height: 30px;
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
+  border-bottom: 1px solid #000;
+  position: absolute !important;
+  bottom: 20px !important;
+  right: 20px !important;
+  text-align: center;
+}
+.ol-scale-line-tl {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background-color: transparent;
+  width: 113px;
+  height: 30px;
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
+  border-bottom: 1px solid #000;
+  text-align: center;
+}
+.ol-scale-line-bl {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  background-color: transparent;
+  width: 113px;
+  height: 30px;
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
+  border-bottom: 1px solid #000;
+  text-align: center;
+}
+.ol-scale-line-tr {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background-color: transparent;
+  width: 113px;
+  height: 30px;
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
+  border-bottom: 1px solid #000;
+  text-align: center;
+}
+.ol-scale-line-bl {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  background-color: transparent;
+  width: 113px;
+  height: 30px;
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
+  border-bottom: 1px solid #000;
+  text-align: center;
+}

package/lib/VtxMap/OlMap/Map.js

@@ -120,6 +120,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       sketch: null,
       listener: null
     };
+    _this.scaleControl = null;
     _this.pointLayers = [];
     _this.mouseNowPosition = {
       x: 0,
@@ -295,7 +296,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
 
         if (t.props.showControl) {
-          t.showControl();
+          t.showControl(t.props);
         } // 画热力图
 
 
@@ -555,6 +556,19 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           duration: 2000
         });
       }
+    } //设置地图缩放层级
+
+  }, {
+    key: "setZoomLevel",
+    value: function setZoomLevel(zoom) {
+      var t = this;
+      var z = t.state.gis.getView().getZoom();
+
+      if (z == zoom) {
+        return false;
+      }
+
+      t.state.gis.getView().setZoom(zoom);
     } //获取当前中心点
 
   }, {
@@ -1791,7 +1805,13 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         var myImage = new Image(cg.width, cg.height);
 
         if (!!item.markerContent) {
-          var nodes = t.parseDom(item.markerContent)[0]; // 创建地图自定义覆盖物
+          var nodes = t.parseDom(item.markerContent)[0]; // 自定义图层需要把事件加在dom上
+
+          nodes.addEventListener("click", function (e) {
+            t.clickGraphic(item.id, _objectSpread(_objectSpread({}, e), {}, {
+              pixel: [e.clientX, e.clientY]
+            }));
+          }); // 创建地图自定义覆盖物
 
           var pop = new ol.Overlay({
             id: item.id,
@@ -1827,7 +1847,43 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         }
 
         if (!!item.canShowLabel && item.canShowLabel) {
-          // 创建地图要素图标样式
+          var textStyle = _objectSpread({
+            textAlign: 'center',
+            //对齐方式
+            textBaseline: 'middle',
+            //文本基线
+            font: 'normal 12px 微软雅黑',
+            //字体样式
+            text: cg.labelContent,
+            //文本内容
+            offsetX: cg.labelPixelX,
+            // x轴偏置
+            offsetY: cg.labelPixelY,
+            // Y轴偏置
+            fill: new ol.style.Fill({
+              //填充样式
+              color: '#1890ff'
+            }),
+            backgroundFill: new ol.style.Fill({
+              // 填充背景
+              color: 'rgba(255, 255, 255, 1)'
+            }),
+            padding: [2, 5, 2, 5]
+          }, cg.labelStyle || {});
+
+          if (cg.labelStyle && cg.labelStyle.fill) {
+            textStyle['fill'] = new ol.style.Fill({
+              color: cg.labelStyle.fill
+            });
+          }
+
+          if (cg.labelStyle && cg.labelStyle.backgroundFill) {
+            textStyle['backgroundFill'] = new ol.style.Fill({
+              color: cg.labelStyle.backgroundFill
+            });
+          } // 创建地图要素图标样式
+
+
           style = new ol.style.Style({
             image: new ol.style.Icon({
               anchor: [-cg.markerContentX, -cg.markerContentY],
@@ -1840,29 +1896,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
               scale: cg.scale || 1
             }),
             // 创建地图要素文字样式
-            text: new ol.style.Text({
-              textAlign: 'center',
-              //对齐方式
-              textBaseline: 'middle',
-              //文本基线
-              font: 'normal 12px 微软雅黑',
-              //字体样式
-              text: cg.labelContent,
-              //文本内容
-              offsetX: cg.labelPixelX,
-              // x轴偏置
-              offsetY: cg.labelPixelY,
-              // Y轴偏置
-              fill: new ol.style.Fill({
-                //填充样式
-                color: 'rgba(0,0,0,0.8)'
-              }),
-              backgroundFill: new ol.style.Fill({
-                // 填充背景
-                color: 'rgba(255, 255, 255, 0.3)'
-              }),
-              padding: [2, 5, 2, 5]
-            })
+            text: new ol.style.Text(textStyle)
           });
         }
 
@@ -1957,6 +1991,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           if (item.markerContent) {
             var overlay = t.state.gis.getOverlayById(item.id);
             var nodes = t.parseDom(item.markerContent)[0];
+            nodes.addEventListener("click", function (e) {
+              t.clickGraphic(item.id, _objectSpread(_objectSpread({}, e), {}, {
+                pixel: [e.clientX, e.clientY]
+              }));
+            });
             overlay.setElement(nodes);
             overlay.setPosition([parseFloat(item.longitude), parseFloat(item.latitude)]);
             t.state.gis.changed();
@@ -1980,7 +2019,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             });
 
             if (item.canShowLabel) {
-              text = new ol.style.Text({
+              var textStyle = _objectSpread({
                 textAlign: 'center',
                 //对齐方式
                 textBaseline: 'middle',
@@ -1995,14 +2034,28 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
                 // Y轴偏置
                 fill: new ol.style.Fill({
                   //填充样式
-                  color: 'rgba(0,0,0,0.8)'
+                  color: '#1890ff'
                 }),
                 backgroundFill: new ol.style.Fill({
                   // 填充背景
-                  color: 'rgba(255, 255, 255, 0.3)'
+                  color: 'rgba(255, 255, 255, 1)'
                 }),
                 padding: [2, 5, 2, 5]
-              });
+              }, cg.labelStyle || {});
+
+              if (cg.labelStyle && cg.labelStyle.fill) {
+                textStyle['fill'] = new ol.style.Fill({
+                  color: cg.labelStyle.fill
+                });
+              }
+
+              if (cg.labelStyle && cg.labelStyle.backgroundFill) {
+                textStyle['backgroundFill'] = new ol.style.Fill({
+                  color: cg.labelStyle.backgroundFill
+                });
+              }
+
+              text = new ol.style.Text(textStyle);
             }
 
             if (text) {
@@ -2540,6 +2593,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         //清除对应id的图元数据缓存
 
         t.GM.removeGraphic(id);
+        t.GM.removeGraphicParam(id);
+
+        if (t.state.gis.getOverlayById(id)) {
+          t.state.gis.removeOverlay(t.state.gis.getOverlayById(id));
+        }
       } else {
         return false;
       }
@@ -2723,33 +2781,52 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
   }, {
     key: "showControl",
-    value: function showControl() {
-      var t = this,
-          type = '',
-          location = {
-        top: 20,
-        left: 20
-      },
-          ls = {
-        top: 20,
-        left: 60
-      };
+    value: function showControl(props) {
+      var t = this;
       var gis = t.state.gis;
+      var config = props.showControl;
 
-      var _gis$getSize3 = gis.getSize(),
-          _gis$getSize4 = _slicedToArray(_gis$getSize3, 2),
-          w = _gis$getSize4[0],
-          h = _gis$getSize4[1];
-
-      var scaleControl = new ol.control.ScaleLine({
-        units: 'metric' //设置度量单位
+      if (t.scaleControl) {
+        gis.removeControl(t.scaleControl);
+      }
 
+      t.scaleControl = new ol.control.ScaleLine({
+        units: 'metric',
+        //设置度量单位
+        className: "ol-scale-line-".concat(config.location)
       });
-      var zoomControl = new ol.control.Zoom({});
-      var ZoomSliderControl = new ol.control.ZoomSlider({});
-      gis.addControl(scaleControl);
-      gis.addControl(zoomControl);
-      gis.addControl(ZoomSliderControl);
+      gis.addControl(t.scaleControl);
+      setTimeout(function () {
+        if (config.location == 'tl') {
+          $("div.ol-scale-line-".concat(config.location)).css({
+            position: 'absolute',
+            left: config.offset ? config.offset[0] : 0 + 65,
+            top: config.offset ? config.offset[1] : 0,
+            textAlign: 'center'
+          });
+        } else if (config.location == 'bl') {
+          $("div.ol-scale-line-".concat(config.location)).css({
+            position: 'absolute',
+            left: config.offset ? config.offset[0] : 0 + 65,
+            bottom: config.offset ? config.offset[1] : 0,
+            textAlign: 'center'
+          });
+        } else if (config.location == 'tr') {
+          $("div.ol-scale-line-".concat(config.location)).css({
+            position: 'absolute',
+            right: config.offset ? config.offset[0] : 0 + 65,
+            top: config.offset ? config.offset[1] : 0,
+            textAlign: 'center'
+          });
+        } else if (config.location == 'br') {
+          $("div.ol-scale-line-".concat(config.location)).css({
+            position: 'absolute',
+            right: config.offset ? config.offset[0] : 0 + 65,
+            bottom: config.offset ? config.offset[1] : 0,
+            textAlign: 'center'
+          });
+        }
+      }, 20);
     } //设置区域限制
 
   }, {
@@ -3020,7 +3097,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "calculatePointsDistance",
     value: function calculatePointsDistance(fp, ep) {
-      return Math.round(new ol.sphere.getDistance(fp, ep));
+      console.log(fp, ep);
+      var distance = ol.sphere.getDistance(fp, ep);
+      console.log(distance);
+      return Math.round(distance);
     } //计算多个点的距离(常用于线计算)
 
   }, {
@@ -3035,10 +3115,13 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
       for (var i = 0; i < ps.length; i++) {
         if (i < ps.length - 1) {
-          totalDistance += t.calculatePointsDistance(ps[i], ps[i + 1]);
+          var distance = t.calculatePointsDistance(ps[i], ps[i + 1]);
+          console.log(distance);
+          totalDistance += distance;
         }
       }
 
+      console.log(totalDistance);
       return Math.round(totalDistance * 100) / 100;
     } //处理线和面的 经纬度数据
 
@@ -3772,6 +3855,16 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
       if (typeof isClearAreaRestriction == 'boolean' && isClearAreaRestriction || isClearAreaRestriction && isClearAreaRestriction !== t.props.isClearAreaRestriction) {
         t.clearAreaRestriction();
+      } // 设置地图层级
+
+
+      if (typeof setZoomLevel == 'boolean' && setZoomLevel || setZoomLevel && setZoomLevel !== t.props.setZoomLevel) {
+        t.setZoomLevel(mapZoomLevel);
+      } // 比例尺控件位置改变
+
+
+      if (nextProps.showControl && JSON.stringify(nextProps.showControl) != JSON.stringify(t.props.showControl)) {
+        t.showControl(nextProps);
       }
     } // 地图事件
     //地图点击事件