【mars3d】聚合点更改样式 ， 自定义背景

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

问题：绘制出来的效果，经常只有数字，没有背景图，移动过去才有背景图。

1.通过 mars3d的方法 getTextImage （Util - Mars3D API文档http://mars3d.cn/api/Util.html?classFilter=util#.getTextImage）将文字转换成base64图片，但是会出现上面的问题；

在第二步说正确操作

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.使用Canvas转图片 ，mars3d也有对应示例参考

（示例地址： 功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技）

中有个文件  CanvasBillboard.js ，需要引入；

之后 getImage 中使用该方法即可；

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")
}