react 之 openlayer地圖圖片下載

一、原理

地圖渲染是通過canvas來渲染出來的，openlayers提供的map.once('postcompose', function (event) {}）函數可以獲取canvas對象，將canvas轉化成圖片下載下來，便可實現。

二、引入所依賴的文件

import React, { Component } from 'react';
import Map from '../../component/map/map';
import { Button } from 'antd';
import style from './map.css';

三、加載地圖組件和頁面的渲染

render() {
    return (
      <div className={style.mapBg}>
        <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.savePng}>
          導出png
        </Button>
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />;
      </div>
    );
  }

四、canvas轉化成圖片和圖片的下載

 var canvas = event.context.canvas
 var MIME_TYPE = "image/png";

 var imgURL = canvas.toDataURL(MIME_TYPE);

 var dlLink = document.createElement('a');
 dlLink.download = 'map.png';
 dlLink.href = imgURL;
 dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');

 document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);
 });
 map.renderSync();

五、全部代碼

// 設置地圖背景色
import React, { Component } from 'react';
import Map from '../../component/map/map';
import { Button } from 'antd';
import style from './map.css';

class MapOverviewMap extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    // console.log(bg)
  }
  //  地圖保存成png
  savePng =()=>{
    let {map} = this.refs.map
    let that = this
    // 實現canvas轉化成圖片
    map.once('postcompose', function (event) {
        var canvas = event.context.canvas;
        var MIME_TYPE = "image/png";

        var imgURL = canvas.toDataURL(MIME_TYPE);

        var dlLink = document.createElement('a');
        dlLink.download = 'map.png';
        dlLink.href = imgURL;
        dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');

        document.body.appendChild(dlLink);
        dlLink.click();
        document.body.removeChild(dlLink);
        });
        map.renderSync();
   }

  
  render() {
    return (
      <div className={style.mapBg}>
        <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.savePng}>
          導出png
        </Button>
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />;
      </div>
    );
  }
}

export default MapOverviewMap;

六、效果