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

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

【导语】本文是 Cesium 加载 3DTile 模型属性获取系列第二篇，演示如何在 Cesium 中通过交互与事件读取 3DTile 要素的属性信息：先用 viewer.screenSpaceEventHandler 注册鼠标左键点击事件，再用 viewer.scene.pick(click.position) 取到 Cesium3DTileFeature；接着用 pickedFeature.getProperty('name') 读取具体属性；并通过 tileset.tileLoad.addEventListener 监听瓦片加载、用 content.getFeature(0).getProperty('name') 批量获取要素数量与属性。

核心观点

• 鼠标事件：viewer.screenSpaceEventHandler.setInputAction 注册 LEFT_CLICK，在回调中编写交互逻辑
  
• 拾取要素：viewer.scene.pick(click.position) 返回 Cesium3DTileFeature，用 Cesium.defined 判断对象是否有效
  
• 读取属性：pickedFeature.getProperty('name') 按属性名（如 shp 转 3dtile 时的字段名）读取单个要素属性
  
• 瓦片级监听：tileset.tileLoad.addEventListener 监听瓦片加载，content.featuresLength 取要素数量、content.getFeature(0).getProperty('name') 取首个要素属性
  

适用场景
适用于 Cesium/WebGIS 三维开发、3DTile 模型交互与属性查询场景，适合 GIS 前端开发者参考。

关键信息
（技术随笔，文中鼠标拾取、getProperty 与 tileLoad 监听的完整代码示例及输出截图见正文代码块与配图。）

---

1.添加鼠标点击事件

1.     //鼠标单击左键事件
2.     viewer.screenSpaceEventHandler.setInputAction(function onMouseClick( click ) {
3.     //自己需要写逻辑的地方
4.       
5.     },Cesium.ScreenSpaceEventType.LEFT_CLICK);

复制代码

 
2.属性信息的位置

2.1 viewer.scene.pick(click.position)

1.       var pickedFeature = viewer.scene.pick(click.position);if(Cesium.defined(pickedFeature)){
2.         console.log(pickedFeature);
3.       }

复制代码

1. Cesium.defined(value) 经常使用，用于判断object是否define

复制代码

1. pickedFeature长这样： 类型是 Cesium3DTileFeature<br>

复制代码

 
 自然而然在文档里去找，找到了getProperty方法

 
 参数name也是就我们需要属性的名字，对应上一篇随笔中shp转3dtile时候shp的属性名称
输出看一下

1. console.log(pickedFeature.getProperty("name"));

复制代码

1.  

复制代码

 成功
 
2.2 tileset.tileLoad.addEventListener

Cesium3DTileset中有一个事件：tileLoad

 
 
输出一下tile看看是什么

1.     tileset.tileLoad.addEventListener(function(tile) {
2.       console.log(tile);
3.     })<br>

复制代码

 

 
 
里面有个content属性，截图没截出来，输出看看

 
 看看文档

 
 
注意到有个方法getFeature，返回值是Cesium3DTileFeature类型，是不是和2.1一样，那就简单了

 
 

1.     tileset.tileLoad.addEventListener(function(tile) {
2.       let featuresLength = content.featuresLength;
3.       console.log("要素数量为：");
4.       console.log(featuresLength);
5.       console.log("第一个要素属性为：");
6.       let feature = content.getFeature(0).getProperty("name");
7.       console.log(feature);
8.     })

复制代码