cesium实现点击查看属性并高亮显示

最新推荐文章于 2024-05-14 21:30:33 发布

biabia3

最新推荐文章于 2024-05-14 21:30:33 发布

阅读量1.2k

点赞数

分类专栏： Cesium 文章标签：前端 javascript

本文链接：https://blog.csdn.net/biabia579/article/details/132700299

版权

Cesium 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

接上文：Cesium加载GeoJson数据并将平面拉伸为立体

1、效果如图

2、编写消息框样式

css代码

        /*--------------------------消息框Start---------------------------*/
        .messBox {
            display: none;
            color: rgb(255, 255, 255);
        }

        .popup {
            position: absolute;
            z-index: 100;
        }

        .closeButton {
            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;
        }

        .contentWrapper {
            max-height: 500px;
            overflow-y: auto;
            min-height: 180px;
            width: 300px;
            padding: 1px;
            text-align: left;
            border-radius: 5px;
            background-color: #729ea5;
        }

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

        .content div {
            text-align: center;
            font-size: 18px;
        }

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

        .content table tr {
            height: 25px;
        }
        /*--------------------------消息框END---------------------------*/

3、鼠标左键点击实体获取信息并高亮显示

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        var selectEntity = new Cesium.Entity();
        handler.setInputAction(function (movement) {
            var pick = viewer.scene.pick(movement.position);
            if (Cesium.defined(pick)) {

                var id = pick.id._id;
                //console.log(id);
                messBoxVisable(pick, handler);
                if (selectEntity == pick) {
                    return;
                } else {
                    if (typeof (selectEntity.polygon) != "undefined") {
                        selectEntity.polygon.material = Cesium.Color.fromCssColorString('rgba(255,255,255,1)');
                        selectEntity.polygon.outlineWidth = 3;
                    }
                }
                selectEntity = pick.id;
                selectEntity.polygon.material = Cesium.Color.LIME;
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

ps：我的高亮显示其实就是当获取到点击的实体后修改实体的material 属性，改变其颜色。

4、生成消息框方法

        function messBoxVisable(pick, handler) {
            var id = pick.id._id;
            var numArr = id.match(/\d+/g);
            var infoDiv = '<div id="messBox" class="messBox">' +
                '<div class="popup" style="top:5px;left:0;">' +
                '<a class="closeButton" href="#">×</a>' +
                '<div class="contentWrapper">' +
                '<div class="content">' +
                '<div>' + pick.id._id + '层</div>' +
                '</div>' +
                '<div class="page">' +
                '<ul>' +
                '<tbody><table>' +
                '<tr><td>ID：</th><td>&nbsp&nbsp' + pick.id._properties._id._value + '</td></tr>' +
                '<tr><td>名称：</th><td>&nbsp&nbsp' + pick.id._properties._name._value + '</td></tr>' +
                '<tr><td>状态：</th><td>&nbsp&nbsp' + pick.id._properties._isDS._value + '</td></tr>' +
                '<tr><td>楼层：</th><td>&nbsp&nbsp第' + numArr[numArr.length - 1] + '层</td></tr>' +
                '</table></tbody></ul></div></div></div></div>';
            if ($("#messBox").length > 0) {
                $("#messBox").remove();
            }
            $('#cesiumContainer').append(infoDiv);
            $("#messBox").show();
            $('.closeButton').click(function () {
                $('#messBox').hide();
                return false;
            });
        }