@antv/l7-component 2.17.4 → 2.17.5

package/lib/marker-layer.js

@@ -1,54 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _l7Core = require("@antv/l7-core");
-
 var _l7Utils = require("@antv/l7-utils");
-
 var _eventemitter = require("eventemitter3");
-
 var _lodash = require("lodash");
-
 var _supercluster = _interopRequireDefault(require("supercluster/dist/supercluster"));
-
 var _marker = _interopRequireDefault(require("./marker"));
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
   (0, _inherits2.default)(MarkerLayer, _EventEmitter);
-
   var _super = _createSuper(MarkerLayer);
-
   function MarkerLayer(option) {
     var _this$markerLayerOpti;
-
     var _this;
-
     (0, _classCallCheck2.default)(this, MarkerLayer);
     _this = _super.call(this);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "markers", []);
@@ -59,7 +37,6 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
     _this.zoom = ((_this$markerLayerOpti = _this.markerLayerOption.clusterOption) === null || _this$markerLayerOpti === void 0 ? void 0 : _this$markerLayerOpti.zoom) || -99;
     return _this;
   }
-
   (0, _createClass2.default)(MarkerLayer, [{
     key: "getDefault",
     value: function getDefault() {
@@ -74,63 +51,60 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
           className: ''
         }
       };
-    } // 执行scene.addMarkerLayer时调用
+    }
 
+    // 执行scene.addMarkerLayer时调用
   }, {
     key: "addTo",
     value: function addTo(scene) {
       // this.remove();
       this.scene = scene;
       this.mapsService = scene.get(_l7Core.TYPES.IMapService);
-
       if (this.markerLayerOption.cluster) {
         this.initCluster();
-        this.update(); // 地图视野变化时，重新计算视野内的聚合点。
-
+        this.update();
+        // 地图视野变化时，重新计算视野内的聚合点。
         this.mapsService.on('camerachange', this.update); // amap1.x 更新事件
-
         this.mapsService.on('viewchange', this.update); // amap2.0 更新事件
       }
 
       this.mapsService.on('camerachange', this.setContainerSize.bind(this)); // amap1.x 更新事件
-
       this.mapsService.on('viewchange', this.setContainerSize.bind(this)); // amap2.0 更新事件
-
       this.addMarkers();
       this.inited = true;
       return this;
-    } // 设置容器大小
+    }
 
+    // 设置容器大小
   }, {
     key: "setContainerSize",
     value: function setContainerSize() {
       if (!this.mapsService) {
         return;
       }
-
       var container = this.mapsService.getContainer();
       this.containerSize = {
         containerWidth: (container === null || container === void 0 ? void 0 : container.scrollWidth) || 0,
         containerHeight: (container === null || container === void 0 ? void 0 : container.scrollHeight) || 0,
         bounds: this.mapsService.getBounds()
       };
-    } // 获取容器尺寸
+    }
 
+    // 获取容器尺寸
   }, {
     key: "getContainerSize",
     value: function getContainerSize() {
       return this.containerSize;
-    } // 在图层添加单个marker
+    }
 
+    // 在图层添加单个marker
   }, {
     key: "addMarker",
     value: function addMarker(marker) {
       var cluster = this.markerLayerOption.cluster;
       marker.getMarkerLayerContainerSize = this.getContainerSize.bind(this);
-
       if (cluster) {
         this.addPoint(marker, this.markers.length);
-
         if (this.mapsService) {
           // 在新增 marker 的时候需要更新聚合信息（哪怕此时的 zoom 没有发生变化）
           var zoom = this.mapsService.getZoom();
@@ -140,8 +114,8 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
           this.getClusterMarker(this.bbox, this.zoom);
         }
       }
-
-      this.markers.push(marker); // if(this.inited) {
+      this.markers.push(marker);
+      // if(this.inited) {
       //   marker.addTo(this.scene);
       // }
     }
@@ -150,15 +124,14 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
     value: function removeMarker(marker) {
       this.markers.indexOf(marker);
       var markerIndex = this.markers.indexOf(marker);
-
       if (markerIndex > -1) {
         this.markers.splice(markerIndex, 1);
       }
     }
+
     /**
      * 隐藏 marker 在每个 marker 上单独修改属性而不是在 markerContainer 上修改（在 markerContainer 修改会有用户在场景加载完之前调用失败的问题）
      */
-
   }, {
     key: "hide",
     value: function hide() {
@@ -169,10 +142,10 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
         m.getElement().style.opacity = '0';
       });
     }
+
     /**
      * 显示 marker
      */
-
   }, {
     key: "show",
     value: function show() {
@@ -182,25 +155,27 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
       this.clusterMarkers.map(function (m) {
         m.getElement().style.opacity = '1';
       });
-    } // 返回当下的markers数据，有聚合图时返回聚合的marker列表，否则返回原始maerker列表
+    }
 
+    // 返回当下的markers数据，有聚合图时返回聚合的marker列表，否则返回原始maerker列表
   }, {
     key: "getMarkers",
     value: function getMarkers() {
       var cluster = this.markerLayerOption.cluster;
       return cluster ? this.clusterMarkers : this.markers;
-    } // 批量添加marker到scene
+    }
 
+    // 批量添加marker到scene
   }, {
     key: "addMarkers",
     value: function addMarkers() {
       var _this2 = this;
-
       this.getMarkers().forEach(function (marker) {
         marker.addTo(_this2.scene);
       });
-    } // 清除图层里的marker
+    }
 
+    // 清除图层里的marker
   }, {
     key: "clear",
     value: function clear() {
@@ -223,15 +198,15 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
       this.mapsService.off('viewchange', this.update);
       this.mapsService.off('camerachange', this.setContainerSize.bind(this));
       this.mapsService.off('viewchange', this.setContainerSize.bind(this));
-    } // 将marker数据保存在point中
+    }
 
+    // 将marker数据保存在point中
   }, {
     key: "addPoint",
     value: function addPoint(marker, id) {
       var _marker$getLnglat = marker.getLnglat(),
-          lng = _marker$getLnglat.lng,
-          lat = _marker$getLnglat.lat;
-
+        lng = _marker$getLnglat.lng,
+        lat = _marker$getLnglat.lat;
       var feature = {
         geometry: {
           type: 'Point',
@@ -242,7 +217,6 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
         })
       };
       this.points.push(feature);
-
       if (this.clusterIndex) {
         // 在新增点的时候需要更新 cluster 的数据
         this.clusterIndex.load(this.points);
@@ -254,25 +228,23 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
       if (!this.markerLayerOption.cluster) {
         return;
       }
-
       var _this$markerLayerOpti2 = this.markerLayerOption.clusterOption,
-          radius = _this$markerLayerOpti2.radius,
-          _this$markerLayerOpti3 = _this$markerLayerOpti2.minZoom,
-          minZoom = _this$markerLayerOpti3 === void 0 ? 0 : _this$markerLayerOpti3,
-          maxZoom = _this$markerLayerOpti2.maxZoom;
+        radius = _this$markerLayerOpti2.radius,
+        _this$markerLayerOpti3 = _this$markerLayerOpti2.minZoom,
+        minZoom = _this$markerLayerOpti3 === void 0 ? 0 : _this$markerLayerOpti3,
+        maxZoom = _this$markerLayerOpti2.maxZoom;
       this.clusterIndex = new _supercluster.default({
         radius: radius,
         minZoom: minZoom,
         maxZoom: maxZoom
-      }); // @ts-ignore
-
+      });
+      // @ts-ignore
       this.clusterIndex.load(this.points);
     }
   }, {
     key: "getClusterMarker",
     value: function getClusterMarker(viewBounds, zoom) {
       var _this3 = this;
-
       var viewBBox = viewBounds[0].concat(viewBounds[1]);
       var clusterPoint = this.clusterIndex.getClusters(viewBBox, zoom);
       this.clusterMarkers.forEach(function (marker) {
@@ -281,37 +253,27 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
       this.clusterMarkers = [];
       clusterPoint.forEach(function (feature) {
         var _feature$properties;
-
         var _this3$markerLayerOpt = _this3.markerLayerOption.clusterOption,
-            field = _this3$markerLayerOpt.field,
-            method = _this3$markerLayerOpt.method; // 处理聚合数据
-
+          field = _this3$markerLayerOpt.field,
+          method = _this3$markerLayerOpt.method;
+        // 处理聚合数据
         if ((_feature$properties = feature.properties) !== null && _feature$properties !== void 0 && _feature$properties.cluster_id) {
           var _feature$properties2;
-
           var clusterData = _this3.getLeaves((_feature$properties2 = feature.properties) === null || _feature$properties2 === void 0 ? void 0 : _feature$properties2.cluster_id);
-
           feature.properties.clusterData = clusterData;
-
           if (field && method) {
             var columnData = clusterData === null || clusterData === void 0 ? void 0 : clusterData.map(function (item) {
               var data = (0, _defineProperty2.default)({}, field, item.properties[field]);
               return data;
             });
-
             var column = _l7Utils.Satistics.getColumn(columnData, field);
-
             var stat = _l7Utils.Satistics.getSatByColumn(method, column);
-
             var fieldName = 'point_' + method;
             feature.properties[fieldName] = stat.toFixed(2);
           }
         }
-
         var marker = _this3.clusterMarker(feature);
-
         _this3.clusterMarkers.push(marker);
-
         marker.addTo(_this3.scene);
       });
     }
@@ -320,11 +282,9 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
     value: function getLeaves(clusterId) {
       var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity;
       var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-
       if (!clusterId) {
         return null;
       }
-
       return this.clusterIndex.getLeaves(clusterId, limit, offset);
     }
   }, {
@@ -332,8 +292,8 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
     value: function clusterMarker(feature) {
       var clusterOption = this.markerLayerOption.clusterOption;
       var _ref = clusterOption,
-          _ref$element = _ref.element,
-          element = _ref$element === void 0 ? this.generateElement.bind(this) : _ref$element;
+        _ref$element = _ref.element,
+        element = _ref$element === void 0 ? this.generateElement.bind(this) : _ref$element;
       var marker = new _marker.default({
         element: element(feature)
       }).setLnglat({
@@ -353,16 +313,13 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
     value: function update() {
       if (!this.mapsService) {
         return;
-      } // 当图层中无marker时，无需更新
-
-
+      }
+      // 当图层中无marker时，无需更新
       if (this.markers.length === 0) {
         return;
       }
-
       var zoom = this.mapsService.getZoom();
       var bbox = this.mapsService.getBounds();
-
       if (!this.bbox || Math.abs(zoom - this.zoom) >= 1 || !(0, _l7Utils.boundsContains)(this.bbox, bbox)) {
         this.bbox = (0, _l7Utils.padBounds)(bbox, 0.5);
         this.zoom = Math.floor(zoom);
@@ -373,14 +330,11 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
     key: "generateElement",
     value: function generateElement(feature) {
       var el = _l7Utils.DOM.create('div', 'l7-marker-cluster');
-
       var label = _l7Utils.DOM.create('div', '', el);
-
       var span = _l7Utils.DOM.create('span', '', label);
-
       var _this$markerLayerOpti4 = this.markerLayerOption.clusterOption,
-          field = _this$markerLayerOpti4.field,
-          method = _this$markerLayerOpti4.method;
+        field = _this$markerLayerOpti4.field,
+        method = _this$markerLayerOpti4.method;
       feature.properties.point_count = feature.properties.point_count || 1;
       var text = field && method ? feature.properties['point_' + method] || feature.properties[field] : feature.properties.point_count;
       span.textContent = text;
@@ -389,5 +343,4 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
   }]);
   return MarkerLayer;
 }(_eventemitter.EventEmitter);
-
 exports.default = MarkerLayer;