@antv/l7-component 2.9.22 → 2.9.25-alpha.0

package/es/marker-layer.d.ts

@@ -12,6 +12,7 @@ export default class MarkerLayer extends EventEmitter {
     private scene;
     private zoom;
     private bbox;
+    private containerSize;
     constructor(option?: Partial<IMarkerLayerOption>);
     getDefault(): {
         cluster: boolean;
@@ -25,6 +26,8 @@ export default class MarkerLayer extends EventEmitter {
         };
     };
     addTo(scene: Container): this;
+    private setContainerSize;
+    private getContainerSize;
     addMarker(marker: IMarker): void;
     removeMarker(marker: IMarker): void;
     /**

package/es/marker-layer.js

@@ -77,13 +77,34 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
         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();
       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;
+    }
   }, {
     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);
@@ -163,6 +184,8 @@ var MarkerLayer = /*#__PURE__*/function (_EventEmitter) {
         clusterMarker.remove();
       });
       this.mapsService.off('camerachange', this.update);
+      this.mapsService.off('camerachange', this.setContainerSize.bind(this));
+      this.mapsService.off('viewchange', this.setContainerSize.bind(this));
       this.markers = [];
       this.clusterMarkers = [];
     }

package/es/marker.d.ts

@@ -1,4 +1,4 @@
-import { ILngLat, IMarkerOption, IPoint, IPopup } from '@antv/l7-core';
+import { ILngLat, IMarkerContainerAndBounds, IMarkerOption, IPoint, IPopup } from '@antv/l7-core';
 import { anchorType } from '@antv/l7-utils';
 import { EventEmitter } from 'eventemitter3';
 import { Container } from 'inversify';
@@ -11,6 +11,7 @@ export default class Marker extends EventEmitter {
     private lngLat;
     private scene;
     private added;
+    getMarkerLayerContainerSize(): IMarkerContainerAndBounds | void;
     constructor(option?: Partial<IMarkerOption>);
     getDefault(): {
         element: undefined;
@@ -37,6 +38,7 @@ export default class Marker extends EventEmitter {
     setExtData(data: any): void;
     private update;
     private onMapClick;
+    private getCurrentContainerSize;
     private updatePosition;
     private init;
     private registerMarkerEvent;

package/es/marker.js

@@ -47,6 +47,9 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
   }
 
   _createClass(Marker, [{
+    key: "getMarkerLayerContainerSize",
+    value: function getMarkerLayerContainerSize() {}
+  }, {
     key: "getDefault",
     value: function getDefault() {
       return {
@@ -282,6 +285,16 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
         this.togglePopup();
       }
     }
+  }, {
+    key: "getCurrentContainerSize",
+    value: function getCurrentContainerSize() {
+      var container = this.mapsService.getContainer();
+      return {
+        containerHeight: (container === null || container === void 0 ? void 0 : container.scrollHeight) || 0,
+        containerWidth: (container === null || container === void 0 ? void 0 : container.scrollWidth) || 0,
+        bounds: this.mapsService.getBounds()
+      };
+    }
   }, {
     key: "updatePosition",
     value: function updatePosition() {
@@ -295,21 +308,18 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
       var _this$lngLat = this.lngLat,
           lng = _this$lngLat.lng,
           lat = _this$lngLat.lat;
-      var bounds = this.mapsService.getBounds();
       var pos = this.mapsService.lngLatToContainer([lng, lat]);
 
       if (element) {
         element.style.display = 'block';
         element.style.whiteSpace = 'nowrap';
-        var container = this.mapsService.getContainer();
-        var containerWidth = 0;
-        var containerHeight = 0;
 
-        if (container) {
-          containerWidth = container.scrollWidth;
-          containerHeight = container.scrollHeight;
-        } // 当前可视区域包含跨日界线
+        var _ref = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(),
+            containerHeight = _ref.containerHeight,
+            containerWidth = _ref.containerWidth,
+            bounds = _ref.bounds;
 
+        if (!bounds) return; // 当前可视区域包含跨日界线
 
         if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) {
           if (pos.x > containerWidth) {

package/lib/marker-layer.js

@@ -64,11 +64,27 @@ var MarkerLayer = class extends import_eventemitter3.EventEmitter {
       this.mapsService.on("camerachange", this.update);
       this.mapsService.on("viewchange", this.update);
     }
+    this.mapsService.on("camerachange", this.setContainerSize.bind(this));
+    this.mapsService.on("viewchange", this.setContainerSize.bind(this));
     this.addMarkers();
     return this;
   }
+  setContainerSize() {
+    if (!this.mapsService)
+      return;
+    const container = this.mapsService.getContainer();
+    this.containerSize = {
+      containerWidth: (container == null ? void 0 : container.scrollWidth) || 0,
+      containerHeight: (container == null ? void 0 : container.scrollHeight) || 0,
+      bounds: this.mapsService.getBounds()
+    };
+  }
+  getContainerSize() {
+    return this.containerSize;
+  }
   addMarker(marker) {
     const cluster = this.markerLayerOption.cluster;
+    marker.getMarkerLayerContainerSize = this.getContainerSize.bind(this);
     if (cluster) {
       this.addPoint(marker, this.markers.length);
       if (this.mapsService) {
@@ -121,6 +137,8 @@ var MarkerLayer = class extends import_eventemitter3.EventEmitter {
       clusterMarker.remove();
     });
     this.mapsService.off("camerachange", this.update);
+    this.mapsService.off("camerachange", this.setContainerSize.bind(this));
+    this.mapsService.off("viewchange", this.setContainerSize.bind(this));
     this.markers = [];
     this.clusterMarkers = [];
   }

package/lib/marker.js

@@ -43,6 +43,8 @@ var Marker = class extends import_eventemitter3.EventEmitter {
     (0, import_l7_utils.bindAll)(["update", "onMove", "onUp", "addDragHandler", "onMapClick"], this);
     this.init();
   }
+  getMarkerLayerContainerSize() {
+  }
   getDefault() {
     return {
       element: void 0,
@@ -203,24 +205,27 @@ var Marker = class extends import_eventemitter3.EventEmitter {
       this.togglePopup();
     }
   }
+  getCurrentContainerSize() {
+    const container = this.mapsService.getContainer();
+    return {
+      containerHeight: (container == null ? void 0 : container.scrollHeight) || 0,
+      containerWidth: (container == null ? void 0 : container.scrollWidth) || 0,
+      bounds: this.mapsService.getBounds()
+    };
+  }
   updatePosition() {
     if (!this.mapsService) {
       return;
     }
     const { element, offsets } = this.markerOption;
     const { lng, lat } = this.lngLat;
-    const bounds = this.mapsService.getBounds();
     const pos = this.mapsService.lngLatToContainer([lng, lat]);
     if (element) {
       element.style.display = "block";
       element.style.whiteSpace = "nowrap";
-      const container = this.mapsService.getContainer();
-      let containerWidth = 0;
-      let containerHeight = 0;
-      if (container) {
-        containerWidth = container.scrollWidth;
-        containerHeight = container.scrollHeight;
-      }
+      const { containerHeight, containerWidth, bounds } = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize();
+      if (!bounds)
+        return;
       if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) {
         if (pos.x > containerWidth) {
           const newPos = this.mapsService.lngLatToContainer([lng - 360, lat]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.9.22",
+  "version": "2.9.25-alpha.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,8 +25,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "2.9.22",
-    "@antv/l7-utils": "2.9.22",
+    "@antv/l7-core": "2.9.25-alpha.0",
+    "@antv/l7-utils": "2.9.25-alpha.0",
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",
@@ -34,7 +34,10 @@
     "reflect-metadata": "^0.1.13",
     "supercluster": "^7.0.0"
   },
-  "gitHead": "4133f88548e4525d6f3b565762be9549bce474c8",
+  "devDependencies": {
+    "@antv/l7-test-utils": "2.9.25-alpha.0"
+  },
+  "gitHead": "5216ad73535dbd3c4188dd9717952db3dfcb4f71",
   "publishConfig": {
     "access": "public"
   }