mcfxkh-Web/src/views/Home/components/Title/index.js

import { IconButton } from '@material-ui/core';
import { FirstPage, Language, LastPage, SaveAlt } from '@material-ui/icons';
import React, { useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { hidePanels } from '../../../../models/map/selectors';
import { mgrHomePage } from '../../../../models/_/menu';
import { genLegend } from '../Legend/_';
import './Title.less';
import config from '../../../../config';

function downImg(url) {
  let a = document.createElement("a")
  let clickEvent = document.createEvent("MouseEvents");
  a.setAttribute("href", url)
  a.setAttribute("download", '图片快照')
  a.setAttribute("target", '_blank')
  clickEvent.initEvent('click', true, true)
  a.dispatchEvent(clickEvent);
}

export default function Title() {
  const dispatch = useDispatch();
  const inputRef = useRef();

  const hp = useSelector(hidePanels);
  const layerVisible = useSelector(s => s.map.layerVisible);

  const doSearch = () => dispatch.map.openSearch(inputRef.current.value);

  const searchPressed = (e) => {
    if (e.keyCode === 13) {
      doSearch();
    }
  }

  const showLayersDlg = () => {
    dispatch.runtime.setInfoDlg({ layerId: 'Layers' });
  }

  const toggleHidePanels = () => {
    dispatch.map.setHidePanels(!hp);
  }

  const ExportImage = async () => {
    const map = window.__mapref;
    if (!map) {
      return;
    }

    const sc = map.getCanvas();
    const { width, height } = sc;
    console.log(width, height);

    const c = document.createElement('canvas');
    c.width = width;
    c.height = height;
    const ctx = c.getContext('2d');

    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, width, height);


    ctx.drawImage(sc, 0, 0);

    const legend = await genLegend(layerVisible);
    if (legend) {
      ctx.drawImage(legend.canvas, 0, 0, legend.width, legend.height, 32, 32, legend.width, legend.height);
    }

    const img = c.toDataURL('image/png');
    downImg(img);
  }

  const fullMap = () => {
    dispatch.runtime.setHome();
  }

  return (
    <div className="dp-title">
      <div className="action">
        <div className="menu-bar">
          <span className="cursor-pointer" onClick={showLayersDlg}>图层</span>
        </div>
        <div className="extra">
          <IconButton size="small" onClick={toggleHidePanels}>
            {
              hp ? <LastPage className="button-color" /> : <FirstPage className="button-color" />
            }
          </IconButton>
          <IconButton size="small" onClick={ExportImage}>
            <SaveAlt className="button-color" />
          </IconButton>
          <IconButton size="small" onClick={fullMap}>
            <Language className="button-color" />
          </IconButton>
        </div>
      </div>
      <div className="title">{`${config.title}`}</div>
      <div className="action">
        <div className="menu-bar">
          <Link style={{ color: '#00deff' }} to={mgrHomePage()}>管理平台</Link>
        </div>
        <div className="extra">
          {
            !hp && (
              <div className="title-search-input">
                <input placeholder="搜索系统..." ref={inputRef} onKeyDown={searchPressed}></input>
                <button type="submit">
                  <i className="ionicons search" onClick={doSearch}></i>
                </button>
              </div>
            )
          }
        </div>
      </div>
    </div>
  )
}