avatar

目录
mapboxgl-print-tool

mapboxgl-print-tool

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

使用

  • CDN

    Javascript
    1
    2
    3
    4
    // 依赖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>
    Code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     ```js
    <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>
  • 模块化

    Code
    1
    npm install mapboxgl-print-tool
    Javascript
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import MapPrintTool from 'mapboxgl-print-tool'
    mapboxgl.accessToken = 'pk.eyJ1IjoiamVyY2t5IiwiYSI6ImNqYjI5dWp3dzI1Y2YzMnM3eG0xNnV3bWsifQ.eQp4goc9Ng8SuEZcdgNJ_g';
    var map = new mapboxgl.Map({...})
    var mapPrintTool = new MapPrintTool({
    enableImg:true,
    fileName:'test.jpg'
    })
    map.addControl(mapPrintTool,'top-left')
    //监听获取图片数据
    mapPrintTool.on('success',(res) => {
    console.log(res)
    })

配置项 – 两个绑定出现

` 名称 类型 描述 默认值
1 enableImg Boolean 是否导出图片 true
2 fileName String 导出的图片文件名 ‘map.jpg’

事件

  • 监听 success,获取 canvas转成的图片数据 base64
    Javascript
    1
    2
    3
    4
    const mapPrint = new MapPrintTool()
    mapPrint.on('success',(res) => {
    console.log(res)
    })

效果

  • 界面

  • 全图打印

  • 框选打印

源码

音乐小憩


        
文章作者: LiuYang
文章链接: https://jercky.top/2020/01/08/mapboxgl-print-tool/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Jercky
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论