当前位置：首页 > article >正文

Cesium中3Dtiles模型的信息读取和高亮显示单独瓦片

article 2024/11/19 0:13:37

一、信息读取

参考官方文档：Csium3DTileset - Cesium Documentation

加载模型

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
            url: 'tileset.json'//加载3D Tiles
        }));

在使用过程中可以通过在控制台输出对象后看一下对象的类型然后上官方文档看去，文档很全

有两种方法获取所有瓦片

1.官方提供的渲染结束后的监听器，可以直接返回一个tile对象

//加载完瓦片之后再显示按钮

   tileset.tileLoad.addEventListener(function (tile) {
            //这里和下边的操作一样
        })

2.直接获取tileset的属性

这种方法适合写成函数，可以根据自己想要的时间来触发

function func() {
            tile = tileset.root//和渲染后返回的一样
            let featuresLength = tile.content.featuresLength;
            let feature = tile.content.getFeature(0).getProperty("Type");
            //这里是第一个瓦片的Type属性，如果不知道有哪些属性可以用下边代码输出所有属性
            // var propertyNames = pickedFeature.getPropertyNames();
            // var length = propertyNames.length;
            // for (var i = 0; i < length; ++i) {
            //     var propertyName = propertyNames[i];
            //     console.log(propertyName + ': ' + pickedFeature.getProperty(propertyName));
            // }
        }

瓦片的id属性有两个一个是_batchId，一个是pickId.key，我的模型中这俩值不一样，不知道为什么。但是在未点击的时候pickId是空的，所以我默认把_batchId作为数据库中的主键

二、高亮显示单个或指定瓦片

先设置一个高亮瓦片的变量，下边两种共用

var highlighted = { feature: undefined, originalColor: new Cesium.Color() };

1.鼠标点击后高亮显示

添加鼠标点击事件监听器

// 鼠标点击事件处理函数
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(function (click) {
        // 将屏幕坐标转换为笛卡尔坐标
        var pickedFeature = viewer.scene.pick(click.position);
        
        //当未捕捉到要素的时候
        if (!Cesium.defined(pickedFeature)) {
            //取消所有高亮显示
            if (Cesium.defined(highlighted.feature)) {
                highlighted.feature.color = highlighted.originalColor;
                highlighted.feature = undefined;
            }
            return;
        }
        else {
            //高亮显示
            if (Cesium.defined(highlighted.feature)) {
                highlighted.feature.color = highlighted.originalColor;
                highlighted.feature = undefined;
            }
            highlighted.feature = pickedFeature;
            Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
            pickedFeature.color = Cesium.Color.LIME.withAlpha(0.5);
            showMessage('您选择Id为:' + pickedFeature.pickId.key + 'Type属性为:' + pickedFeature.getProperty('Type'));
        }

    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

2.鼠标移动过程中跟随高亮

添加屏幕移动事件监听器

//鼠标移动跟随高亮
    handler.setInputAction(function onMouseMove(movement) {
        // 将屏幕坐标转换为笛卡尔坐标
        var pickedFeature = viewer.scene.pick(movement.endPosition);
        //当未捕捉到要素的时候
        if (!Cesium.defined(pickedFeature)) {
            //取消所有高亮显示
            if (Cesium.defined(highlighted.feature)) {
                highlighted.feature.color = highlighted.originalColor;
                highlighted.feature = undefined;
            }
            return;
        }
        else {
            //高亮显示
            if (Cesium.defined(highlighted.feature)) {
                highlighted.feature.color = highlighted.originalColor;
                highlighted.feature = undefined;
            }
            highlighted.feature = pickedFeature;
            Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
            pickedFeature.color = Cesium.Color.LIME.withAlpha(0.5);
        }

    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

showMessage是js+css写的简易提示消息，可以看这个博客

js+css消息提示框-CSDN博客【代码】js+css消息提示框。https://blog.csdn.net/vener_/article/details/143764044