按配置数据绘制配置型地图marker的icon，自定义marker

一、需求

需要自定义配置数据的marker，其中图片内容要灵活可配置自动生成。此处项目用的百度地图。

效果图：

二、思路

用背景图+canvas绘制数字的方式生成icon的图片资源。

再将icon生成对应地图marker。

三、代码

canvasImg.js

<!--
* @description canvasImg.js 背景图+绘制内容生成图片资源
* @author xw
!-->

export function addFontWithBgImg(file, params, callback) {
    var ready = new FileReader()
    /* 开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
    ready.readAsDataURL(file) // 调用reader.readAsDataURL()方法，把图片转成base64
    ready.onload = function () {
        var re = this.result
        canvasDataURL(re, params, callback)
    }
}

/**
 * path 背景图资源路径
 * params:{ bgImgStyle: 'no-repeat', bgWidth: 35, bgHeight: 48, fontText: 1, fontWidth: 35, fontHeight: 35, font: 'bold 20px PingFangSC', bgc: '#0081FF', fontColor: '#fff' }
 * callback
 *      bgImgStyle = [
            "no-repeat", // 不平铺
            "repeat-x", // 横向平铺
            "repeat-y", // 纵向平铺
            "repeat" // 全画布平铺
        ];
 * */
export function canvasDataURL(path, params, callback) {
    const defaultOptions = {
        bgImgStyle: 'no-repeat',
        bgWidth: 45,
        bgHeight: 48,
        bgc: '#0081FF',
        fontText: 1, // 图片正中 大数字
        font: 'bold 20px PingFangSC',
        fontWidth: 34,
        fontHeight: 39,
        fontColor: '#0081FF',
        fontTwoText: 1, // 右上角 小数字
        font