leaflet 缩放动画 （自定义弹窗）

leaflet 缩放动画

默认方法

• zoomanim事件与_zoomAnimation方法与默认类名leaflet-zoom-animated；

// 自定义覆盖物类
var CustomOverlay = L.Layer.extend({
    initialize: function(content, options) {
        this._content = content;
        L.setOptions(this, options);
    },

    onAdd: function(map) {
        this._map = map;
        this._container = L.DomUtil.create('div', 'custom-overlay leaflet-zoom-animated');
        this._container.style.position = 'absolute';
        this._container.style.zIndex = 101;
        this._container.innerHTML = this._content;
        map.getPanes().overlayPane.appendChild(this._container);
        if (L.Browser.any3d) {
            map.on("zoomanim", this._zoomAnimation, this); //默认动画效果与类名leaflet-zoom-animated搭配使用。
        }
        this._initposition();

    },
    onRemove: function() {
        map.off({
                zoomanim: this._zoomAnimation,
            },
            this
        );
        this._container.remove();
    },
    _zoomAnimation: function(a) {
        var point = this._map._latLngToNewLayerPoint(this.options.position, a.zoom, a.center);
        point.y = point.y - 150;
        point.x = point.x - 26;
        L.DomUtil.setTransform(this._container, point);
    },
    _initposition: function() {
        var point = this._map.latLngToLayerPoint(this.options.position);
        point.y = point.y - 150;
        point.x = point.x - 26;
        L.DomUtil.setTransform(this._container, point);
    }
});

export default CustomOverlay;

自定义方法

• zoomstart 与 zoomend事件搭配css过渡实现；

// 自定义覆盖物类
var CustomOverlay = L.Layer.extend({
    initialize: function(content, options) {
        this._content = content;
        L.setOptions(this, options);
    },

    onAdd: function(map) {
        this._map = map;
        this._container = L.DomUtil.create('div', 'custom-overlay');
        this._container.style.position = 'absolute';
        this._container.style.zIndex = 101;
        this._container.innerHTML = this._content;
        map.getPanes().overlayPane.appendChild(this._container);

        this._initposition();

        map.on('zoomend', () => {
            this._zoomAnimation();
            this._container.classList.remove('zoom-animating');
        });

        map.on('zoomstart', () => {
            this._initposition();
            this._container.classList.add('zoom-animating');
        });


    },
    onRemove: function() {
        this._container.remove();
    },
    _zoomAnimation: function(a) {
        let point = { x: 100, y: 88 }
        L.DomUtil.setTransform(this._container, point);
    },
    _initposition: function() {
        let point = { x: 900, y: 88 }
        L.DomUtil.setTransform(this._container, point);
    }
});

export default CustomOverlay;

.zoom-animating  {
  -webkit-transition: -webkit -transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
}