SAAS
/
weighbridge-screen


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文档</title>
    <script src="https://ore.cdchuanxi.cn/assets/libs/jquery/dist/jquery.js"></script>
    <script src="./Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./Cesium/Widgets/widgets.css" />
    <script src="./index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            overflow: hidden;
        }

        #bubble {
            position: absolute;
            bottom: 0;
            left: 0;
            background-repeat: no-repeat;
            background-size: 100% 100%;

            display: none;
        }

        .tools {
            text-align: center;
            font-size: 18px;
            font-family: MFLiHei;
            font-weight: 400;
            color: #ffffff;
            margin-top: 12px;
        }

        .tableContainer {
            font-size: 16px;
            line-height: 16px;
            font-weight: bold;
            color: #ffffff;
        }

        .font_content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .font_item {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 10px 0;
        }

        .font_item .label {
            min-width: 80px;
        }

        .font_item .value {
            flex: 1;
        }

        .wid50 {
            width: 50%;
        }

        .flex {
            display: flex;
            align-items: center;
        }

        .paifang .title {
            font-size: 18px;
            font-weight: 400;
            color: #ffffff;
            background-image: url(https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/image/17.png);
            background-repeat: no-repeat;
            padding: 0 0 10px 20px;
            background-position-y: 3px;
            margin-top: 20px;
        }

        #toolbar {
            position: fixed;
            top: 20px;
            left: 40px;
        }

        #toolbar input {
            height: 30px;
            padding: 0 10px;
        }

        #toolbar button {
            padding: 5px 15px;
            /* color:#fff */
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="mapcontain" style="width: 100vw; height: 100vh"></div>
    <div id="toolbar" class="param-container tool-bar">
        <button type="button" id="polyline" class="button black">360航拍</button>
        <!-- <button type="button" id="clear" class="button black">清除</button>
        <input type="number" id="number" placeholder="输入浮动数值">
        <button id="float">浮动</button>
        <button id="save">复制参数</button>
        <input type="text" id="lineResult" style="opacity: 0;"> -->
    </div>
    <!-- 气泡HTML -->
    <div id="bubble" class="bubble">
        <div class="tools"></div>
        <div class="tableContainer"></div>
    </div>
</body>
<script>
    var viewer = new Cesium.Viewer('mapcontain', {
        infoBox: false,
        selectionIndicator: false,

    });
    var scene = viewer.scene;
    // var ssss =   [{"x":-1298763.6207643023,"y":5399411.728243748,"z":3138209.945266086},{"x":-1298760.6085292918,"y":5399227.055698713,"z":3138328.4980496666},{"x":-1298673.8423515118,"y":5399231.107678385,"z":3138364.636878104},{"x":-1298677.5134506563,"y":5399413.8824037975,"z":3138248.508397252},{"x":-1298762.7671545176,"y":5399402.47754085,"z":3138215.646181551}]

    // var polylineEntity = viewer.entities.add({
    //         polyline: {
    //             positions:ssss,
    //             width: 20,
    //             material: new Cesium.PolylineGlowMaterialProperty({
    //                 glowPower: 0.1,
    //                 color: Cesium.Color.YELLOW
    //             })
    //         }
    //     })
    // var ssss = [{ "x": -1298745.327110022, "y": 5399592.358043281, "z": 3137858.9501997 }, { "x": -1298828.4080866768, "y": 5399543.093048332, "z": 3137909.4185346463 }, { "x": -1298768.9944202919, "y": 5399500.561986198, "z": 3137979.1555163916 }, { "x": -1298687.370761928, "y": 5399544.930584177, "z": 3137964.4642523234 }, { "x": -1298731.9210349075, "y": 5399582.995774194, "z": 3137886.772885283 }, { "x": -1298750.1782605655, "y": 5399596.348977975, "z": 3137853.8099602973 }, { "x": -1298746.6629520853, "y": 5399591.450717748, "z": 3137861.394224519 }]
    // for(var i=0;i<ssss.length;i++){

    //     ssss[i].y+=20 

    // }
    // console.log(ssss);
    // var tooltip = createTooltip(document.body);
    var x1 =[{"x":-1298382.5241493038,"y":5399414.464683887,"z":3138232.257426386},{"x":-1298375.9595880932,"y":5399410.401712257,"z":3138237.3715363783},{"x":-1298366.9506741923,"y":5399415.260397395,"z":3138223.6662184484},{"x":-1298373.3944584492,"y":5399420.301661751,"z":3138214.563328331},{"x":-1298382.0080868679,"y":5399414.084060312,"z":3138232.661454434}]
    var x2 =[{"x":-1297963.165030857,"y":5400381.30034336,"z":3137530.678933297},{"x":-1297948.5434228266,"y":5400409.608628515,"z":3137488.69569353},{"x":-1297969.2949100637,"y":5400399.843882703,"z":3137484.7925228556},{"x":-1297976.3478639415,"y":5400380.822944763,"z":3137521.3906440507},{"x":-1297962.6820639062,"y":5400382.313172652,"z":3137529.1376143084}]
    var x3 = [{"x":-1297951.379699481,"y":5400929.154787579,"z":3136907.1546409023},{"x":-1297922.9491903689,"y":5400931.336259261,"z":3136922.449279351},{"x":-1297920.7762863487,"y":5400849.217535222,"z":3137006.5530004613},{"x":-1297957.9633402936,"y":5400846.120943799,"z":3136988.629034852},{"x":-1297950.3702054168,"y":5400931.034650669,"z":3136906.1637204266}]
    var x4 = [{"x":-1299107.3349838604,"y":5399012.88798698,"z":3138339.657768483},{"x":-1299065.289684003,"y":5399013.501809057,"z":3138346.3060638327},{"x":-1299090.6493302553,"y":5399004.940458745,"z":3138383.355116148},{"x":-1299110.9115068347,"y":5399002.325859704,"z":3138352.223800444},{"x":-1299106.946729713,"y":5399013.105881288,"z":3138338.547136601}]
    var polylineEntity = viewer.entities.add({
            polyline: {
                positions: x1,
                width: 30,
                material: new Cesium.PolylineGlowMaterialProperty({
                    glowPower: 0.1,
                    color: Cesium.Color.YELLOW
                })
            }
        })
        
        viewer.entities.add({
                id: 'xxx1',
                position: Cesium.Cartesian3.fromDegrees(103.52094734042181,29.47108017329263, 575.53),
                billboard: {
                    image:'https://cdn.sckaiwu.cn/saas/uploads/202307/64a556419e578.png',
                    scaleByDistance: new Cesium.NearFarScalar(0, 0.8, 10000, 0.1)
                },
                description:'dzwl' // 自定义信息
            });
       
    viewer.entities.add({
        polyline: {
            positions: x2,
            width: 30,
            material: new Cesium.PolylineGlowMaterialProperty({
                glowPower: 0.1,
                color: Cesium.Color.YELLOW
            })
        }
    });
    viewer.entities.add({
                id: 'xxx2',
                position: Cesium.Cartesian3.fromDegrees(103.52904340847827,29.472956215602114, 440.26),
                billboard: {
                    image:'https://cdn.sckaiwu.cn/saas/uploads/202307/64a556419e578.png',
                    scaleByDistance: new Cesium.NearFarScalar(0, 0.8, 10000, 0.1)
                },
                description:'dzwl' // 自定义信息
            });
    viewer.entities.add({
        polyline: {
            positions: x3,
            width: 30,
            material: new Cesium.PolylineGlowMaterialProperty({
                glowPower: 0.1,
                color: Cesium.Color.YELLOW
            })
        }
    });
    viewer.entities.add({
                id: 'xxx3',
                position: Cesium.Cartesian3.fromDegrees(103.51444717577903,29.461569285227476, 962.33),
                billboard: {
                    image:'https://cdn.sckaiwu.cn/saas/uploads/202307/64a556419e578.png',
                    scaleByDistance: new Cesium.NearFarScalar(0, 0.8, 10000, 0.1)
                },
                description:'dzwl' // 自定义信息
            });
    
    viewer.entities.add({
        polyline: {
            positions: x4,
            width: 30,
            material: new Cesium.PolylineGlowMaterialProperty({
                glowPower: 0.1,
                color: Cesium.Color.YELLOW
            })
        }
    });
    viewer.entities.add({
                id: 'xxx4',
                position: Cesium.Cartesian3.fromDegrees(103.51297946650449,29.455285607173614,1110.82),
                billboard: {
                    image:'https://cdn.sckaiwu.cn/saas/uploads/202307/64a556419e578.png',
                    scaleByDistance: new Cesium.NearFarScalar(0, 0.8, 10000, 0.1)
                },
                description:'dzwl' // 自定义信息
            });
    var lineWidth = 20

    $('#xiugai').click(function () {
        if ($('#lineWidth').val().length == 0) {
            return false
        }
        console.log(linePoints);
        lineWidth = Number($('#lineWidth').val())
        clearAll();
        viewer.entities.removeAll();
        var polylineEntity = viewer.entities.add({
            polyline: {
                positions: temp ? temp : linePoints,
                width: lineWidth,
                material: new Cesium.PolylineGlowMaterialProperty({
                    glowPower: 0.1,
                    color: Cesium.Color.YELLOW
                })
            }
        })
    })
    var temp = null
    $('#float').click(function () {
        console.log(linePoints);
        clearAll();
        viewer.entities.removeAll();
        temp = JSON.parse(JSON.stringify(linePoints))
        if ($('#number').val().length == 0) {
            return false
        }
        for (var i = 0; i < temp.length; i++) {
            temp[i].y += Number($('#number').val())
        }

        var polylineEntity = viewer.entities.add({
            polyline: {
                positions: temp,
                width: lineWidth,
                material: new Cesium.PolylineGlowMaterialProperty({
                    glowPower: 0.1,
                    color: Cesium.Color.YELLOW
                })
            }
        });
    });

    var handlerPoint = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
    handlerPoint.activeEvt.addEventListener(function (isActive) {
        if (isActive == true) {
            viewer.enableCursorStyle = false;
            viewer._element.style.cursor = '';
            $('body').removeClass('drawCur').addClass('drawCur');
        } else {
            viewer.enableCursorStyle = true;
            $('body').removeClass('drawCur');
        }
    });

    handlerPoint.movingEvt.addEventListener(function (windowPosition) {
        // tooltip.showAt(windowPosition, '<p>点击绘制一个点</p>');
    });
    var point;//存储画点的节点
    handlerPoint.drawEvt.addEventListener(function (result) {
        // tooltip.setVisible(false);
        point = result.object.position;
    });

    var handlerLine = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Line);
    handlerLine.activeEvt.addEventListener(function (isActive) {
        if (isActive == true) {
            viewer.enableCursorStyle = false;
            viewer._element.style.cursor = '';
            $('body').removeClass('drawCur').addClass('drawCur');
        } else {
            viewer.enableCursorStyle = true;
            $('body').removeClass('drawCur');
        }
    });
    handlerLine.movingEvt.addEventListener(function (windowPosition) {
        if (handlerLine.isDrawing) {
            // tooltip.showAt(windowPosition, '<p>左键点击确定折线中间点</p><p>右键单击结束绘制</p>');
        } else {
            // tooltip.showAt(windowPosition, '<p>点击绘制第一个点</p>');
        }
    });

    var linePoints;//存储画线的节点
    handlerLine.drawEvt.addEventListener(function (result) {
        console.log(result.object);

        // tooltip.setVisible(false);
        // result.object.show = false;
        linePoints = result.object.positions;
        var polylineEntity = viewer.entities.add({
            polyline: {
                positions: linePoints,
                width: 20,
                material: new Cesium.PolylineGlowMaterialProperty({
                    glowPower: 0.1,
                    color: Cesium.Color.YELLOW
                })
            }
        });
        console.log(linePoints);
    });
    $('#save').click(function () {

        $('#lineResult').val(temp ? temp : linePoints)
        var str = JSON.stringify(temp ? temp : linePoints);
        var $temp = $('<input>');
        $('body').append($temp);
        $temp.val(str).select();
        document.execCommand('copy');
        $temp.remove();
        alert('复制成功！');

    });
    $('#point').click(function () {
        deactiveAll();
        handlerPoint.activate();
    });

    $('#polyline').click(function () {
        window.open('https://www.720yun.com/vr/e9djOr4vsk2')
        // deactiveAll();
        // handlerLine.activate();
    });


    $('#clear').click(function () {
        clearAll();
        point = undefined;
        linePoints = undefined;
        viewer.entities.removeAll();
    });
    $('#toolbar').show();
    $('#loadingbar').remove();

    function deactiveAll() {
        handlerPoint.deactivate();
        handlerLine.deactivate();
    }

    function clearAll() {
        // handlerPoint.clear();
        handlerLine.clear();
    }

    if (!scene.pickPositionSupported) {
        alert('不支持深度拾取,无法进行鼠标交互绘制！');
    }

    // 关闭地球模型
    scene.globe.show = false;
    $(function () {
        // 去掉地图自带左下角logo图
        $('.cesium-viewer-bottom').hide();
    });
    // iframe向vue传递信息
    function iframeSendMsg(params, cmd = 'myIframe') {
        window.parent.postMessage(
            {
                cmd: cmd,
                params: params
            },
            '*'
        );
    }
    // iframe获取Vue传递过来的信息
    window.addEventListener('message', getVueMsg);
    function getVueMsg(event) {
        const res = event.data;
        if (res.cmd == 'superMap') {
            if (res.params.type == 'mapUrl') {
                scene.open(res.params.url);
            } else if (res.params.type == 'delete') {
                console.log('删除', res.params.info);
                removeMarker(res.params.info.guid);
            } else if (res.params.type == 'addOrEdit') {
                if (viewer.entities.getById(res.params.info.guid)) {
                    console.log('更新', res.params.info);
                    if (res.params.info.type == 1) {
                        updateModalMarker(res.params.info);
                    } else {
                        updateMarker(res.params.info);
                    }
                } else {
                    console.log('新增', res.params.info);
                    createPoint(res.params.info);
                }
                if (!res.params.loadedMap) iframeSendMsg({ id: res.params.info.guid }, 'receipt');
            }
        }
    }
    // 更新点标记 marker
    function updateModalMarker(info) {
        const item = viewer.entities.getById(info.guid);
        item.position._value = Cesium.Cartesian3.fromDegrees(info.longitude, info.latitude, info.height);
        item._description._value = info;
        item._model._uri._value = getModalIconUrl(info);
    }
    // 更新点标记 marker
    function updateMarker(info) {
        const item = viewer.entities.getById(info.guid);
        item.position._value = Cesium.Cartesian3.fromDegrees(info.longitude, info.latitude, info.height);
        item.description._value = info;
        item.billboard.image._value = getIconUrl(info);
    }
    // 移除点标记
    function removeMarker(guid) {
        viewer.entities.remove(viewer.entities.getById(guid));
    }

    // 添加自定义marker
    function createPoint(worldPosition) {
        if (worldPosition.type == 1) {
            viewer.entities.add({
                id: worldPosition.guid,
                position: Cesium.Cartesian3.fromDegrees(worldPosition.longitude, worldPosition.latitude, worldPosition.height),
                model: {
                    uri: 'https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/3dCar/car.glb',
                    scale: 0.1
                },
                description: worldPosition // 自定义信息
            });
        } else {
            viewer.entities.add({
                id: worldPosition.guid,
                position: Cesium.Cartesian3.fromDegrees(worldPosition.longitude, worldPosition.latitude, worldPosition.height),
                billboard: {
                    image: getIconUrl(worldPosition),
                    scaleByDistance: new Cesium.NearFarScalar(0, 2, 10000, 0.1)
                },
                description: worldPosition // 自定义信息
            });
        }
    }
    // 获取自定义marker图标地址
    function getModalIconUrl(worldPosition) {
        return `https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/image/icon_${worldPosition.status}/${worldPosition.type
            }.glb?res=${new Date()}`;
    }
    // 获取自定义marker图标地址
    function getIconUrl(worldPosition) {
        return `https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/image/icon_${worldPosition.status}/${worldPosition.type
            }.png?res=${new Date()}`;
    }
    // 根据经纬度获取高度
    // function getHeigthByLonLat(lon, lat) {
    //     return new Promise((resolve, reject) => {
    //         var postData = {
    //             geometries: [{ type: 'POINT3D', x: lon, y: lat, z: 0 }], // 几何对象列表
    //             sceneName: '金顶矿山', // 场景名
    //             layerName: 'Config_ems', // 图层名
    //             interpolationDistance: 0 // 插值距离
    //         };
    //         $.ajax({
    //             url:
    //                 'http://10.10.10.49:8090/iserver/services/spatialAnalysis-work/restjsr/spatialanalyst/geometry/3d/extractvector3d.json',
    //             type: 'POST',
    //             data: JSON.stringify(postData),
    //             success: function(res) {
    //                 $.ajax({
    //                     url: `http://10.10.10.49:8090/iserver/services/spatialAnalysis-work/restjsr/spatialanalyst/geometry/3d/extractvector3d/${res.newResourceID}.json`,
    //                     type: 'GET',
    //                     success: function(data) {
    //                         resolve(data.geometries[0].z);
    //                     }
    //                 });
    //             }
    //         });
    //     });
    // }

    // 循环添加点标记
    // forMarker();
    // function forMarker() {
    //     for (let index = 0; index < pointPosition.length; index++) {
    //         const element = pointPosition[index];
    //         createPoint(element);
    //     }
    // }

    var scenePosition = null; // 记录在场景中点击的笛卡尔坐标点
    var infoboxContainer = document.getElementById('bubble');

    var table = document.getElementById('tab'); // 气泡内的表格
    // 点击marker事件
    function annotate(pickedObject) {
        console.log(pickedObject.id._description._value);
        let obj = pickedObject.id._description._value;
        if(obj=='dzwl'){
            obj={
                status:1,
                type:13,
                showInfo:{
                    '电子围栏':''
                }
            }
        }
        if (obj.type != 8) {
            buildModalHtml(obj);
        } else {
            iframeSendMsg({ info: obj });
        }
    }
    // 生成弹窗html
    function buildModalHtml(obj) {
        $('#bubble').css({ backgroundImage: `url(${getModalBg(obj)})` });
        if (obj.type == 1 || obj.type == 2 || obj.type == 3) {
            $('#bubble').css({ width: '486px', height: '330px' });
            $('#bubble .tableContainer').css({ padding: '0 50px' });

            $('#bubble .tools').text(obj.type == 1 ? '普通车辆' : obj.type == 2 ? '装载机械' : '矿卡');
            var html = `<div style="height: 130px;margin: 20px 0 0;text-align: center;"><img src="${obj.imgUrl
                ? obj.imgUrl
                : `https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/image/default_image/${obj.type}.png`
                }" style="max-height:130px;"/></div>`;
            html += '<div class="font_content">';
            Object.keys(obj.showInfo).map((item, i) => {
                html += `<div class="font_item ${i != 0 ? 'wid50' : ''}">
                                <div class="label">${item}：</div>
                                <div class="value">${obj.showInfo[item]}</div>
                            </div>`;
            });
            html += '</div>';
            $('#bubble .tableContainer').html(html);
        } else if (
            obj.type == 4 ||
            obj.type == 7 ||
            obj.type == 5 ||
            obj.type == 6 ||
            obj.type == 9 ||
            obj.type == 10 ||
            obj.type == 11 
        ) {
            $('#bubble').css({ width: '380px', height: '221px' });
            $('#bubble .tableContainer').css({ padding: '0 30px' });
            $('#bubble .tools').text(
                obj.type == 4
                    ? '人员信息'
                    : obj.type == 5
                        ? '水表'
                        : obj.type == 6
                            ? '电表'
                            : obj.type == 7
                                ? '边坡监控'
                                : obj.type == 9
                                    ? '皮带称重'
                                    : obj.type == 10
                                        ? '环境监测'
                                        :'无人地磅' 
                                       
            );
            var html = '<div class="flex" style="height:180px;">';
            // html += `<img src="${
            //     obj.imgUrl
            //         ? obj.imgUrl
            //         : `https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/image/default_image/${obj.type}.png`
            // }" style="height:92px;width:120px;margin-right:15px;"/>`;
            html += '<div class="font_content">';

            if (obj.type == 4)
                for (let i = 0; i < obj.showInfo.length; i++) {
                    html += `<div class="font_item">
                                <div class="label">${obj.showInfo[i].title}：</div>
                                <div class="value">${obj.showInfo[i].text}</div>
                            </div>`;
                }
            else
                Object.keys(obj.showInfo).map((item, i) => {
                    html += `<div class="font_item">
                                <div class="label">${item}：</div>
                                <div class="value">${obj.showInfo[item]}</div>
                            </div>`;
                });
            html += '</div></div>';
            $('#bubble .tableContainer').html(html);
        } else if (obj.type == 12) {
            $('#bubble').css({ width: '486px', height: 'auto' });
            $('#bubble .tableContainer').css({ padding: '0 40px 20px' });
            $('#bubble .tools').text('排放监测');
            var html = `<div class="paifang">`;
            html += `<div class="title">${obj.title}</div>`;
            html += `<div class="flex" style="justify-content:space-between;flex-wrap: wrap;">`;
            Object.keys(obj.showInfo).map((item, i) => {
                html += `<div style="display:flex;align-items:center;justify-content: space-between;
                                                padding: 5px 10px;
                                                background-color: rgba(255, 255, 255, 0.1);
                                                width: 40%;
                                                font-size: 12px;
                                                font-weight: 500;
                                                color: #ffffff;
                                                margin-top: 10px;font-size:12px;font-weight: 500;
                                                color: #FFFFFF;">
                                <div>${item}：</div>
                                <div class="value">${obj.showInfo[item]}</div>
                            </div>`;
            });
            html += '</div></div>';
            $('#bubble .tableContainer').html(html);
        } else if (obj.type == 13) {
            $('#bubble').css({ width: '250px', height: 'auto',marginLeft:'118px' });
            $('#bubble .tableContainer').css({ padding: '0 40px 20px' });
            $('#bubble .tools').text('电子围栏');
            var html = `<div class="paifang">`;
            // html += `<div class="title">${obj.title}</div>`;
            // html += `<div class="flex" style="justify-content:space-between;flex-wrap: wrap;">`;
            
            html += '</div></div>';
            $('#bubble .tableContainer').html(html);
        }
        $('#bubble').show();
    }
    // 获取弹窗背景图
    function getModalBg(obj) {
        if (obj.status == 1) {
            if (obj.type == 1 || obj.type == 2 || obj.type == 3)
                return 'https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/image/bg_1/1.png';
            else if (obj.type == 12) return 'https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/image/bg_1/2.png';
            else if (obj.type == 5 || obj.type == 6)
                return 'https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/image/bg_1/3.png';
            else if (obj.type == 4 || obj.type == 7 || obj.type == 9 || obj.type == 10 || obj.type == 11)
                return 'https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/image/bg_1/4.png';
                else{
            return `https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/image/bg_1/3.png`; 
        }
        } else if (obj.status == 2 || obj.status == 3) {
            if (obj.type == 1 || obj.type == 2 || obj.type == 3 || obj.type == 12)
                return `https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/image/bg_${obj.status}/1.png`;
            else if (
                obj.type == 4 ||
                obj.type == 7 ||
                obj.type == 5 ||
                obj.type == 6 ||
                obj.type == 9 ||
                obj.type == 10 ||
                obj.type == 11
            )
             return `https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/image/bg_${obj.status}/2.png`;
        }
    }
    // 移除信息提示框
    function remove_primitives() {
        scenePosition = null;
        $('#bubble').hide();
    }
    scene.postRender.addEventListener(function () {
        // 每一帧都去计算气泡的正确位置
        if (scenePosition) {
            var canvasHeight = scene.canvas.height;
            var windowPosition = new Cesium.Cartesian2();
            Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, scenePosition, windowPosition);
            infoboxContainer.style.bottom = canvasHeight - windowPosition.y + 30 + 'px';
            infoboxContainer.style.left = windowPosition.x - 243 + 'px';
            infoboxContainer.style.visibility = 'visible';
        }
    });

    // todo：拾取模型表面的位置
    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    handler.setInputAction(function (evt) {
        // logLocation(evt);
        var pickedObject = scene.pick(evt.position); // 判断是否拾取到模型
        var position = scene.pickPosition(evt.position);
        if (!position) {
            position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
        }
        remove_primitives(viewer);

        if (scene.pickPositionSupported && Cesium.defined(pickedObject)) {
            var cartesian = viewer.scene.pickPosition(evt.position);
            if (Cesium.defined(cartesian)) {
                var cartographic = Cesium.Cartographic.fromCartesian(cartesian); // 根据笛卡尔坐标获取到弧度
                var lng = Cesium.Math.toDegrees(cartographic.longitude); // 根据弧度获取到经度
                var lat = Cesium.Math.toDegrees(cartographic.latitude); // 根据弧度获取到纬度
                var height = cartographic.height; // 模型高度
                scenePosition = position;
                annotate(pickedObject);
            }
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    function logLocation(e) {
        //获取点击位置笛卡尔坐标
        var position = scene.pickPosition(e.position);
        //将笛卡尔坐标转化为经纬度坐标
        var cartographic = Cesium.Cartographic.fromCartesian(position);
        var longitude = Cesium.Math.toDegrees(cartographic.longitude);
        var latitude = Cesium.Math.toDegrees(cartographic.latitude);

        var height = cartographic.height;
        if (height < 0) {
            height = 0;
        }
        console.log(height);
        console.log(longitude);
        console.log(latitude);
    }
</script>

</html>