Source: ext/control/FullscreenControl.js

import * as maptalks from '../../libs/maptalks'

class FullscreenControl extends maptalks.control.Control {
    /**
     * 全屏控件类
     * @constructor
     * @param {Object} options 配置参数
     * @param {String} options.position 控件显示位置,目前支持左下:‘bottom-left’ 和右下:‘bottom-right’,默认为左下。
     */
    constructor (options = {}) {
        if (options.position === undefined) {
            options.position = 'bottom-left'
        }
        super(options)
    }

    /**
     * 生成控件
     * @param {Object} map maptalks原生地图对象
     * @returns {any} 控件dom对象
     */
    buildOn(map) {
        this.map = map

        const dom = maptalks.DomUtil.createEl('img', 'maptalks-fullscreen')
        dom.src = 'images/all.png'
        this._img = dom

        this._registerDomEvents()
        return dom
    }

    /**
     * 添加到地图
     * @param {Object} map maptalks原生地图对象或EasyMap对象
     * @returns {*} this
     */
    addTo(map) {
        if (map instanceof emap.EasyMap) {
            map = map.map
        }
        return super.addTo(map)
    }

    /**
     * 注册全屏按钮的dom事件
     * @private
     */
    _registerDomEvents() {
        if (this._img) {
            maptalks.DomUtil.addDomEvent(this._img, 'click', this._requestFullScreen, this)
        }
    }

    /**
     * 全屏 or not全屏
     * @param e
     * @private
     */
    _requestFullScreen(e) {
        this.map.isFullScreen() ? this.map.cancelFullScreen() : this.map.requestFullScreen()
    }
}

export default FullscreenControl