@antv/l7-component 2.20.15 → 2.20.17

package/es/marker.d.ts

@@ -38,6 +38,7 @@ export default class Marker extends EventEmitter {
     getExtData(): any;
     setExtData(data: any): void;
     private update;
+    private updatePositionWhenZoom;
     private onMapClick;
     private getCurrentContainerSize;
     private updateDraggable;

package/es/marker.js

@@ -9,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 import { TYPES } from '@antv/l7-core';
-import { DOM, anchorTranslate, anchorType, applyAnchorClass, bindAll, isPC } from '@antv/l7-utils';
+import { DOM, anchorType, applyAnchorClass, bindAll, isPC, anchorTranslate } from '@antv/l7-utils';
 import { EventEmitter } from 'eventemitter3';
 //  marker 支持 dragger 未完成
 var Marker = /*#__PURE__*/function (_EventEmitter) {
@@ -76,7 +76,7 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
       });
     });
     _this.markerOption = _objectSpread(_objectSpread({}, _this.getDefault()), option);
-    bindAll(['update', 'onMove', 'onMapClick'], _assertThisInitialized(_this));
+    bindAll(['update', 'onMove', 'onMapClick', 'updatePositionWhenZoom'], _assertThisInitialized(_this));
     _this.init();
     return _this;
   }
@@ -108,6 +108,8 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
       // this.sceneSerive.getSceneContainer().appendChild(element as HTMLElement);
       this.mapsService.getMarkerContainer().appendChild(element);
       this.registerMarkerEvent(element);
+      //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现
+      this.mapsService.on('zoomchange', this.updatePositionWhenZoom);
       this.mapsService.on('camerachange', this.update); // 注册高德1.x 的地图事件监听
       this.update();
       this.updateDraggable();
@@ -122,6 +124,7 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
         this.mapsService.off('click', this.onMapClick);
         this.mapsService.off('move', this.update);
         this.mapsService.off('moveend', this.update);
+        this.mapsService.off('zoomchange', this.update);
         this.mapsService.off('camerachange', this.update);
       }
       this.unRegisterMarkerEvent();
@@ -282,7 +285,60 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
       this.updatePosition();
       DOM.setTransform(element, "".concat(anchorTranslate[anchor]));
     }
-
+    //天地图在开始缩放时触发 更新目标位置时添加过渡效果
+  }, {
+    key: "updatePositionWhenZoom",
+    value: function updatePositionWhenZoom(ev) {
+      if (!this.mapsService) {
+        return;
+      }
+      var _this$markerOption2 = this.markerOption,
+        element = _this$markerOption2.element,
+        offsets = _this$markerOption2.offsets;
+      var _this$lngLat = this.lngLat,
+        lng = _this$lngLat.lng,
+        lat = _this$lngLat.lat;
+      if (element) {
+        element.style.display = 'block';
+        element.style.whiteSpace = 'nowrap';
+        var _ref2 = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(),
+          containerHeight = _ref2.containerHeight,
+          containerWidth = _ref2.containerWidth,
+          bounds = _ref2.bounds;
+        if (!bounds) {
+          return;
+        }
+        var map = ev.map;
+        var viewHalf = map.getSize();
+        viewHalf.x = viewHalf.x / 2;
+        viewHalf.y = viewHalf.y / 2;
+        var center = ev.center;
+        var zoom = ev.zoom;
+        var projectedCenter = map.DE(this.lngLat, zoom, center);
+        projectedCenter.x = Math.round(projectedCenter.x + offsets[0]);
+        projectedCenter.y = Math.round(projectedCenter.y - offsets[1]);
+        // 当前可视区域包含跨日界线
+        if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) {
+          if (projectedCenter.x > containerWidth) {
+            // 日界线右侧点左移
+            var newPos = this.mapsService.lngLatToContainer([lng - 360, lat]);
+            projectedCenter.x = newPos.x;
+          }
+          if (projectedCenter.x < 0) {
+            // 日界线左侧点右移
+            var _newPos = this.mapsService.lngLatToContainer([lng + 360, lat]);
+            projectedCenter.x = _newPos.x;
+          }
+        }
+        if (projectedCenter.x > containerWidth || projectedCenter.x < 0 || projectedCenter.y > containerHeight || projectedCenter.y < 0) {
+          element.style.display = 'none';
+        }
+        element.style.left = projectedCenter.x + 'px';
+        element.style.top = projectedCenter.y + 'px';
+        console.log(projectedCenter);
+        element.style.transition = 'left 0.25s cubic-bezier(0,0,0.25,1), top 0.25s cubic-bezier(0,0,0.25,1)';
+      }
+    }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
   }, {
     key: "onMapClick",
@@ -319,20 +375,20 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
       if (!this.mapsService) {
         return;
       }
-      var _this$markerOption2 = this.markerOption,
-        element = _this$markerOption2.element,
-        offsets = _this$markerOption2.offsets;
-      var _this$lngLat = this.lngLat,
-        lng = _this$lngLat.lng,
-        lat = _this$lngLat.lat;
+      var _this$markerOption3 = this.markerOption,
+        element = _this$markerOption3.element,
+        offsets = _this$markerOption3.offsets;
+      var _this$lngLat2 = this.lngLat,
+        lng = _this$lngLat2.lng,
+        lat = _this$lngLat2.lat;
       var pos = this.mapsService.lngLatToContainer([lng, lat]);
       if (element) {
         element.style.display = 'block';
         element.style.whiteSpace = 'nowrap';
-        var _ref2 = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(),
-          containerHeight = _ref2.containerHeight,
-          containerWidth = _ref2.containerWidth,
-          bounds = _ref2.bounds;
+        var _ref3 = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(),
+          containerHeight = _ref3.containerHeight,
+          containerWidth = _ref3.containerWidth,
+          bounds = _ref3.bounds;
         if (!bounds) {
           return;
         }
@@ -345,8 +401,8 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
           }
           if (pos.x < 0) {
             // 日界线左侧点右移
-            var _newPos = this.mapsService.lngLatToContainer([lng + 360, lat]);
-            pos.x = _newPos.x;
+            var _newPos2 = this.mapsService.lngLatToContainer([lng + 360, lat]);
+            pos.x = _newPos2.x;
           }
         }
         // 不在当前可视区域内隐藏点
@@ -362,9 +418,9 @@ var Marker = /*#__PURE__*/function (_EventEmitter) {
     value: function init() {
       var _this5 = this;
       var element = this.markerOption.element;
-      var _this$markerOption3 = this.markerOption,
-        color = _this$markerOption3.color,
-        anchor = _this$markerOption3.anchor;
+      var _this$markerOption4 = this.markerOption,
+        color = _this$markerOption4.color,
+        anchor = _this$markerOption4.anchor;
       if (!element) {
         this.defaultMarker = true;
         element = DOM.create('div');

package/es/popup/layerPopup.js

@@ -112,9 +112,10 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
       var items = newOption.items || this.popupOption.items;
       var isEmptyItems = (items === null || items === void 0 ? void 0 : items.length) === 0;
       newOption.followCursor = trigger === 'hover' && !isEmptyItems;
+      var isShow = this.isShow;
       _get(_getPrototypeOf(LayerPopup.prototype), "setOptions", this).call(this, newOption);
       this.bindLayerEvent();
-      if (isEmptyItems) {
+      if (isEmptyItems || !isShow) {
         this.hide();
       }
       return this;

package/es/popup/popup.d.ts

@@ -101,6 +101,7 @@ export default class Popup<O extends IPopupOption = IPopupOption> extends EventE
      * @protected
      */
     protected updateLngLatPosition: () => void;
+    protected updateLngLatPositionWhenZoom: (ev: any) => void;
     protected getDefault(option: Partial<O>): O;
     /**
      * 设置 Popup 内容 HTML
@@ -121,14 +122,17 @@ export default class Popup<O extends IPopupOption = IPopupOption> extends EventE
      */
     protected createContent(): void;
     protected onCloseButtonClick: (e: Event) => void;
+    private updatePosition;
+    protected updateWhenZoom: (ev: any) => void;
     protected update: () => void;
     /**
      * 设置 Popup 相对于地图容器的 Position
-     * @param left
-     * @param top
+     * @param {Number} left
+     * @param {Number} top
+     * @param {Boolean} [useTransition=false] 是否使用过度效果
      * @protected
      */
-    protected setPopupPosition(left: number, top: number): void;
+    protected setPopupPosition(left: number, top: number, useTransition?: boolean): void;
     /**
      * 检查当前传入 option 是否包含 keys 字段
      * @param option

package/es/popup/popup.js

@@ -79,6 +79,28 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         y = _this$mapsService$lng.y;
       _this.setPopupPosition(x, y);
     });
+    //zoom时计算PopUp的位置并更新
+    _defineProperty(_assertThisInitialized(_this), "updateLngLatPositionWhenZoom", function (ev) {
+      if (!_this.mapsService || _this.popupOption.followCursor) {
+        return;
+      }
+      var _this$lngLat2 = _this.lngLat,
+        lng = _this$lngLat2.lng,
+        lat = _this$lngLat2.lat;
+      var _this$mapsService$lng2 = _this.mapsService.lngLatToContainer([lng, lat]),
+        x = _this$mapsService$lng2.x,
+        y = _this$mapsService$lng2.y;
+      var map = ev.map;
+      var viewHalf = map.getSize();
+      viewHalf.x = viewHalf.x / 2;
+      viewHalf.y = viewHalf.y / 2;
+      var center = ev.center;
+      var zoom = ev.zoom;
+      var projectedCenter = map.DE(_this.lngLat, zoom, center);
+      projectedCenter.x = Math.round(projectedCenter.x);
+      projectedCenter.y = Math.round(projectedCenter.y);
+      _this.setPopupPosition(projectedCenter.x, projectedCenter.y, true);
+    });
     _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (e) {
       if (e.keyCode === 27) {
         _this.remove();
@@ -90,7 +112,9 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       }
       _this.hide();
     });
-    _defineProperty(_assertThisInitialized(_this), "update", function () {
+    //更新位置 支持zoom时更新
+    _defineProperty(_assertThisInitialized(_this), "updatePosition", function (ev) {
+      var zoom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       var hasPosition = !!_this.lngLat;
       var _this$popupOption = _this.popupOption,
         className = _this$popupOption.className,
@@ -121,7 +145,11 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         }
         _this.container.style.whiteSpace = 'nowrap';
       }
-      _this.updateLngLatPosition();
+      if (zoom) {
+        _this.updateLngLatPositionWhenZoom(ev);
+      } else {
+        _this.updateLngLatPosition();
+      }
       DOM.setTransform(_this.container, "".concat(anchorTranslate[anchor]));
       applyAnchorClass(_this.container, anchor, 'popup');
       if (maxWidth) {
@@ -134,6 +162,12 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         _this.container.style.removeProperty('width');
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "updateWhenZoom", function (ev) {
+      _this.updatePosition(ev, true);
+    });
+    _defineProperty(_assertThisInitialized(_this), "update", function () {
+      _this.updatePosition(null, false);
+    });
     _this.popupOption = _objectSpread(_objectSpread({}, _this.getDefault(cfg !== null && cfg !== void 0 ? cfg : {})), cfg);
     var lngLat = _this.popupOption.lngLat;
     if (lngLat) {
@@ -164,6 +198,8 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       this.mapsService = scene.get(TYPES.IMapService);
       this.sceneService = scene.get(TYPES.ISceneService);
       this.layerService = scene.get(TYPES.ILayerService);
+      //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现
+      this.mapsService.on('zoomchange', this.updateWhenZoom);
       this.mapsService.on('camerachange', this.update);
       this.mapsService.on('viewchange', this.update);
       this.scene = scene;
@@ -207,6 +243,8 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         // TODO: mapbox AMap 事件同步
         this.mapsService.off('camerachange', this.update);
         this.mapsService.off('viewchange', this.update);
+        //天地图的缩放事件
+        this.mapsService.off('zoomchange', this.updateWhenZoom);
         this.updateCloseOnClick(true);
         this.updateCloseOnEsc(true);
         this.updateFollowCursor(true);
@@ -352,9 +390,9 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "panToPopup",
     value: function panToPopup() {
-      var _this$lngLat2 = this.lngLat,
-        lng = _this$lngLat2.lng,
-        lat = _this$lngLat2.lat;
+      var _this$lngLat3 = this.lngLat,
+        lng = _this$lngLat3.lng,
+        lat = _this$lngLat3.lat;
       if (this.popupOption.autoPan) {
         this.mapsService.panTo([lng, lat]);
       }
@@ -384,8 +422,10 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       }
       if (this.mapsService) {
         // 防止事件重复监听
+        this.mapsService.off('zoonanim', this.updateWhenZoom);
         this.mapsService.off('camerachange', this.update);
         this.mapsService.off('viewchange', this.update);
+        this.mapsService.on('zoonanim', this.updateWhenZoom);
         this.mapsService.on('camerachange', this.update);
         this.mapsService.on('viewchange', this.update);
       }
@@ -544,15 +584,22 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     value:
     /**
      * 设置 Popup 相对于地图容器的 Position
-     * @param left
-     * @param top
+     * @param {Number} left
+     * @param {Number} top
+     * @param {Boolean} [useTransition=false] 是否使用过度效果
      * @protected
      */
     function setPopupPosition(left, top) {
+      var useTransition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       if (this.container) {
         var offsets = this.popupOption.offsets;
         this.container.style.left = left + offsets[0] + 'px';
         this.container.style.top = top - offsets[1] + 'px';
+        if (useTransition) {
+          this.container.style.transition = 'left 0.25s cubic-bezier(0,0,0.25,1), top 0.25s cubic-bezier(0,0,0.25,1)';
+        } else {
+          this.container.style.transition = '';
+        }
       }
     }
 

package/lib/marker.js

@@ -83,7 +83,7 @@ var Marker = exports.default = /*#__PURE__*/function (_EventEmitter) {
       });
     });
     _this.markerOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this.getDefault()), option);
-    (0, _l7Utils.bindAll)(['update', 'onMove', 'onMapClick'], (0, _assertThisInitialized2.default)(_this));
+    (0, _l7Utils.bindAll)(['update', 'onMove', 'onMapClick', 'updatePositionWhenZoom'], (0, _assertThisInitialized2.default)(_this));
     _this.init();
     return _this;
   }
@@ -115,6 +115,8 @@ var Marker = exports.default = /*#__PURE__*/function (_EventEmitter) {
       // this.sceneSerive.getSceneContainer().appendChild(element as HTMLElement);
       this.mapsService.getMarkerContainer().appendChild(element);
       this.registerMarkerEvent(element);
+      //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现
+      this.mapsService.on('zoomchange', this.updatePositionWhenZoom);
       this.mapsService.on('camerachange', this.update); // 注册高德1.x 的地图事件监听
       this.update();
       this.updateDraggable();
@@ -129,6 +131,7 @@ var Marker = exports.default = /*#__PURE__*/function (_EventEmitter) {
         this.mapsService.off('click', this.onMapClick);
         this.mapsService.off('move', this.update);
         this.mapsService.off('moveend', this.update);
+        this.mapsService.off('zoomchange', this.update);
         this.mapsService.off('camerachange', this.update);
       }
       this.unRegisterMarkerEvent();
@@ -289,7 +292,60 @@ var Marker = exports.default = /*#__PURE__*/function (_EventEmitter) {
       this.updatePosition();
       _l7Utils.DOM.setTransform(element, "".concat(_l7Utils.anchorTranslate[anchor]));
     }
-
+    //天地图在开始缩放时触发 更新目标位置时添加过渡效果
+  }, {
+    key: "updatePositionWhenZoom",
+    value: function updatePositionWhenZoom(ev) {
+      if (!this.mapsService) {
+        return;
+      }
+      var _this$markerOption2 = this.markerOption,
+        element = _this$markerOption2.element,
+        offsets = _this$markerOption2.offsets;
+      var _this$lngLat = this.lngLat,
+        lng = _this$lngLat.lng,
+        lat = _this$lngLat.lat;
+      if (element) {
+        element.style.display = 'block';
+        element.style.whiteSpace = 'nowrap';
+        var _ref2 = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(),
+          containerHeight = _ref2.containerHeight,
+          containerWidth = _ref2.containerWidth,
+          bounds = _ref2.bounds;
+        if (!bounds) {
+          return;
+        }
+        var map = ev.map;
+        var viewHalf = map.getSize();
+        viewHalf.x = viewHalf.x / 2;
+        viewHalf.y = viewHalf.y / 2;
+        var center = ev.center;
+        var zoom = ev.zoom;
+        var projectedCenter = map.DE(this.lngLat, zoom, center);
+        projectedCenter.x = Math.round(projectedCenter.x + offsets[0]);
+        projectedCenter.y = Math.round(projectedCenter.y - offsets[1]);
+        // 当前可视区域包含跨日界线
+        if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) {
+          if (projectedCenter.x > containerWidth) {
+            // 日界线右侧点左移
+            var newPos = this.mapsService.lngLatToContainer([lng - 360, lat]);
+            projectedCenter.x = newPos.x;
+          }
+          if (projectedCenter.x < 0) {
+            // 日界线左侧点右移
+            var _newPos = this.mapsService.lngLatToContainer([lng + 360, lat]);
+            projectedCenter.x = _newPos.x;
+          }
+        }
+        if (projectedCenter.x > containerWidth || projectedCenter.x < 0 || projectedCenter.y > containerHeight || projectedCenter.y < 0) {
+          element.style.display = 'none';
+        }
+        element.style.left = projectedCenter.x + 'px';
+        element.style.top = projectedCenter.y + 'px';
+        console.log(projectedCenter);
+        element.style.transition = 'left 0.25s cubic-bezier(0,0,0.25,1), top 0.25s cubic-bezier(0,0,0.25,1)';
+      }
+    }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
   }, {
     key: "onMapClick",
@@ -326,20 +382,20 @@ var Marker = exports.default = /*#__PURE__*/function (_EventEmitter) {
       if (!this.mapsService) {
         return;
       }
-      var _this$markerOption2 = this.markerOption,
-        element = _this$markerOption2.element,
-        offsets = _this$markerOption2.offsets;
-      var _this$lngLat = this.lngLat,
-        lng = _this$lngLat.lng,
-        lat = _this$lngLat.lat;
+      var _this$markerOption3 = this.markerOption,
+        element = _this$markerOption3.element,
+        offsets = _this$markerOption3.offsets;
+      var _this$lngLat2 = this.lngLat,
+        lng = _this$lngLat2.lng,
+        lat = _this$lngLat2.lat;
       var pos = this.mapsService.lngLatToContainer([lng, lat]);
       if (element) {
         element.style.display = 'block';
         element.style.whiteSpace = 'nowrap';
-        var _ref2 = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(),
-          containerHeight = _ref2.containerHeight,
-          containerWidth = _ref2.containerWidth,
-          bounds = _ref2.bounds;
+        var _ref3 = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize(),
+          containerHeight = _ref3.containerHeight,
+          containerWidth = _ref3.containerWidth,
+          bounds = _ref3.bounds;
         if (!bounds) {
           return;
         }
@@ -352,8 +408,8 @@ var Marker = exports.default = /*#__PURE__*/function (_EventEmitter) {
           }
           if (pos.x < 0) {
             // 日界线左侧点右移
-            var _newPos = this.mapsService.lngLatToContainer([lng + 360, lat]);
-            pos.x = _newPos.x;
+            var _newPos2 = this.mapsService.lngLatToContainer([lng + 360, lat]);
+            pos.x = _newPos2.x;
           }
         }
         // 不在当前可视区域内隐藏点
@@ -369,9 +425,9 @@ var Marker = exports.default = /*#__PURE__*/function (_EventEmitter) {
     value: function init() {
       var _this5 = this;
       var element = this.markerOption.element;
-      var _this$markerOption3 = this.markerOption,
-        color = _this$markerOption3.color,
-        anchor = _this$markerOption3.anchor;
+      var _this$markerOption4 = this.markerOption,
+        color = _this$markerOption4.color,
+        anchor = _this$markerOption4.anchor;
       if (!element) {
         this.defaultMarker = true;
         element = _l7Utils.DOM.create('div');

package/lib/popup/layerPopup.js

@@ -118,9 +118,10 @@ var LayerPopup = exports.default = exports.LayerPopup = /*#__PURE__*/function (_
       var items = newOption.items || this.popupOption.items;
       var isEmptyItems = (items === null || items === void 0 ? void 0 : items.length) === 0;
       newOption.followCursor = trigger === 'hover' && !isEmptyItems;
+      var isShow = this.isShow;
       (0, _get2.default)((0, _getPrototypeOf2.default)(LayerPopup.prototype), "setOptions", this).call(this, newOption);
       this.bindLayerEvent();
-      if (isEmptyItems) {
+      if (isEmptyItems || !isShow) {
         this.hide();
       }
       return this;

package/lib/popup/popup.js

@@ -85,6 +85,28 @@ var Popup = exports.default = exports.Popup = /*#__PURE__*/function (_EventEmitt
         y = _this$mapsService$lng.y;
       _this.setPopupPosition(x, y);
     });
+    //zoom时计算PopUp的位置并更新
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateLngLatPositionWhenZoom", function (ev) {
+      if (!_this.mapsService || _this.popupOption.followCursor) {
+        return;
+      }
+      var _this$lngLat2 = _this.lngLat,
+        lng = _this$lngLat2.lng,
+        lat = _this$lngLat2.lat;
+      var _this$mapsService$lng2 = _this.mapsService.lngLatToContainer([lng, lat]),
+        x = _this$mapsService$lng2.x,
+        y = _this$mapsService$lng2.y;
+      var map = ev.map;
+      var viewHalf = map.getSize();
+      viewHalf.x = viewHalf.x / 2;
+      viewHalf.y = viewHalf.y / 2;
+      var center = ev.center;
+      var zoom = ev.zoom;
+      var projectedCenter = map.DE(_this.lngLat, zoom, center);
+      projectedCenter.x = Math.round(projectedCenter.x);
+      projectedCenter.y = Math.round(projectedCenter.y);
+      _this.setPopupPosition(projectedCenter.x, projectedCenter.y, true);
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (e) {
       if (e.keyCode === 27) {
         _this.remove();
@@ -96,7 +118,9 @@ var Popup = exports.default = exports.Popup = /*#__PURE__*/function (_EventEmitt
       }
       _this.hide();
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "update", function () {
+    //更新位置 支持zoom时更新
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updatePosition", function (ev) {
+      var zoom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       var hasPosition = !!_this.lngLat;
       var _this$popupOption = _this.popupOption,
         className = _this$popupOption.className,
@@ -127,7 +151,11 @@ var Popup = exports.default = exports.Popup = /*#__PURE__*/function (_EventEmitt
         }
         _this.container.style.whiteSpace = 'nowrap';
       }
-      _this.updateLngLatPosition();
+      if (zoom) {
+        _this.updateLngLatPositionWhenZoom(ev);
+      } else {
+        _this.updateLngLatPosition();
+      }
       _l7Utils.DOM.setTransform(_this.container, "".concat(_l7Utils.anchorTranslate[anchor]));
       (0, _l7Utils.applyAnchorClass)(_this.container, anchor, 'popup');
       if (maxWidth) {
@@ -140,6 +168,12 @@ var Popup = exports.default = exports.Popup = /*#__PURE__*/function (_EventEmitt
         _this.container.style.removeProperty('width');
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateWhenZoom", function (ev) {
+      _this.updatePosition(ev, true);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "update", function () {
+      _this.updatePosition(null, false);
+    });
     _this.popupOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this.getDefault(cfg !== null && cfg !== void 0 ? cfg : {})), cfg);
     var lngLat = _this.popupOption.lngLat;
     if (lngLat) {
@@ -170,6 +204,8 @@ var Popup = exports.default = exports.Popup = /*#__PURE__*/function (_EventEmitt
       this.mapsService = scene.get(_l7Core.TYPES.IMapService);
       this.sceneService = scene.get(_l7Core.TYPES.ISceneService);
       this.layerService = scene.get(_l7Core.TYPES.ILayerService);
+      //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现
+      this.mapsService.on('zoomchange', this.updateWhenZoom);
       this.mapsService.on('camerachange', this.update);
       this.mapsService.on('viewchange', this.update);
       this.scene = scene;
@@ -213,6 +249,8 @@ var Popup = exports.default = exports.Popup = /*#__PURE__*/function (_EventEmitt
         // TODO: mapbox AMap 事件同步
         this.mapsService.off('camerachange', this.update);
         this.mapsService.off('viewchange', this.update);
+        //天地图的缩放事件
+        this.mapsService.off('zoomchange', this.updateWhenZoom);
         this.updateCloseOnClick(true);
         this.updateCloseOnEsc(true);
         this.updateFollowCursor(true);
@@ -358,9 +396,9 @@ var Popup = exports.default = exports.Popup = /*#__PURE__*/function (_EventEmitt
   }, {
     key: "panToPopup",
     value: function panToPopup() {
-      var _this$lngLat2 = this.lngLat,
-        lng = _this$lngLat2.lng,
-        lat = _this$lngLat2.lat;
+      var _this$lngLat3 = this.lngLat,
+        lng = _this$lngLat3.lng,
+        lat = _this$lngLat3.lat;
       if (this.popupOption.autoPan) {
         this.mapsService.panTo([lng, lat]);
       }
@@ -390,8 +428,10 @@ var Popup = exports.default = exports.Popup = /*#__PURE__*/function (_EventEmitt
       }
       if (this.mapsService) {
         // 防止事件重复监听
+        this.mapsService.off('zoonanim', this.updateWhenZoom);
         this.mapsService.off('camerachange', this.update);
         this.mapsService.off('viewchange', this.update);
+        this.mapsService.on('zoonanim', this.updateWhenZoom);
         this.mapsService.on('camerachange', this.update);
         this.mapsService.on('viewchange', this.update);
       }
@@ -550,15 +590,22 @@ var Popup = exports.default = exports.Popup = /*#__PURE__*/function (_EventEmitt
     value:
     /**
      * 设置 Popup 相对于地图容器的 Position
-     * @param left
-     * @param top
+     * @param {Number} left
+     * @param {Number} top
+     * @param {Boolean} [useTransition=false] 是否使用过度效果
      * @protected
      */
     function setPopupPosition(left, top) {
+      var useTransition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       if (this.container) {
         var offsets = this.popupOption.offsets;
         this.container.style.left = left + offsets[0] + 'px';
         this.container.style.top = top - offsets[1] + 'px';
+        if (useTransition) {
+          this.container.style.transition = 'left 0.25s cubic-bezier(0,0,0.25,1), top 0.25s cubic-bezier(0,0,0.25,1)';
+        } else {
+          this.container.style.transition = '';
+        }
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.20.15",
+  "version": "2.20.17",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,8 +26,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "2.20.15",
-    "@antv/l7-utils": "2.20.15",
+    "@antv/l7-core": "2.20.17",
+    "@antv/l7-utils": "2.20.17",
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",
@@ -35,12 +35,12 @@
     "supercluster": "^7.0.0"
   },
   "devDependencies": {
-    "@antv/l7-layers": "2.20.15",
-    "@antv/l7-test-utils": "2.20.15",
+    "@antv/l7-layers": "2.20.17",
+    "@antv/l7-test-utils": "2.20.17",
     "gcoord": "^0.3.2",
     "less": "^4.1.3"
   },
-  "gitHead": "283c12854a06cd2181552d6a9cf00d3e34bbd58e",
+  "gitHead": "e37d5cc24eec17a0949b827d76d1ac7c97a8fef3",
   "publishConfig": {
     "access": "public"
   }