@vtx/map 1.1.14 → 1.1.16

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.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.showControl);
         } // 画热力图
 
 
@@ -446,13 +447,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 +469,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,
@@ -554,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);
     } //获取当前中心点
 
   }, {
@@ -952,6 +967,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,
@@ -1372,10 +1389,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']
     */
 
   }, {
@@ -1698,12 +1715,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
     */
 
   }, {
@@ -1761,7 +1778,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)
@@ -1792,7 +1809,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,
@@ -1824,7 +1841,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],
@@ -1837,29 +1890,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)
           });
         }
 
@@ -1897,8 +1928,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
         });
@@ -1955,7 +1986,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"), {
@@ -1977,7 +2008,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             });
 
             if (item.canShowLabel) {
-              text = new ol.style.Text({
+              var textStyle = _objectSpread({
                 textAlign: 'center',
                 //对齐方式
                 textBaseline: 'middle',
@@ -1992,14 +2023,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) {
@@ -2014,7 +2059,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), {}, {
@@ -2023,8 +2068,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
           });
@@ -2720,33 +2765,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[0] + 65,
+            top: config.offset[1],
+            textAlign: 'center'
+          });
+        } else if (config.location == 'bl') {
+          $("div.ol-scale-line-".concat(config.location)).css({
+            position: 'absolute',
+            left: config.offset[0] + 65,
+            bottom: config.offset[1],
+            textAlign: 'center'
+          });
+        } else if (config.location == 'tr') {
+          $("div.ol-scale-line-".concat(config.location)).css({
+            position: 'absolute',
+            right: config.offset[0] + 65,
+            top: config.offset[1],
+            textAlign: 'center'
+          });
+        } else if (config.location == 'br') {
+          $("div.ol-scale-line-".concat(config.location)).css({
+            position: 'absolute',
+            right: config.offset[0] + 65,
+            bottom: config.offset[1],
+            textAlign: 'center'
+          });
+        }
+      }, 20);
     } //设置区域限制
 
   }, {
@@ -3017,7 +3081,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);
     } //计算多个点的距离(常用于线计算)
 
   }, {
@@ -3032,10 +3099,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;
     } //处理线和面的 经纬度数据
 
@@ -3480,10 +3550,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)) {
@@ -3532,9 +3602,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
         t.updatePoint([].concat(_toConsumableArray(upds), _toConsumableArray(otherupds)));
       }
-      /*
-          线数据处理
-          先全删除,再新增
+      /*
+          线数据处理
+          先全删除,再新增
       */
 
 
@@ -3584,9 +3654,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
         t.updateLine([].concat(_toConsumableArray(_upds), _toConsumableArray(_otherupds)));
       }
-      /*
-          面数据处理
-          先全删除,再新增
+      /*
+          面数据处理
+          先全删除,再新增
       */
 
 
@@ -3636,9 +3706,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
         t.updatePolygon([].concat(_toConsumableArray(_upds2), _toConsumableArray(_otherupds2)));
       }
-      /*
-          圆数据处理
-          先全删除,再新增
+      /*
+          圆数据处理
+          先全删除,再新增
       */
 
 
@@ -3769,6 +3839,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);
       }
     } // 地图事件
     //地图点击事件