UI support only update position when geometry coordinates change

packages/maptalks/src/ui/UIComponent.ts

@@ -81,7 +81,7 @@ class UIComponent extends Eventable(Class) {
     //@internal
     _coordinate: Coordinate;
     //@internal
-    _showBySymbolChange: boolean;
+    _onlyUpdatePosition: boolean;
     //@internal
     _mapEventsOn: boolean;
     //@internal
@@ -268,17 +268,26 @@ class UIComponent extends Eventable(Class) {
          * @property {String} type - showstart
          * @property {ui.UIComponent} target - UIComponent
          */
-        if (!this._showBySymbolChange) {
+        if (!this._onlyUpdatePosition) {
             this.fire('showstart');
         }
         const container = this._getUIContainer();
         this._coordinate = coordinate;
-        //when single will off map events
-        this._removePrevDOM();
+        //only update postion not remove dom
+        if (!this._onlyUpdatePosition) {
+            //when single will off map events
+            this._removePrevDOM();
+        }
+        //bind map events
         if (!this._mapEventsOn) {
             this._switchMapEvents('on');
         }
-        const dom = this.__uiDOM = this.buildOn();
+        let dom: HTMLElement;
+        if (!this._onlyUpdatePosition) {
+            dom = this.__uiDOM = this.buildOn();
+        } else {
+            dom = this.__uiDOM;
+        }
         dom['eventsPropagation'] = this.options['eventsPropagation'];
         this._observerDomSize(dom);
         const zIndex = this.options.zIndex;
@@ -291,15 +300,16 @@ class UIComponent extends Eventable(Class) {
              * @property {String} type - showend
              * @property {ui.UIComponent} target - UIComponent
              */
-            if (!this._showBySymbolChange) {
+            if (!this._onlyUpdatePosition) {
                 this.fire('showend');
             }
             this._collides();
             this.setZIndex(zIndex);
             return this;
         }
-
-        this._measureSize(dom);
+        if (!this._onlyUpdatePosition) {
+            this._measureSize(dom);
+        }
 
         if (this._singleton()) {
             (dom as any)._uiComponent = this;
@@ -310,8 +320,9 @@ class UIComponent extends Eventable(Class) {
 
         dom.style[TRANSITION as string] = null;
 
-        container.appendChild(dom);
-
+        if (!this._onlyUpdatePosition) {
+            container.appendChild(dom);
+        }
 
         const anim = this._getAnimation();
 
@@ -361,7 +372,7 @@ class UIComponent extends Eventable(Class) {
                 dom.style[TRANSFORM] = this._toCSSTranslate(this._pos) + ' scale(1)';
             }
         }
-        if (!this._showBySymbolChange) {
+        if (!this._onlyUpdatePosition) {
             this.fire('showend');
         }
         this._collides();
@@ -455,6 +466,7 @@ class UIComponent extends Eventable(Class) {
             map._removeUI(this);
         }
         this.hide();
+        //remove map bind events
         this._switchEvents('off');
         if (this.onRemove) {
             this.onRemove();
@@ -857,7 +869,7 @@ class UIComponent extends Eventable(Class) {
 
     onGeometryPositionChange(param) {
         if (this._owner && this.isVisible()) {
-            this._showBySymbolChange = true;
+            this._onlyUpdatePosition = true;
             const target = param.target;
             const center = target.getCenter();
             if (target._getAltitude) {
@@ -867,7 +879,7 @@ class UIComponent extends Eventable(Class) {
                 }
             }
             this.show(center);
-            delete this._showBySymbolChange;
+            this._onlyUpdatePosition = false;
         }
     }
 
@@ -1037,12 +1049,32 @@ class UIComponent extends Eventable(Class) {
     //@internal
     _onDomMouseover() {
         this._configMapPreventWheelScroll(false);
+        /**
+           * mouseover event.
+           *
+           * @event ui.UIComponent#mouseover
+           * @type {Object}
+           * @property {String} type - mouseover
+           * @property {ui.UIComponent} target - UIComponent
+           */
+
+        this.fire('mouseover');
     }
 
     // eslint-disable-next-line no-unused-vars
     //@internal
     _onDomMouseout() {
         this._configMapPreventWheelScroll(true);
+        /**
+        * mouseout event.
+        *
+        * @event ui.UIComponent#mouseout
+        * @type {Object}
+        * @property {String} type - mouseout
+        * @property {ui.UIComponent} target - UIComponent
+        */
+
+        this.fire('mouseout');
     }
 }
 

packages/maptalks/src/ui/UIMarker.ts

@@ -260,9 +260,11 @@ class UIMarker extends Handlerable(UIComponent) {
          */
         this.fire('positionchange');
         if (this.isVisible()) {
+            this._onlyUpdatePosition = true;
             this._coordinate = this._markerCoord;
             this._setPosition();
             this._collides();
+            this._onlyUpdatePosition = false;
         }
         return this;
     }