Cesium点击图标弹出div动态显示图标信息

使用cesium先引入cesium.js

// An highlighted block
<script type="text/javascript" src="Build/Cesium/Cesium.js"></script>

弹出的div

// An highlighted block
//这是弹出来的div 可以根据需求换成table
<div class="ysc-dynamic-layer" id="bubble" style="opacity: 1; left: 1012.88px; top: 238.831px; display: none;height: 400px">
    <div class="line1" style="width: 50px;"></div>
    <div class="main" style="display: block;">
        <br>
        <span style="color:red;" >*&nbsp;</span>位置描述：&nbsp;&nbsp;<span id="位置描述" style="font-size: 15px;margin-top: 3px"></span><br><br>
        <span style="color:red">*&nbsp;</span>业主单位：&nbsp;&nbsp;<span id="业主单位" style="font-size: 15px"></span><br><br>
        <span style="color:red">*&nbsp;</span>发现人：&nbsp;&nbsp;<span id="发现人" style="font-size: 15px"></span><br><br>
        <span style="color:red">*&nbsp;</span>隐患描述：&nbsp;&nbsp;<span id="隐患描述" style="font-size: 15px"></span>
    </div>
</div>

cesium

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNjhkMzFlNC02MjcxLTRkZWItOGFlYy1jMTZiN2YzZDAyNTAiLCJpZCI6NzU3MCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0OTg1NzUwM30.tVIk2kNyva3YmQgNQh0YFaD7AV-8FI8-c456lbRgTOs';
    var viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false,  //是否显示动画控件
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false,
        terrainProvider : Cesium.createWorldTerrain(),
        sceneMode :  Cesium.SceneMode.COLUMBUS_VIEW,//初始场景模式 2D、3D模式： SCENE2D |MORPHING/COLUMBUS_VIEW
        shouldAnimate : true,
        orderIndependentTranslucency: false,
        contextOptions: {webgl: {alpha: true,}},
        imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
            url: ""
        })
    });

    viewer.scene.skyBox.show = false;
    viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
    viewer.scene.globe.baseColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);

图标显示的位置是根据从后台传过来的经纬度确定

// An highlighted block

function getThreatList1(){
        var urlIp = "http://127.0.0.1:8081/server"
        var type = "第三方施工";
        var obj = document.getElementById("ORGID");
        var ORGID = obj.options[obj.selectedIndex].value;
        var option = JSON.stringify({ 'address':ORGID});
        $.ajax({
            url: urlIp+"/dpportal/highConsequenceAreaService/getHighConsequence",
            data: option,
            headers: {
                'Access-Control-Allow-Origin': "*",
            },
            contentType: 'application/json;charset=utf-8',
            dataType: "json",
            async: false,
            cache: false,
            type:"POST",
            success: function(data) {
                var 高后果区 = data.data;
                console.log("第三方施工:"+高后果区);
                if(高后果区!=null&&高后果区.length>0){
                    for(var i=0;i<高后果区.length;i++){
                        if(高后果区[i].经度!="0"&&高后果区[i].经度!=null&&高后果区[i].纬度!="0"&&高后果区[i].纬度!=null) {
                            var bluePin = viewer.entities.add({
                                name: 'Blank blue pin',
                                position: Cesium.Cartesian3.fromDegrees(高后果区[i].经度, 高后果区[i].纬度),
                                billboard: {
                                    //image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
                                    image: 'images/icon-builda.png',
                                    //model : {
                                    //    uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf'
                                    //},
                                    scale: 0.35,//和原始大小相比的缩放比例
                                    //minimumPixelSize :100, //最小尺寸，防止太小而看不见
                                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 10000000),
                                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                                }
                            });
                        }
                    }
                    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                    handler.setInputAction(function (click) {
                        var pick = viewer.scene.pick(click.position);
                        //选中某模型   pick选中的对象
                        if(pick && pick.id){
                            $("#bubble").show();
                            var position = viewer.scene.pickPosition(click.position); //单击位置
                            //将笛卡尔坐标转化为经纬度坐标
                            var cartographic = Cesium.Cartographic.fromCartesian(position);
                            var longitude = Cesium.Math.toDegrees(cartographic.longitude);//获取经度
                            console.log(longitude.toFixed(6)*1000000);
                            var latitude = Cesium.Math.toDegrees(cartographic.latitude);//获取纬度
                            console.log(latitude.toFixed(6)*1000000);
                            for(var j=0;j<高后果区.length;j++){
                                if((高后果区[j].经度*1000000 >=longitude.toFixed(6)*1000000-90000 && 高后果区[j].经度*1000000 <=longitude.toFixed(6)*1000000+90000) && (高后果区[j].纬度*1000000>=latitude.toFixed(6)*1000000-1000 && 高后果区[j].纬度*1000000<=latitude.toFixed(6)*1000000+1000)){

                                    $("#识别单位及负责人").text(高后果区[j].识别单位及负责人);
                                    console.log("业主单位:"+$("#业主单位").text(高后果区[j].识别单位及负责人));
                                    $("#位置描述").text(高后果区[j].位置描述);
                                    $("#创建人").text(高后果区[j].创建人);
                                    $("#隐患描述").text(高后果区[j].隐患描述);
                                    $("#创建时间").text(高后果区[j].创建日期);
                                    $("#经度").text(高后果区[j].经度);
                                    $("#纬度").text(高后果区[j].纬度);
                                }
                            }
                            var point=[cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
                            var destination=Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0);
                            console.log(point[0]+","+point[1]);

                            var obj = {position:click.position,destination:destination};
                            var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
                            console.log("c:"+c);
                            var x = c.x-1000;
                            var y = c.y-430 ;
                            $('#bubble').css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');//设置点击时 div弹出来的位置
                        }else{
                            $("#bubble").hide();
                        }

                    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
                }else{
                    $("#第三方施工").text("0");

                }
            },
            error: function(e) {

            }
        });
    }

显示的图标位置

弹出的div