uimaker support min/max zoom (#1323)

Author: deyihu

src/ui/UIComponent.js

@@ -44,6 +44,7 @@ const options = {
     'animationDuration': 500,
     'pitchWithMap': false,
     'rotateWithMap': false,
+    'visible': true
 };
 
 /**
@@ -133,7 +134,7 @@ class UIComponent extends Eventable(Class) {
         if (!map) {
             return this;
         }
-
+        this.options['visible'] = true;
         if (!this._mapEventsOn) {
             this._switchMapEvents('on');
         }
@@ -201,8 +202,10 @@ class UIComponent extends Eventable(Class) {
                 dom.style[TRANSFORM] = this._toCSSTranslate(this._pos) + ' scale(0)';
             }
         }
-
-        dom.style.display = '';
+        //not support zoom filter show dom
+        if (!this.isSupportZoomFilter()) {
+            dom.style.display = '';
+        }
 
         if (this.options['eventsToStop']) {
             on(dom, this.options['eventsToStop'], stopPropagation);
@@ -243,7 +246,7 @@ class UIComponent extends Eventable(Class) {
         if (!this.getDOM() || !this.getMap()) {
             return this;
         }
-
+        this.options['visible'] = false;
         const anim = this._getAnimation(),
             dom = this.getDOM();
         if (!this.options['animationOnHide']) {
@@ -284,6 +287,9 @@ class UIComponent extends Eventable(Class) {
      * @returns {Boolean} true|false
      */
     isVisible() {
+        if (!this.options['visible']) {
+            return false;
+        }
         const dom = this.getDOM();
         return this.getMap() && dom && dom.parentNode && dom.style.display !== 'none';
     }
@@ -629,6 +635,10 @@ class UIComponent extends Eventable(Class) {
         }
     }
 
+    isSupportZoomFilter() {
+        return false;
+    }
+
     /*
      *
      * @param {Geometry||ui.UIMarker} owner

src/ui/UIMarker.js

@@ -1,4 +1,4 @@
-import { isString, flash } from '../core/util';
+import { isString, flash, isNil, extend } from '../core/util';
 import { on, off, createEl, stopPropagation } from '../core/util/dom';
 import Browser from '../core/Browser';
 import Handler from '../handler/Handler';
@@ -23,7 +23,9 @@ const options = {
     'draggable': false,
     'single': false,
     'content': null,
-    'altitude': 0
+    'altitude': 0,
+    'minZoom': 0,
+    'maxZoom': null
 };
 
 const domEvents =
@@ -438,6 +440,47 @@ class UIMarker extends Handlerable(UIComponent) {
         return this.getMap().coordToViewPoint(this._coordinate, undefined, alt)
             ._add(this.options['dx'], this.options['dy']);
     }
+
+    _getDefaultEvents() {
+        return extend({}, super._getDefaultEvents(), { 'zooming zoomend': this.onZoomFilter });
+    }
+
+    _setPosition() {
+        //show/hide zoomFilter
+        this.onZoomFilter();
+        super._setPosition();
+    }
+
+    onZoomFilter() {
+        const dom = this.getDOM();
+        if (!dom) return;
+        if (!this.isVisible() && dom.style.display !== 'none') {
+            dom.style.display = 'none';
+        } else if (this.isVisible() && dom.style.display === 'none') {
+            dom.style.display = '';
+        }
+    }
+
+    isVisible() {
+        const map = this.getMap();
+        if (!map) {
+            return false;
+        }
+        if (!this.options['visible']) {
+            return false;
+        }
+        const zoom = map.getZoom();
+        const { minZoom, maxZoom } = this.options;
+        if (!isNil(minZoom) && zoom < minZoom || (!isNil(maxZoom) && zoom > maxZoom)) {
+            return false;
+        }
+        const dom = this.getDOM();
+        return dom && true;
+    }
+
+    isSupportZoomFilter() {
+        return true;
+    }
 }
 
 UIMarker.mergeOptions(options);