Cesium 添加标签

思路：利用画布创建标签，根据经纬度所在屏幕位置，实时更新标签位置。
function measureTag(viewer, handlerDis) {
    // 取消双击事件-追踪该位置
    //viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    handlerTag = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

    handlerTag.setInputAction(function (movement) {
        //获取模型上位置
        cartesian = viewer.scene.pickPosition(movement.position);
        //在三维场景中添加Label
        var tagName = "名称";
        var tagId = randomNum(1000,9999)+"";
        //pickedFeature.show = false;
        tagPosArr.push({"id":tagId,"name":tagName,"color":"#000000","position":{"x":Number(cartesian.x),"y":Number(cartesian.y),"z":Number(cartesian.z)}});
        createCanvas(tagName,tagId,movement.position,"#000000");
        tagInterval = setInterval("actionTag()",5);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

//生成随机数
function randomNum(minNum,maxNum){
    switch(arguments.length){
        case 1:
            return parseInt(Math.random()*minNum+1,10);
            break;
        case 2:
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
            break;
        default:
            return 0;
            break;
    }
}
//创建画布
function createCanvas(content,id,screenPos,color){
    var conLen = content.length;
    var canvasList = document.getElementById('cesiumdiv');
    if($("#"+id).length<1){
        var canvas = document.createElement('canvas');
        canvasList.appendChild(canvas);
        canvas.width = 20*conLen+50; //
        canvas.height = 100;
        canvas.id=id;
        canvas.className="modelTag";
        var tagHei = screenPos.y-90;
        var c=document.getElementById(id);
        $(c).css("left",screenPos.x);
        $(c).css("top",tagHei);
        var cxt=c.getContext("2d");
        cxt.strokeStyle=color;
        cxt.arc(3,97,3,0,2*Math.PI,false);
        cxt.moveTo(5,95);
        cxt.lineTo(10,60);
        cxt.moveTo(10,60);
        cxt.lineTo(40,60);
        cxt.lineTo(40,45);
        cxt.arc(45,45,5,1*Math.PI,1.5*Math.PI,false);
        cxt.lineTo(40+20*conLen,40);
        cxt.arc(40+20*conLen+5,45,5,1.5*Math.PI,0,false);
        cxt.lineTo(40+20*conLen+10,75);
        cxt.arc(40+20*conLen+5,75,5,0,0.5*Math.PI,false);
        cxt.lineTo(45,80);
        cxt.arc(45,75,5,0.5*Math.PI,1*Math.PI,false);
        cxt.lineTo(40,60);
        cxt.stroke();

        cxt.font="20px Arial";
        cxt.fillStyle=color;
        //Place each word at y=100 with different textBaseline values
        cxt.textBaseline="top";
        cxt.fillText(content,45,50);
    }
}

//实时更新标签位置
function actionTag(){
    $.each(tagPosArr,function(n,item){
        var itemPos = viewer.scene.cartesianToCanvasCoordinates(item.position);
        $("#"+item.id).css("left",itemPos.x)
        $("#"+item.id).css("top",itemPos.y-90)
    });
}