Cesium文字贴图

实现效果

关键代码

 this.polygonEntity = this.viewer.entities.add({
            plotType: this.properties.plotBase,
            plotCode: this.properties.plotCode,
            polygon: {
                hierarchy: this.getPositions(),
                material: new Cesium.ImageMaterialProperty({
                    image: drawText(this.style),
                    transparent: true,
                    color: Cesium.Color.WHITE
                }),
                stRotation: Cesium.Math.toRadians(this.style.stRotation),
                classificationType: Cesium.ClassificationType.BOTH
            },
        })

  this.wallEntity = this.viewer.entities.add({
            plotType: this.properties.plotBase,
            plotCode: this.properties.plotCode,
            wall: {
                positions: new Cesium.CallbackProperty(e => {
                    return this.positions
                }, false),
                minimumHeights: new Cesium.CallbackProperty(e => {
                    return this.minimumHeights //最小高度集合
                }, false),
                maximumHeights: new Cesium.CallbackProperty(e => {
                    return this.maximumHeights
                }, false),
                material: new Cesium.ImageMaterialProperty({
                    image: drawText(this.style),
                    transparent: true,
                    color: Cesium.Color.WHITE
                }),
                outline: false,
                outlineWidth: 10,
                outlineColor: Cesium.Color.AQUA
            }
        });

export function drawText(style) {
    const text = style.text;
    var c = document.createElement("canvas");
    const d = (text + "").length * style.fontSize;
    c.width = d;
    c.height = style.fontSize;
    var ctx = c.getContext("2d");

    ctx.fillStyle = style.color;
    ctx.font = "bold " + style.fontSize + "px 微软雅黑"; //设置字体
    ctx.textBaseline = 'hanging'; //在绘制文本时使用的当前文本基线 
    //绘制文本  
    ctx.fillText(text, 0, 0);
    return c;
}

详情参见 Cesium实战专栏