地图全图打印,框选打印导出图片
- CDN
// 依赖file-save下载图片 <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mapboxgl-print-tool@1.0.5/dist/index.js"></script>
<script> mapboxgl.accessToken = ''; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v9', preserveDrawingBuffer:true //canvas toDataURL }); const mapPrint = new MapPrintTool({ enableImg:true, //是否出图 fileName:'mapDemo.png' // 文件名 }) map.addControl(mapPrint, 'top-right') // 监听打印 获取数据 mapPrint.on('success',function (res) { console.log(res) }) </script>
- 模块化
npm install mapboxgl-print-tool
import MapPrintTool from 'mapboxgl-print-tool' // 打印 const mapPrintTool = new MapPrintTool({ enableImg:true, fileName:'test.jpg' }) this.map.addControl(mapPrintTool,'top-left') //监听获取图片数据 mapPrintTool.on('success',(res) => { console.log(res) })
` | 名称 | 类型 | 描述 | 默认值 |
---|---|---|---|---|
1 | enableImg | Boolean | 是否导出图片 | true |
2 | fileName | String | 导出的图片文件名 | 'map.jpg' |
- 监听
success
,获取canvas
转成的图片数据base64
const mapPrint = new MapPrintTool() mapPrint.on('success',(res) => { console.log(res) })