fix ui collision when collision state change

packages/maptalks/src/map/Map.Collision.ts

@@ -11,7 +11,9 @@ declare module "./Map" {
         _insertUICollidesQueue(): this
         uiCollides(): this
         //@internal
-        _addUI(ui: UIComponent): this
+        _addUI(ui: UIComponent): this;
+        //@internal
+        _sortUI(): this
         //@internal
         _removeUI(ui: UIComponent): number
     }
@@ -79,6 +81,7 @@ Map.include({
             const ui = uiList[i];
             const { collisionBufferSize, collision } = ui.options;
             if (!collision) {
+                ui._collidesEffect(true);
                 continue;
             }
             const dom = ui.getDOM();
@@ -137,6 +140,11 @@ Map.include({
             return this;
         }
         this.uiList.push(ui);
+        return this._sortUI();
+    },
+
+    _sortUI() {
+        this.uiList = this.uiList || [];
         this.uiList = this.uiList.sort((a, b) => {
             return b.options['collisionWeight'] - a.options['collisionWeight'];
         });

packages/maptalks/src/ui/UIComponent.ts

@@ -62,6 +62,8 @@ const options: UIComponentOptionsType = {
     'zIndex': 0
 };
 
+const COLLISION_STATES = ['collision', 'collisionBufferSize', 'collisionWeight', 'collisionFadeIn']
+
 /**
  * @classdesc
  * Base class for all the UI component classes, a UI component is a HTMLElement positioned with geographic coordinate. <br>
@@ -992,8 +994,26 @@ class UIComponent extends Eventable(Class) {
         return false;
     }
 
-    onConfig() {
+    onConfig(config: Record<string, any>) {
+        let collisionStateChange = false;
+        if (config) {
+            for (let i = 0, len = COLLISION_STATES.length; i < len; i++) {
+                const key = COLLISION_STATES[i];
+                if (key in config) {
+                    collisionStateChange = true;
+                    break;
+                }
+            }
+        }
         this._updatePosition();
+        //https://github.com/maptalks/maptalks.js/issues/2609
+        if (collisionStateChange) {
+            this._collides();
+            const map = this.getMap();
+            if (map && map._sortUI) {
+                map._sortUI();
+            }
+        }
         return this;
     }
 

packages/maptalks/test/ui/UIMarkerSpec.js

@@ -266,4 +266,33 @@ describe('UI.UIMarker', function () {
         }
         done();
     });
+
+    it('#2607 collision should update when collision state change', function (done) {
+        var marker1 = new maptalks.ui.UIMarker(map.getCenter(), {
+            content: '<div id="uimarker" class="text-marker" style="width:100px;height:40px;background:black;color:white;text-align:center;">maptalks</div>',
+            verticalAlignment: 'top',
+            collision: true
+        }).addTo(map);
+        var marker2 = new maptalks.ui.UIMarker(map.getCenter(), {
+            content: '<div id="uimarker" class="text-marker" style="width:100px;height:40px;background:black;color:white;text-align:center;">maptalks</div>',
+            verticalAlignment: 'top',
+            collision: true
+        }).addTo(map);
+
+        setTimeout(() => {
+            expect(marker1.getDOM().style.visibility).to.be.equal('visible');
+            expect(marker2.getDOM().style.visibility).to.be.equal('hidden');
+            marker2.config({
+                collision: false
+            });
+            setTimeout(() => {
+                expect(marker1.getDOM().style.visibility).to.be.equal('visible');
+                expect(marker2.getDOM().style.visibility).to.be.equal('visible');
+                done();
+            }, 100);
+        }, 100);
+
+
+
+    });
 });