美食家大橙子 发表于 2023-1-7 22:01:05

点击获取Cesium中加载的3DTile模型的属性信息(二)

1.添加鼠标点击事件

    //鼠标单击左键事件
    viewer.screenSpaceEventHandler.setInputAction(function onMouseClick( click ) {
    //自己需要写逻辑的地方
      
    },Cesium.ScreenSpaceEventType.LEFT_CLICK); 
2.属性信息的位置

2.1 viewer.scene.pick(click.position)

      var pickedFeature = viewer.scene.pick(click.position);if(Cesium.defined(pickedFeature)){
      console.log(pickedFeature);
      }Cesium.defined(value) 经常使用,用于判断object是否definepickedFeature长这样: 类型是 Cesium3DTileFeature<br><img src="https://img2023.cnblogs.com/blog/3074311/202301/3074311-20230107150916984-1888697950.png" alt="" loading="lazy"> 
 自然而然在文档里去找,找到了getProperty方法
https://img2023.cnblogs.com/blog/3074311/202301/3074311-20230107151047747-2110889149.png
 
 参数name也是就我们需要属性的名字,对应上一篇随笔中shp转3dtile时候shp的属性名称
输出看一下
console.log(pickedFeature.getProperty("name")); <img src="https://img2023.cnblogs.com/blog/3074311/202301/3074311-20230107151233207-475221451.png" alt="" loading="lazy"> 成功
 
2.2 tileset.tileLoad.addEventListener

Cesium3DTileset中有一个事件:tileLoad
https://img2023.cnblogs.com/blog/3074311/202301/3074311-20230107151515664-659394323.png
 
 
输出一下tile看看是什么
    tileset.tileLoad.addEventListener(function(tile) {
      console.log(tile);
    })<br> 
https://img2023.cnblogs.com/blog/3074311/202301/3074311-20230107151950315-1413021128.png
 
 
里面有个content属性,截图没截出来,输出看看
https://img2023.cnblogs.com/blog/3074311/202301/3074311-20230107152201136-1163505849.png
 
 看看文档
https://img2023.cnblogs.com/blog/3074311/202301/3074311-20230107152352877-820990754.png
 
 
注意到有个方法getFeature,返回值是Cesium3DTileFeature类型,是不是和2.1一样,那就简单了
https://img2023.cnblogs.com/blog/3074311/202301/3074311-20230107152456446-560563073.png
 
 
    tileset.tileLoad.addEventListener(function(tile) {
      let featuresLength = content.featuresLength;
      console.log("要素数量为:");
      console.log(featuresLength);
      console.log("第一个要素属性为:");
      let feature = content.getFeature(0).getProperty("name");
      console.log(feature);
    }) 
https://img2023.cnblogs.com/blog/3074311/202301/3074311-20230107152755341-1858276205.png
 

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: 点击获取Cesium中加载的3DTile模型的属性信息(二)