cesium气泡事件优化

今天对气泡事件进行了优化。主要优化的内容是：点击弹出框的位置在鼠标点击位置、更改了默认的气泡样式。(参考了网上的一些代码，做了一些优化)

主要更改的就是添加了自定的弹出样式：

.trackPopUp {
    display: none;
    color: rgb(255, 255, 255);
    height: 50px;
}

.Cesium-popup {
    position: absolute;
}

.Cesium-popup-close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 4px 0 0;
    text-align: center;
    font: 25px/25px Tahoma, Verdana, sans-serif;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-weight: bold;
    background: transparent;
}

.Cesium-popup-content-wrapper {
    max-height: 200px;
    overflow-y: auto;
    height: 133px;
    padding: 1px;
    text-align: left;
    border-radius: 12px;
    background-color: #919191;
    //background-image: url('../img/popbackground.png');
}

.Cesium-popup-content {
    margin: 5px 20px;
    line-height: 1.4;

}
.Cesium-popup-content div{
    text-align: center;
}

.Cesium-popup-content div {
    font-size: 18px;
}

.Cesium-popup-content table {
    margin-top: 15px;
}

.Cesium-popup-content table tr {
    height: 25px;
}

将添加的css样式文件引入到页面中，添加自定义的生成div标签：

var infoDiv = '<div id="trackPopUp" class="trackPopUp">' +
                '<div id="trackPopUpContent" class="cesium-popup" style="top:5px;left:0;">' +
                '<a class="cesium-popup-close-button" href="#">×</a>' +
                '<div class="cesium-popup-content-wrapper">' +
                '<div id="trackPopUpLink" class="cesium-popup-content"></div>' +
                '</div>' +'</div>' +'</div>';
            $("#cesiumContainer").append(infoDiv);

在添加的div中pick的内容进行一个判断，判断是否是被选中的b3dm数据：

var pick = scene.pick(movement.position);
            if (pick && pick._batchId) {
                $('#trackPopUp').show();
                var content = '<table><tbody><tr><th style="color:black; align: center;">皖东大学建筑</th></tr>'+
                    '<tr><th style="color:#737cbb;">建筑物名称：</th><td style="color:#88cba6;">'+ featureName +'</td></tr>'+
                    '<tr><th style="color:#737cbb;">楼层：</th><td style="color:#88cba6;">'+ floor +'&nbsp 层'+'</td></tr>'+
                    '<tr><th style="color:#737cbb;">高度：</th><td style="color:#88cba6;">'+ height + '&nbsp m '+'</td></tr>'+
                    '</tbody></table>'
var obj = { position: movement.position, content: content };
                infoWindow(obj);
                function infoWindow(obj) {
                    var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
                    var picked = scene.pick(obj.position);
                    var id = Cesium.defaultValue(picked._batchId, picked.primitive.id);
                        $(".cesium-selection-wrapper").show();
                        $('#trackPopUpLink').empty();
                        $('#trackPopUpLink').append(obj.content);
                        positionPopUp(c); // 初始位置
                        function positionPopUp(c) {
                            var x = c.x - ($('#trackPopUpContent').width()) / 2;
                            var y = c.y - ($('#trackPopUpContent').height());
                            $('#trackPopUpContent').css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');
                        }
                        $('#trackPopUp').show();
                        $('.cesium-popup-close-button').click(function () {
                            $('#trackPopUp').hide();
                            $('#trackPopUpLink').empty();
                            $(".cesium-selection-wrapper").hide();
                            return false;
                        });
                        return id;
                }
            }
            else {
                $('#trackPopUp').hide();
            }

这段代码的主要意思是将从title.json取出的属性，按照自己的要求放到动态生成的表格中。配合CSS文件进行popup弹窗的显示与隐藏。
对于popup弹窗的鼠标事件，我这里使用了三个鼠标事件：鼠标移动（要素区域）、鼠标左击、鼠标滚轮事件。他们分别的作用是：

鼠标移动（要素区域）：更改备选区域的轮廓颜色（移动到要素区域：蓝色）；
鼠标左击：更改要素区域的轮廓颜色（点击时：绿色）、点击空白区域清除轮廓颜色和隐藏popup弹窗；
鼠标滚轮：滚轮滚动时隐藏popup弹窗。
（设置鼠标事件的主要目的是最大程度减少三维地球缩放和移动时弹窗使用效果）