按配置数据绘制配置型地图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, // 右上角 小数字
        fontTwo: 'bold 10px PingFangSC',
        fontTwoColor: '#fff',
        fontTwoPositionX: 35,
        fontTwoPositionY: 10,
    }
    const options = Object.assign(defaultOptions, params)
    const { bgImgStyle, bgWidth, bgHeight, fontText, fontWidth, fontHeight, font, bgc, fontColor, fontTwoText, fontTwo, fontTwoColor, fontTwoPositionX, fontTwoPositionY } = options
    // console.log('createNumberImg()-options', options)
    const img = new Image()
    img.src = path
    img.onload = function () {
        const canvas = document.createElement('canvas');
        // document.body.appendChild(canvas); //将画布添加到页面上
        // 设置画布大小
        canvas.width = bgWidth;
        canvas.height = bgHeight;
        // context 获取2D上下文
        const ctx = canvas.getContext('2d');
        // 清空画布内容
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // ctx.fillStyle = ctx.createPattern(img, bgImgStyle);
        // ctx.fillRect(0, 0, canvas.width, canvas.height);
        // ctx.fill();
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)  //绘制背景图片

        // 背景色 部分，会覆盖背景图, 背景色做背景 和 背景图做背景 二选一
        // ctx.fillStyle = bgc
        // 背景画布设置完后，绘制第2层内容， 覆盖在背景上的 内容---ctxTwo--fillText
        // const ctxTwo = canvas.getContext('2d');
        ctx.font = font
        ctx.fillStyle = fontColor
        ctx.textAlign = 'center' // 水平居中 left center right ,positionX = fontWidth / 2
        const positionX = fontWidth / 2
        ctx.textBaseline = 'middle' // 垂直居中 top  middle bottom,  positionY = fontHeight / 2
        const positionY = fontHeight / 2
        ctx.fillText(String(fontText), positionX, positionY)

        ctx.font = fontTwo
        ctx.fillStyle = fontTwoColor
        ctx.fillText(String(fontTwoText), fontTwoPositionX, fontTwoPositionY)
        // 导出为图片数据URL
        const imageDataUrl = canvas.toDataURL('image/png', 1); // canvas.toDataURL('image/png', 1)
        // console.log("生成的图像资源链接：", imageDataUrl);
        callback(imageDataUrl)
    }

}


/**
 * 将以base64的图片url数据转换为Blob
 * @param urlData
 * 用url方式表示的base64图片数据
 */
export function convertBase64UrlToBlob(urlData) {
    const arr = urlData.split(',')
    const mime = arr[0].match(/:(.*?);/)[1]
    const bstr = atob(arr[1])
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new Blob([u8arr], { type: mime })
}

具体使用

createIconImg() {
                // 图片资源 自己找几个bg 在项目里本地引用
                const iconNormal = require('@/assets/image/bg/normal.png');
                const iconDanger = require('@/assets/image/bg/danger.png'); 
                const iconInfo = require('@/assets/image/bg/info.png'); 
                const userImgMap = {
                    '0': iconInfo,
                    '1': iconNormal,
                    '2': iconNormal,
                    '3': iconDanger,
                }
                const fontColorMap = {
                    '0': '#666',
                    '1': '#0081FF',
                    '2': '#0081FF',
                    '3': 'red',
                }
const pointList = [
                    { lng: '113.939435', lat: '22.522226', completeStatus: '0', frequency: 1 },
                    { lng: '113.947254', lat: '22.524549', completeStatus: '1', frequency: 3 },
                    { lng: '113.945889',  lat: '22.520798', completeStatus: '2',  frequency: 4 },
                ]
                // 设置地图 marker ---此处用的百度地图--BMap--使用 canvasDataURL方法
                const markers = []
                if (BMap && pointList && pointList.length > 0) {
                    const mapRef = this.$refs.map
                    mapRef?.clearOverlays()
                    // 生成的icon图片bgWidth背景宽高 要和 canvas画布宽高保持一致
                    const bgWidth = 45
                    const bgHeight = 48
                    const iconSize = new BMap.Size(bgWidth, bgHeight)
                    const iconOptions = { offset: new BMap.Size(25, 50) }
                    pointList.forEach((em, idx) => {
                        const userImg = userImgMap[String(em.completeStatus) || '0']
                        const fontColor = fontColorMap[String(em.completeStatus) || '0']
                        const params = { bgWidth, bgHeight, fontText: String(idx+1), fontColor, fontTwoText: String(em.frequency)} 
                        // 生成图片资源
                        canvasDataURL(userImg, params, function (imgUrl) {
                            const siteMarker = this.createMarker(mapRef, imgUrl, iconSize, iconOptions, item, index)
                            markers.push(siteMarker)
                        })
                    })
                    setTimeout(() => { 
                        const centerPoint = new BMap.Point(Number(selectRow.pointList[0]?.lng), Number(selectRow.pointList[0]?.lat));
                        mapRef.centerAndZoom(centerPoint, 15)
                    }, 300)
                }
            },
            createMarker(mapRef, iconImg, item, index) {
                const siteIcon = new BMap.Icon(
                    iconImg,
                    iconSize,
                    iconOptions,
                )
                const sitePoint = new BMap.Point(Number(item.lng), Number(item.lat));
                const siteMarker = new BMap.Marker(sitePoint, {
                    icon: siteIcon
                })
                // siteMarker.lisaSiteInfo = item // lisaSiteInfo自定义字段 主要装item信息，在InfoWindow的innerHtml时使用
                // const newHtml = '<div class="">我是innerHtml</div>'
                // console.log('newHtml', newHtml)
                // const infoWindow = new BMap.InfoWindow({
                //     content: newHtml,
                //     InfoWindowOptions: {
                //         width: 400,
                //         height: 300,
                //         enableAutoPan: true,
                //     }
                // })
                siteMarker.on('click', function () {
                    alert("carText模拟触发了地图click事件!");
                    // console.log('mapRef', mapRef)
                    // mapRef.openInfoWindow(infoWindow, sitePoint); //开启信息窗口
                })
                mapRef.addOverlay(siteMarker)
                return siteMarker
            },