Mars3d自定义聚合点的图标样式

期望：

自定义聚合点的背景图片，图片上显示聚合的数目

问题：

getImage里面应该怎么写呢？

1.目前代码实现存在问题，数量已经可以得到的，样式可以通过canvas和图片结合来实现。

用canvas绘制图片和数字，再转成图片return回去？此时绘制出来的效果，经常只有数字，没有背景图，移动过去才有背景图。

item.graphicLayer = new mars3d.layer.BusineDataLayer({

            data: jhData,
            dataColumn: "data", // 数据接口中对应列表所在的取值字段名
            lngColumn: "JD",
            latColumn: "WD",
            altColumn: "z",
            symbol: {
                type: "billboard", // 对应是 mars3d.graphic.BillboardEntity
                styleOptions: {
                    image: item.src,
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    scaleByDistance: new Cesium.NearFarScalar(
                        1000,
                        0.7,
                        5000000,
                        0.3
                    ),
                    label: {
                        // text: "{BHMC}",
                        font_size: 19,
                        color: Cesium.Color.AZURE,
                        outline: true,
                        outlineColor: Cesium.Color.BLACK,
                        outlineWidth: 2,
                        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        pixelOffset: new Cesium.Cartesian2(10, 0), // 偏移量
                        distanceDisplayCondition:
                            new Cesium.DistanceDisplayCondition(0.0, 80000),
                    },
                },
            },
            // 点的聚合配置
            clustering: {
                enabled: true,
                pixelRange: 50,
                clampToGround: true,
                style: {
                    image: obj.markerJh,
                    width: 38,
                    heihgt: 87,
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                },
                getImage: (count) => {
                    // obj.markerJh
                    let html1 = `<div>${count}</div>`;
                    let html = mars3d.Util.getTemplateHtml(count, {});
                    html = mars3d.Util.getTextImage(count, {
                        background: true,
                        backgroundColor: Cesium.Color.TRANSPARENT,
                    });
                    return html;
                },
            },
            attr: obj,
        });
        this.myMap.addLayer(item.graphicLayer);

2.以下是正确实现方案：

getImage需要返回billboard.image支持的canves渲染的图片即可，所以需要读取image渲染到图片并写上数字，参考Mars3d示例源码（源码地址：mars3d-vue-example: mars3d功能示例，Vue版本）文件：

src\example\graphic\entity\billboard-canvas\CanvasBillboard.js

getImage:function(count){
    const canvas = document.createElement("canvas")
    canvas.id = this.id
    canvas.width = this.style.width
    canvas.height = this.style.height

    const ctx = canvas.getContext("2d")
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    // 绘制图片
    ctx.drawImage(this._pngImage, 0, 0)

    // 绘制文字
    ctx.fillStyle = "rgb(255, 255, 255)"
    ctx.font = "55px 楷体"
    ctx.textBaseline = "middle" 
    ctx.fillText(count, 160, canvas.height / 2) 

    // 将图片赋予给矢量对象进行显示，this.image是父类的属性
    // this.image = canvas
    return canvas.toDataURL("image/png")
}