三维叠加标签代码

 function addLabelEntity(data) {
    
    // viewer.entities.removeAll();
    for (var i = 0; i < data.length; i++) {
        var text;
        if (data[i].NAME) {
            text = data[i].NAME;
        }

        var x = parseFloat(data[i].SMX);
        var y = parseFloat(data[i].SMY);
        var z = parseFloat(data[i].HEIGHT);
        var img = document.getElementById("building");
        // var img = new Image()
        // img.src = "../images/menu-bg.png"
        // img.onload = function(){
        // }
        var wWidth = img.width;
        var wHeight = img.height;
        var canvas = document.createElement("canvas");
        if (canvas == null)
            return false;
        canvas.width = wWidth;
        canvas.height = wHeight;
        //canvas.style.letterSpacing = '30px';
        //获取上下文
        var ctx = canvas.getContext('2d');

        // ctx.drawImage(img, 0, 0);
        ctx.drawImage(img, 0, 0, wWidth, wHeight, 0, 0, wWidth, wHeight);
        // 设置字体
        if(text.length>8){
            ctx.font = "55px bold 微软雅黑";
        }else{
            ctx.font = "60px bold 微软雅黑";
        }
        // 设置颜色
        ctx.fillStyle = "#fff";
        // 设置水平对齐方式
        ctx.textAlign = "center";
        // 设置垂直对齐方式
        ctx.textBaseline = "middle";
        
        
        var _w = ctx.measureText(text).width;
        var _h = ctx.measureText(text).height;
        // 绘制文字(参数:要写的字,x坐标,y坐标)
        ctx.fillText(text, wWidth / 2, 70);
        //console.log(ctx);
        var entity = viewer.entities.add({
            name: "theme",
            description: null,
            position: Cesium.Cartesian3.fromDegrees(x, y, z),
            billboard: {
                image: canvas.toDataURL(),
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                scaleByDistance: new Cesium.NearFarScalar(500, 0.5, 10000, 0.0),
                // width: 32, // default: undefined
                // height: 32, // default: undefined
                // pixelOffset: new Cesium.Cartesian2(0.0, -10.0),
                // pixelOffsetScaleByDistance: new Cesium.NearFarScalar(100, 15, 5000, 0.0),
                // color: Cesium.Color.WHITE,
                // disableDepthTestDistance: Number.POSITIVE_INFINITY//返回正无穷大
            }
        });
    }
}

 

posted @ 2020-07-07 12:51  万里哥  阅读(187)  评论(0编辑  收藏  举报