zoukankan      html  css  js  c++  java
  • 三维叠加标签代码

     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),
                    //  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//返回正无穷大
                }
            });
        }
    }
  • 相关阅读:
    Spring5源码--Spring AOP使用接口方式实现 配置xml文件
    什么是 JavaConfig?
    Spring Boot 有哪些优点?
    什么是 Spring Boot?
    问:一台客户端有三百个客户与三百个客户端有三百个客户对服务器施压,有什么区别?
    如何实现参数级联查询
    如何开发主从报表
    如何在报表中实现算法的可挂接需求
    如何实现报表的批量打印需求
    如何实现参数和报表间的联动效果
  • 原文地址:https://www.cnblogs.com/wanlige/p/13260133.html
Copyright © 2011-2022 走看看