@vtx/map 1.2.17 → 1.2.19

package/lib/VtxMap/OlMap/Map.js

@@ -69,6 +69,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var Set = _immutable["default"].Set;
 
+var defaultMarker = require("../images/defaultMarker.png");
+
 var OlMap = /*#__PURE__*/function (_React$Component) {
   _inherits(OlMap, _React$Component);
 
@@ -307,6 +309,8 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
       }
     };
     _this.frameSelectProps = {};
+    _this.pointFeatureLayer = null;
+    _this.imgCache = new ImgCache();
 
     _this.loadMapJs();
 
@@ -372,10 +376,16 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
             mapCluster = _t$props.mapCluster,
             mapPointCollection = _t$props.mapPointCollection,
             areaRestriction = _t$props.areaRestriction,
-            heatMapData = _t$props.heatMapData; // 初始化中心点
+            heatMapData = _t$props.heatMapData,
+            pointsFeature = _t$props.pointsFeature; // 初始化中心点
 
         t.setCenter(); // 添加点
 
+        if (pointsFeature instanceof Array) {
+          t.addPointLayer(pointsFeature);
+        } // 添加点
+
+
         if (mapPoints instanceof Array) {
           t.addPoint(mapPoints);
         } //添加线
@@ -2580,6 +2590,224 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           return dealPoint(mapPoints[index]);
         });
       }
+    } // 点位样式
+
+  }, {
+    key: "getPointStyle",
+    value: function getPointStyle(item) {
+      var t = this;
+      var cg = {
+        width: 30,
+        height: 30,
+        labelContent: '',
+        labelPixelX: 0,
+        labelPixelY: 34,
+        markerContentX: -13,
+        markerContentY: -42,
+        zIndex: 100,
+        deg: 0,
+        scale: 1
+      }; //初始化默认数据
+
+      if (item.config) {
+        cg = _objectSpread(_objectSpread({}, cg), item.config);
+      } // 覆盖物样式参数
+
+
+      var style, icon, txt;
+      var myImage = new Image(cg.width, cg.height);
+
+      if (!!item.markerContent) {
+        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],
+            attributes: _objectSpread(_objectSpread({}, item), {}, {
+              other: item
+            })
+          }));
+        }); // 创建地图自定义覆盖物
+
+        var pop = new ol.Overlay({
+          id: item.id,
+          position: [parseFloat(item.longitude), parseFloat(item.latitude)],
+          positioning: 'center-center',
+          element: nodes,
+          autoPanMargin: 20,
+          autoPan: true,
+          offset: [0, -20],
+          insertFirst: true
+        });
+        t.state.gis.addOverlay(pop);
+      } else {
+        var url = item.url || defaultMarker;
+        var temp = t.imgCache.get(url);
+
+        if (temp) {
+          console.log(item.id);
+          myImage.src = temp;
+        } else {
+          // myImage.src = url;
+          // t.imgCache.set(url, url);
+          canvasDataURL(url, {
+            width: cg.width,
+            height: cg.height
+          }, function (base64) {
+            myImage.src = base64;
+            t.imgCache.set(url, base64);
+          });
+        } // 创建地图要素图标样式
+
+
+        style = new ol.style.Style({
+          image: new ol.style.Icon({
+            anchor: [-cg.markerContentX, -cg.markerContentY],
+            anchorXUnits: 'pixels',
+            anchorYUnits: 'pixels',
+            img: myImage,
+            imgSize: [cg.width, cg.height],
+            opacity: cg.opacity,
+            scale: cg.scale || 1
+          })
+        });
+      }
+
+      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],
+            anchorXUnits: 'pixels',
+            anchorYUnits: 'pixels',
+            // src: item.url || require("../images/defaultMarker.png"),
+            img: myImage,
+            imgSize: [cg.width, cg.height],
+            opacity: cg.opacity,
+            scale: cg.scale || 1
+          }),
+          // 创建地图要素文字样式
+          text: new ol.style.Text(textStyle)
+        });
+      }
+
+      return style;
+    } // 添加点位图层
+
+  }, {
+    key: "addPointLayer",
+    value: function addPointLayer(points) {
+      var t = this;
+      var features = [];
+      points === null || points === void 0 ? void 0 : points.map(function (item) {
+        var feature = new ol.Feature({
+          geometry: new ol.geom.Point([parseFloat(item.longitude), parseFloat(item.latitude)]),
+          name: item.name,
+          id: item.id,
+          params: _objectSpread({}, item)
+        });
+        feature.setId(item.id);
+        var style = t.getPointStyle(item);
+        feature.setStyle(style);
+        features.push(feature);
+        t.GM.setGraphic(item.id, feature).setGraphicParam(item.id, {
+          attributes: _objectSpread(_objectSpread({}, item), {}, {
+            other: item
+          }),
+          geometryType: 'point',
+          geometry: {
+            type: 'point',
+            x: parseFloat(item.longitude),
+            y: parseFloat(item.latitude)
+          }
+        });
+      });
+
+      if (t.pointFeatureLayer) {
+        var source = t.pointFeatureLayer.getSource();
+        console.log(source);
+        var oldFeatures = source.getFeatures();
+        var newFeatures = [],
+            updateFeatureIds = [];
+        oldFeatures.map(function (feat) {
+          var obj = features.find(function (p) {
+            return p.getId() == feat.getId();
+          });
+
+          if (obj) {
+            if (JSON.stringify(obj.getStyle()) !== JSON.stringify(feat.getStyle())) {
+              feat.setStyle(obj.getStyle());
+            }
+
+            if (JSON.stringify(obj.getGeometry()) !== JSON.stringify(feat.getGeometry())) {
+              feat.setGeometry(obj.getGeometry());
+            }
+
+            updateFeatureIds.push(feat.getId());
+          } else {
+            source.removeFeature(feat);
+          }
+        });
+        newFeatures = features.filter(function (p) {
+          return !updateFeatureIds.includes(p.getId());
+        });
+
+        if (newFeatures.length > 0) {
+          t.pointFeatureLayer.getSource().addFeatures(newFeatures);
+        } // t.pointFeatureLayer.getSource().clear();
+        // t.pointFeatureLayer.getSource().addFeatures(features);
+
+      } else {
+        var _source = new ol.source.Vector({
+          features: features
+        });
+
+        var pointLayer = new ol.layer.Vector({
+          name: 'point_layer',
+          source: _source,
+          id: 'point_layer'
+        });
+        t.state.gis.addLayer(pointLayer);
+        t.pointFeatureLayer = pointLayer;
+      }
+
+      t.refresh();
     } // 更新图层
 
   }, {
@@ -4073,7 +4301,9 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           areaRestriction = nextProps.areaRestriction,
           isClearAreaRestriction = nextProps.isClearAreaRestriction,
           isClearAll = nextProps.isClearAll,
-          olProps = nextProps.olProps; // 等待地图加载
+          olProps = nextProps.olProps,
+          _nextProps$pointsFeat = nextProps.pointsFeature,
+          pointsFeature = _nextProps$pointsFeat === void 0 ? [] : _nextProps$pointsFeat; // 等待地图加载
 
       if (!t.mapCreated) return;
       /*点数据处理
@@ -4082,6 +4312,10 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           pointData[0]数据中多余的id,执行删除
       */
 
+      if (pointsFeature instanceof Array && !t.deepEqual(pointsFeature, t.props.pointsFeature)) {
+        t.addPointLayer(pointsFeature);
+      }
+
       if (mapPoints instanceof Array && t.props.mapPoints instanceof Array && !t.deepEqual(mapPoints, t.props.mapPoints)) {
         var oldMapPoints = t.props.mapPoints;
         var newMapPoints = mapPoints; //过滤编辑的图元
@@ -4675,7 +4909,7 @@ var OlMap = /*#__PURE__*/function (_React$Component) {
           //图元类型
           attributes: param ? _objectSpread(_objectSpread({}, param.attributes.other), {
             config: param.attributes.config
-          }) : null,
+          }) : e.attributes || null,
           //添加时图元信息
           top: clientY,
           //当前点所在的位置(屏幕)
@@ -4865,5 +5099,40 @@ function canvasDataURL(path, obj, callback) {
   };
 }
 
+var ImgCache = /*#__PURE__*/function () {
+  function ImgCache(props) {
+    _classCallCheck(this, ImgCache);
+
+    this.imgs = {};
+  }
+
+  _createClass(ImgCache, [{
+    key: "set",
+    value: function set(key, value) {
+      this.imgs[key] = value;
+    }
+  }, {
+    key: "get",
+    value: function get(key) {
+      return this.imgs[key];
+    }
+  }, {
+    key: "remove",
+    value: function remove(key) {
+      var obj = _objectSpread({}, this.imgs);
+
+      delete obj[key];
+      this.imgs = obj;
+    }
+  }, {
+    key: "clear",
+    value: function clear() {
+      this.imgs = {};
+    }
+  }]);
+
+  return ImgCache;
+}();
+
 module.exports = exports["default"];
 //# sourceMappingURL=Map.js.map