MapGIS Client for JavaScript API

import { Zondy, defaultValue, PictureFormat } from '@mapgis/webclient-common'
import * as L from '@mapgis/leaflet'
import EasyPrint from '@mapgis/leaflet-easyprint/src/index'
/**
 * 屏幕打印工具
 * @class Screenshot
 * @moduleEX ViewModule
 * @extends Widget
 * @param {Object} options 构造参数
 * @param {Array<String>} [options.sizeModes] 目前支持 ['Current', 'A4Landscape', 'A4Portrait']
 * @param {String} [options.filename] 打印文件名
 * @param {Boolean} [options.exportOnly] 是否仅导出
 * @param {Boolean} [options.hideControlContainer] 隐藏控件容器
 * @example <caption><h7>初始化打印工具</h7></caption>
 * // ES5引入方式
 * const { Map, MapView } = Zondy
 * const { Screenshot } = Zondy.Widgetthis.view
 * // ES6引入方式
 * import { Map, MapView, Screenshot } from "@mapgis/webclient-leaflet-plugin"
 * // 初始化图层管理容器
 * const map = new Map();
 * // 初始化地图视图对象
 * const mapView = new MapView({
 *   // 视图id
 *   viewId: "viewer-id",
 *   // 图层管理容器
 *   map: map
 * });
 * // 打印控件
 * const screenshot = new Screenshot({
 *   view: mapView,
 *   visible: true
 * })
 * // 添加控件
 * mapView.ui.add(screenshot)
 */
class Screenshot {
  constructor(options) {
    options = defaultValue(options, {})
    /**
     * 视图对象
     */
    this.view = defaultValue(options.view, null)
    /**
     * 打印图片类型，支持输出png、jpeg、svg格式图片
     */
    this.format = defaultValue(options.format, PictureFormat.png)
    /**
     * 浏览器下载文件名
     */
    this.filename = defaultValue(options.filename, 'screenshotFile')
    /**
     * 图片宽度
     */
    this.width = defaultValue(options.width, undefined)
    /**
     * 图片高度
     */
    this.height = defaultValue(options.height, undefined)
    /**
     * 图片原点x
     */
    this.x = defaultValue(options.x, 0)
    /**
     * 图片原点y
     */
    this.y = defaultValue(options.y, 0)
    /**
     * 是否下载图片
     */
    this.isDownload = defaultValue(options.isDownload, true)
    this._print = undefined
    /**
     * 加载EasyPrint插件
     * @private
     * */
    this._initEasyPrint()
  }

  _initEasyPrint() {
    EasyPrint(L)
  }

  /**
   * 添加视图打印对象
   * @private
   * */
  _addView() {
    const mapView = this.view._innerView
    if (mapView) {
      // 添加打印控件
      const printOptions = {
        format: this.format,
        sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
        filename: '新地图',
        exportOnly: true,
        hidden: true,
        hideControlContainer: true
      }
      // if (this.width) {
      //   printOptions.width = this.width
      // }
      // if (this.height) {
      //   printOptions.height = this.height
      // }
      // if (this.isDownload) {
      //   printOptions.isDownload = this.isDownload
      // }
      this._print = L.EasyPrint(printOptions).addTo(mapView)
      return new Promise((resolve)=>{
        this._print.printMap('CurrentSize', this.filename).then((result) => {
          this._cutImage(result.dataUrl).then((cutResult) => {
            resolve({dataUrl: cutResult.dataUrl})
          })

        })
      })
    }
  }

  _cutImage(dataUrl) {
    const self = this
    const canvas = document.createElement('canvas')
    canvas.width = this.width
    canvas.height = this.height
    const context = canvas.getContext('2d')

    const downloadImage = function (data, filename) {
      const a = document.createElement('a')
      a.href = data
      a.download = filename
      document.body.appendChild(a)
      a.click()
    }
    return new Promise((resolve)=>{
      if (this.width && this.height) {
        const img = new Image()
        img.src = dataUrl
        img.onload = function () {
          context.drawImage(
            img,
            self.x,
            self.y,
            self.width,
            self.height,
            0,
            0,
            self.width,
            self.height
          )
          let dataUrl2d = null
          if (self.format === PictureFormat.png) {
            dataUrl2d = canvas.toDataURL()
          } else if (self.format === PictureFormat.jpeg) {
            dataUrl2d = canvas.toDataURL('image/jpeg')
          } else if (self.format === 'svg') {
            dataUrl2d = canvas.toDataURL()
          }
          if (self.isDownload) {
            downloadImage(dataUrl2d, self.filename)
          }
          resolve({dataUrl: dataUrl2d})
        }
      } else {
        if (self.isDownload) {
          downloadImage(dataUrl, this.filename)
        }
        resolve({dataUrl})
      }
    })
  }

  /**
   * 添加视图打印对象
   * @private
   * */
  _removeView() {
    super._removeView()
    const mapView = this.view._innerView
    if (mapView) {
      if (this._print) {
        mapView.removeControl(this._print)
        this._print = null
      }
    }
  }
}

Zondy.Widget.Screenshot = Screenshot
export default Screenshot