Cesium--氣泡彈窗

參考資料

　　首先感謝以下博主們的幫助，本人剛接觸Cesium不久，無奈只能拾人牙慧了。

　　由於cesium沒有自帶的點擊彈出氣泡的功能，所以需要自己去開發一個這樣的功能，網絡上資源很多，看到基本思路都一致。以下奉上參考網址

　　：https://blog.csdn.net/zlx312/article/category/7232371

 

 

實現思路

1、樣式表

/*--------------------------氣泡彈窗Start---------------------------*/
/*leaflet風格氣泡窗口樣式模板*/
.trackPopUp {
    display: none;
    color: rgb(255, 255, 255);
    height: 50px;
}

.leaflet-popup {
    position: absolute;
}

.leaflet-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;
}

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

.leaflet-popup-content {
    margin: 5px 20px;
    line-height: 1.4;
    
}
.leaflet-popup-content div{
    text-align: center;
}

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

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

        .leaflet-popup-content table tr {
            height: 25px;
        }
/*--------------------------氣泡彈窗END---------------------------*/

　　

　2、只是實現了單個標注點氣泡彈窗功能，全部標注可以參考自己循環標注實現，另外地圖移動和縮放實時更新窗體位置，除了更改源碼，暫時沒有太好的辦法，因此此處未實現，當視圖變化時，窗體會隱藏。

function (viewer) {
        var handler3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        var scene = viewer.scene;
        var infoDiv = '<div id="trackPopUp" class="trackPopUp">' +
			                 '<div id="trackPopUpContent" class="leaflet-popup" style="top:5px;left:0;">' +
	                           '<a class="leaflet-popup-close-button" href="#">×</a>' +
	                           '<div class="leaflet-popup-content-wrapper">' +
	                             '<div id="trackPopUpLink" class="leaflet-popup-content"></div>' +
	                           '</div>' +
	                         '</div>' +
			           '</div>';
        $("#cesiumContainer").append(infoDiv);
        //綁定鼠標單擊
        handler3D.setInputAction(function (movement) {
            var pick = scene.pick(movement.position);
            if (pick && pick.id) {
                $('#trackPopUp').show();
                var content = '<div>' + pick.id._name + '</div><table ><tbody>';
                for (var i = 0; i < pick.id._monitoItems.length; i++) {
                 content += '<tr><td>' + pick.id._monitoItems[i].name + ':</th><td>' + pick.id._monitoItems[i].value + pick.id._monitoItems[i].units + '</td></tr>';                  
                }
                content += '</tbody></table>'
                var obj = { position: movement.position, content: content };
                infoWindow(obj);
                function infoWindow(obj) {
                    var picked = scene.pick(obj.position);
                    if (Cesium.defined(picked)) {
                        var id = Cesium.defaultValue(picked.id, picked.primitive.id);
                        if (id instanceof Cesium.Entity) {
                            $(".cesium-selection-wrapper").show();
                            $('#trackPopUpLink').empty();
                            $('#trackPopUpLink').append(obj.content);
                            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)');
                            }
                            var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
                            $('#trackPopUp').show();
                            positionPopUp(c); // Initial position
                            $('.leaflet-popup-close-button').click(function () {
                                $('#trackPopUp').hide();
                                $('#trackPopUpLink').empty();
                                $(".cesium-selection-wrapper").hide();
                                return false;
                            });
                            return id;
                        }
                    }
                }
            }
            else {
                $('#trackPopUp').hide();
            }

        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        //綁定地圖移動
        handler3D.setInputAction(function (movement) {
            $('#trackPopUp').hide();
        }, Cesium.ScreenSpaceEventType.LEFT_UP);
        //綁定地圖縮放
        handler3D.setInputAction(function (movement) {
            $('#trackPopUp').hide();
        }, Cesium.ScreenSpaceEventType.WHEEL);
        //綁定滾輪點擊事件
        handler3D.setInputAction(function (movement) {
            $('#trackPopUp').hide();
        }, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);
    },

　　

 

 

結果展示