react 之 openlayer地图图片下载

该博客介绍了利用OpenLayers实现地图渲染及图片下载的方法。其原理是通过canvas渲染地图,利用openlayers的map.once函数获取canvas对象,将其转化为图片下载。还包含引入依赖文件、加载地图组件与页面渲染、代码展示及效果呈现等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、原理

地图渲染是通过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;

六、效果

 

 

 

 

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值