Skip to content
地图全图打印,框选打印导出图片
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
example
src
.babelrc
README.md
package.json
webpack.config.js

README.md

mapboxgl-print-tool

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

使用

  • 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 = 'pk.eyJ1IjoiamVyY2t5IiwiYSI6ImNqYjI5dWp3dzI1Y2YzMnM3eG0xNnV3bWsifQ.eQp4goc9Ng8SuEZcdgNJ_g';
           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)
      })

效果

  • 界面

  • 全图打印

  • 框选打印

You can’t perform that action at this time.