openlayermap/src/controls/FullScreen.js

openlayer Map Component for Vue 2.0

/**
 * Created by huhongxun  on 2017/9/19.
 * @desc 全屏控制
 */
import ol from 'openlayers'
import '../asset/scss/fullScreen.css'
import {BASE_CLASS_NAME} from '../constants'
import screenfull from 'screenfull'
import DomUtils from 'nature-dom-util'
const htmlUtils = DomUtils.htmlUtils
const Events = DomUtils.Events
const EventType = DomUtils.EventType
ol.control.FullScreenMenu = function (params = {}) {
  let options = params

  /**
   * 基础类名
   * @type {string}
   */
  let className = options.className !== undefined ? options.className : 'hmap-control-full-screen'
  /**
   * 快捷键
   * @private
   * @type {boolean}
   */
  this.keys_ = options.keys !== undefined ? options.keys : false

  /**
   * 图标大小
   * @type {[*]}
   * @private
   */
  this.size_ = options.size !== undefined ? options.size : [16, 16]

  /**
   * 要放大的容器
   */
  this.source_ = options.source

  /**
   * delta 初始化地图元素
   */
  this.element_ = this.initDomInternal_(className)

  ol.control.Control.call(this, {
    element: this.element_,
    target: options.target
  })
}
ol.inherits(ol.control.FullScreenMenu, ol.control.Control)

/**
 * 处理点击事件
 * @param event
 * @private
 */
ol.control.FullScreenMenu.prototype.handleClick_ = function (event) {
  event.preventDefault()
  let map = this.getMap()
  if (map) {
    let element = null
    if (this.source_) {
      element = typeof this.source_ === 'string'
        ? document.getElementById(this.source_) : this.source_
    } else {
      element = this.getMap().getTargetElement()
    }
    if (screenfull.enabled) {
      screenfull.toggle(element)
      screenfull.on('change', () => {
        if (screenfull.isFullscreen) {
          this.element_.firstElementChild.classList.remove('hmap-control-full-screen-inner')
          this.element_.firstElementChild.classList.add('hmap-control-full-screen-inner-deactive')
        } else {
          this.element_.firstElementChild.classList.remove('hmap-control-full-screen-inner-deactive')
          this.element_.firstElementChild.classList.add('hmap-control-full-screen-inner')
        }
      })
    }
  }
}

/**
 * 初始化相关dom
 * @param className
 * @param delta
 * @returns {Element}
 * @private
 */
ol.control.FullScreenMenu.prototype.initDomInternal_ = function (className) {
  let element = htmlUtils.create('div', (className + ' ' + BASE_CLASS_NAME.CLASS_UNSELECTABLE))
  let inner = htmlUtils.create('span', className + '-inner', element)
  inner.setAttribute('title', '全屏')
  Events.listen(element, EventType.CLICK, this.handleClick_, this)
  return element
}

let olControlFullScreenMenu = ol.control.FullScreenMenu
export default olControlFullScreenMenu