Cesium对三维模型进行查询并弹框展示信息

苹果园dog

已于 2023-09-18 14:09:50 修改

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Cesium GIS 文章标签： Cesium

于 2023-09-18 11:44:23 首次发布

本文链接：https://blog.youkuaiyun.com/u014556081/article/details/132971036

Cesium 同时被 2 个专栏收录

48 篇文章

订阅专栏

GIS

23 篇文章

订阅专栏

一、简介

Cesium三维模型3dtiles，然后添加鼠标交互事件进行查询，弹出信息框。

二、示例代码

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/common.css">
    <title>
        三维模型查询
    </title>
    <script src="./js/config.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <script type="text/javascript" src="../anov-gis-sdk/index.js"></script>
    <link rel="stylesheet" href="../anov-gis-sdk/index.css">
</head>

<body>
    <div id="cesiumContainer">
    </div>
</body>

</html>

<script>
    var app = new Vue({
        el: '#cesiumContainer',
        mounted() {
            // 初始化
            window.viewer = new ANOVGIS.Viewer("cesiumContainer", {
                vrButton: false,
                baseLayerPicker: true,
                fullscreenButton: true,
                homeButton: true,
                sceneModePicker: true,
                navigationHelpButton: true
            });
            ANOVGIS.WidgetsControl.showAllControls({

            });
            //影像
            var baselayer = ANOVGIS.ImageryLayerFactory.createImageryLayer(
                ANOVGIS.ImageryType.TDT, {
                style: "img",
                key: globalConfig.tdtKey
            }
            );

            viewer.addBaseImageryLayer(baselayer);
            // 三维模型加载
            let layer = new ANOVGIS.TilesetLayer();
            viewer.addLayer(layer);
            let tileset = new ANOVGIS.Tileset({
                url: 'http://172.16.223.165/gis-share/beijingchouxi/tileset.json',
                highlight: {//鼠标滑过样式
                    color: "#ff0000"
                },
                selectedHighlight:{//点击选中效果
                    color: "rgba(255,0.0,255,0.8)"
                }
            })
            // 设置模型样式
            const style = new ANOVGIS.TilesetStyle()
            style.color = {
                conditions: [
                    ['Number(${floor}) >= 40', 'rgba(45, 0, 75, 0.5)'],
                    ['Number(${floor}) >= 30', 'rgb(102, 71, 151)'],
                    ['Number(${floor}) >= 20', 'rgb(170, 162, 204)'],
                    ['Number(${floor}) >= 10', 'rgb(248, 176, 87)'],
                    ['Number(${floor}) >= 5', 'rgb(198, 106, 11)'],
                    ['true', 'rgb(127, 59, 8)'],
                ],
            }
            tileset.setStyle(style)
            layer.addGraphic(tileset);
            //绑定点击弹框
            layer.bindPopup({
                viewer: viewer,
                showTitle: true,
                useDefaultHtmlTemplate: true,//用默认模板
            });
            layer.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
                let infoData = {
                    title: e.feature.getProperty('name1'),
                    fieldsMap: [
                        {
                            nameC: '名称：',
                            value: e.feature.getProperty('name1')
                        }, {
                            nameC: '楼层：',
                            value: e.feature.getProperty('floor')
                        }]
                }
                layer.popup.show(e.position, infoData);
                console.log(e);
            })

            // 绑定鼠标MOUSE_MOVE事件
            layer.bindTooltip({
                viewer: viewer,
                showTitle: true,
                offsetY: '-10',
                useDefaultHtmlTemplate: true,//用默认模板
            });
            layer.addEventListener(ANOVGIS.MouseEventType.MOUSE_MOVE, (e) => {
                let infoData = {
                    title: e.feature.getProperty('name1'),
                    fieldsMap: [
                        {
                            nameC: '名称：',
                            value: e.feature.getProperty('name1')
                        }, {
                            nameC: '楼层：',
                            value: e.feature.getProperty('floor')
                        }]
                }
                layer.tooltip.show(e.position, infoData);
            })

            // 定位
            viewer.flyToTileset(tileset,2,0.5,-35);
        }
    });
</script>