liwenda122 / mapboxgl-print-tool Goto Github PK

地图全图打印，框选打印导出图片

• 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/[email protected]/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)
    })
   

• 监听 success，获取 canvas 转成的图片数据 base64

    const mapPrint = new MapPrintTool()
    mapPrint.on('success',(res) => {
        console.log(res)
    })

• 界面
  

• 全图打印
  

• 框选打印