天天看点

Cesium左键点击模型效果分析

Cesium的样例中,有一个3D Tiles Feature Picking,鼠标划过模型,会在模型上显示一个选中框,在模型旁边浮现一个名称标签,点击3dtiles中的模型,会高亮显示框,并且弹出模型的详细信息。

详细的网址:https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=3D%20Tiles%20Feature%20Picking.html&label=3D%20Tiles

Cesium左键点击模型效果分析

直接拿过来使用其中的代码,发现这个点击效果,是要根据模型(3dtile)的实际情况进行代码修改,鼠标点击到的模型是b3dm格式的,Cesium有详细的文件格式说明,不过文件的有些部分需要可以进行省略,所以,导致不是每个3dtile的图层都是一样。

b3dm文件格式参见网址:https://github.com/AnalyticalGraphicsInc/3d-tiles/blob/master/TileFormats/Batched3DModel/README.md

在实际的代码中,按照以下情况进行修改,完全代码参照文章开头的网址,以下只对关键代码进行解释: 

        if (Cesium.defined(highlighted.feature)) {

//此代码处,要根据模型,判断feature中是否存在color的属性,否则设置不成功

            highlighted.feature.color = highlighted.originalColor;

            highlighted.feature = undefined;

        }

//要根据模型,判断feature中是否存在color的属性,否则设置不成功

        pickedFeature.color = Cesium.Color.LIME;

// 这处要判断是否有name的属性,这个和b3dm的batch Table和feature Table有关联,需看b3dm模型中是否有以上这些

        var featureName = pickedFeature.getProperty('name');

        selectedEntity.name = featureName;

        selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';

        viewer.selectedEntity = selectedEntity;