@vtx/map 1.1.20 → 1.1.22

package/lib/VtxMap/OlMap/Map.js

@@ -15,6 +15,8 @@ var _MapToolFunction = require("../MapToolFunction");
 
 var _immutable = _interopRequireDefault(require("immutable"));
 
+var _lodash = require("lodash");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
@@ -31,8 +33,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -65,6 +65,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var Set = _immutable["default"].Set;
 
 var OlMap = /*#__PURE__*/function (_React$Component) {
@@ -78,6 +80,74 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, OlMap);
 
     _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "loadLayers", function () {
+      var nextLayers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      var currentLayers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var first = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+      var t = _assertThisInitialized(_this); // 对比图层的变化，找出需要新增和需要删除的。
+
+
+      var addLayers = nextLayers.filter(function (item) {
+        return !currentLayers.map(function (e) {
+          return e.coverage;
+        }).includes(item.coverage);
+      });
+      var removeLayers = currentLayers.filter(function (item) {
+        return !nextLayers.map(function (e) {
+          return e.coverage;
+        }).includes(item.coverage);
+      });
+
+      if (removeLayers.length > 0) {
+        removeLayers.forEach(function (item) {
+          var exist = t.olLayers.find(function (e) {
+            return e.address === item.coverage;
+          });
+          exist && exist.layer.setVisible(false);
+        });
+      }
+
+      if (addLayers.length > 0) {
+        addLayers.map(function (item) {
+          if (item.coverage.startsWith("http") || item.coverage.startsWith('/')) {
+            switch (item.type) {
+              // 超图
+              case 'superMap':
+                t.addSuperMapLayer(item.coverage);
+                break;
+              // geoServer
+
+              case 'geoServer':
+                t.addGeoServerLayer(item.coverage);
+
+              default:
+                break;
+            }
+          } else if (OL_SCREEN[item.coverage]) {
+            if (first) {
+              var layers = eval(OL_SCREEN[item.coverage].initLayer);
+
+              if ((0, _lodash.isArray)(layers)) {
+                layers.map(function (layer) {
+                  t.state.gis.addLayer(layer);
+                });
+              } else {
+                t.state.gis.addLayer(layers);
+              }
+            }
+          }
+        });
+      } else {
+        if (first) {
+          var _layer = eval(OL_SCREEN["default"].initLayer);
+
+          t.state.gis.addLayer(_layer);
+        }
+      }
+    });
+
     _this.zIndexGraphics = []; //需要放在最后的图元,zoom和pan时刷新dom到最后
 
     _this.htmlPointsId = 'vtx_gmap_html_points'; //html点位容器id class管理
@@ -141,7 +211,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
     _this.areaRestriction = null; //区域限制数据
 
-    _this.movePoints = []; //是否绘制测距
+    _this.movePoints = [];
+    _this.olLayers = []; // ol图层集合 {address:'', layer: ''}
+
+    _this.baseLayer = null; // 地图图层
+    //是否绘制测距
 
     _this.rangingTool = {
       isRanging: false,
@@ -356,7 +430,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             var target = feature.getProperties(); //  top: e.clientY,//当前点所在的位置(屏幕)
             // left: e.clientX,
 
-            t.clickGraphic(target.id, evt);
+            t.clickGraphic(target.id || target.elementId, evt, target);
           } else {
             t.clickMap(evt);
           }
@@ -475,31 +549,93 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
         minZoom: minZoom,
         maxZoom: maxZoom
       });
+      t.loadLayers(olCoverage, [], true);
+      t.initPropsForUser();
+    } // 加载图层
 
-      if ((olCoverage || []).length > 0) {
-        (olCoverage || []).map(function (item) {
-          if (item.coverage.startsWith("http") || item.coverage.startsWith('/')) {
-            // 超图图层
-            var _layer = new ol.layer.Tile({
-              source: new ol.source.TileSuperMapRest({
-                url: item.coverage
-              })
-            });
+  }, {
+    key: "addSuperMapLayer",
+    value: // 添加超图图层
+    function addSuperMapLayer(url) {
+      var exist = this.olLayers.find(function (item) {
+        return item.address === url;
+      });
 
-            t.state.gis.addLayer(_layer);
-          } else if (OL_SCREEN[item.coverage]) {
-            var _layer2 = eval(OL_SCREEN[item.coverage].initLayer);
+      if (exist) {
+        exist.layer.setVisible(true);
+        return;
+      }
 
-            t.state.gis.addLayer(_layer2);
-          }
-        });
-      } else {
-        var _layer3 = eval(OL_SCREEN["default"].initLayer);
+      var layer = new ol.layer.Tile({
+        source: new ol.source.TileSuperMapRest({
+          url: url
+        })
+      }); // 将图层添加到地图上
 
-        t.state.gis.addLayer(_layer3);
-      }
+      this.state.gis.addLayer(layer);
+      this.olLayers.push({
+        address: url,
+        layer: layer
+      });
+    } // 添加geoServer图层
 
-      t.initPropsForUser();
+  }, {
+    key: "addGeoServerLayer",
+    value: function addGeoServerLayer(_url) {
+      var exist = this.olLayers.find(function (item) {
+        return item.address === _url;
+      });
+
+      if (exist) {
+        exist.layer.setVisible(true);
+        return;
+      } // 矢量数据源
+
+
+      var vectorSource = new ol.source.Vector({
+        // 设置格式化类型
+        format: new ol.format.GeoJSON(),
+        // url(extent) 在地图范围变化时调用，返回当前的地图范围
+        url: function url(extent) {
+          return "".concat(_url, "&bbox=").concat(extent.join(','));
+        },
+        strategy: ol.loadingstrategy.bbox
+      }); // 矢量图层
+
+      var layer = new ol.layer.Vector({
+        // 设置数据源
+        source: vectorSource,
+        // 设置图层样式也可以 function (feature) { /** 根据内容动态加载样式 **/ return Style}
+        style: function style(feature) {
+          var _icon$;
+
+          var el = feature.A || {};
+          var icon = JSON.parse(el.icon || '[]');
+          var mapIcon = (_icon$ = icon[0]) !== null && _icon$ !== void 0 && _icon$.id ? "/cloudFile/common/downloadFile?id=".concat(icon[0].id) : require("../images/defaultMarker.png");
+          return new ol.style.Style({
+            // 点位图标
+            image: new ol.style.Icon({
+              scale: 1,
+              src: mapIcon
+            }),
+            // 线样式
+            stroke: new ol.style.Stroke({
+              color: el.color || '#1890ff',
+              width: 4
+            }),
+            // 面样式
+            fill: new ol.style.Fill({
+              color: el.color || 'rgba(255,255,255, 0.5)'
+            })
+          });
+        }
+      }); // 将图层添加到地图上
+
+      this.state.gis.addLayer(layer);
+      this.olLayers.push({
+        address: _url,
+        layer: layer
+      });
     } // 初始化对外方法
 
   }, {
@@ -3563,7 +3699,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           isSetAreaRestriction = nextProps.isSetAreaRestriction,
           areaRestriction = nextProps.areaRestriction,
           isClearAreaRestriction = nextProps.isClearAreaRestriction,
-          isClearAll = nextProps.isClearAll; // 等待地图加载
+          isClearAll = nextProps.isClearAll,
+          olProps = nextProps.olProps; // 等待地图加载
 
       if (!t.state.mapCreated) return;
       /*点数据处理
@@ -3865,6 +4002,11 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
 
       if (nextProps.showControl && JSON.stringify(nextProps.showControl) != JSON.stringify(t.props.showControl)) {
         t.showControl(nextProps);
+      } // 更新需要加载的图层
+
+
+      if (nextProps.olProps && JSON.stringify(nextProps.olProps) !== JSON.stringify(t.props.olProps)) {
+        t.loadLayers(nextProps.olProps.olCoverage, t.props.olProps.olCoverage);
       }
     } // 地图事件
     //地图点击事件
@@ -4077,33 +4219,32 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "clickGraphic",
     value: function clickGraphic(id, e) {
-      var t = this;
+      var target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      var t = this; //编辑中的图元关闭其他事件返回
 
-      if (id) {
-        //编辑中的图元关闭其他事件返回
-        if (t.editId == id) return false;
-
-        if (typeof t.props.clickGraphic === 'function') {
-          var _e$pixel = _slicedToArray(e.pixel, 2),
-              clientX = _e$pixel[0],
-              clientY = _e$pixel[1];
-
-          var param = t.getGraphic(id, clientX, clientY);
-          var obj = {
-            param: param,
-            type: param.geometry.type,
-            //图元类型
-            attributes: _objectSpread(_objectSpread({}, param.attributes.other), {
-              config: param.attributes.config
-            }),
-            //添加时图元信息
-            top: clientY,
-            //当前点所在的位置(屏幕)
-            left: clientX,
-            e: e
-          };
-          t.props.clickGraphic(obj);
-        }
+      if (t.editId == id) return false;
+
+      if (typeof t.props.clickGraphic === 'function') {
+        var _e$pixel = _slicedToArray(e.pixel, 2),
+            clientX = _e$pixel[0],
+            clientY = _e$pixel[1];
+
+        var param = t.getGraphic(id, clientX, clientY);
+        var obj = {
+          param: param,
+          info: target,
+          type: param ? param.geometry.type : null,
+          //图元类型
+          attributes: param ? _objectSpread(_objectSpread({}, param.attributes.other), {
+            config: param.attributes.config
+          }) : null,
+          //添加时图元信息
+          top: clientY,
+          //当前点所在的位置(屏幕)
+          left: clientX,
+          e: e
+        };
+        t.props.clickGraphic(obj);
       }
     }
   }, {