cesium 3DTileStyle的设置
2019-04-18 本文已影响106人
gardenlike2
如果需要在cesium上突出一部分3dTile场景模型,比较能够接受的方法是高亮选择部分的Feature,将其他未选择的Feature进行次要化,这里我们可以设置cesium的3DtileStyle来达到目的。
我们先来看下官网的API
3DTileStyle其中style是运用于cesium3DTileset的样式设置,对于高亮,变暗实在color对象中实现的。
color: {
conditions: [
['${height} >= 300', 'rgba(45, 0, 75, 0.5)'],
['${height} >= 200', 'rgb(102, 71, 151)'],
['${height} >= 100', 'rgb(170, 162, 204)'],
['${height} >= 50', 'rgb(224, 226, 238)'],
['${height} >= 25', 'rgb(252, 230, 200)'],
['${height} >= 10', 'rgb(248, 176, 87)'],
['${height} >= 5', 'rgb(198, 106, 11)'],
['true', 'rgb(127, 59, 8)']
]
}
官网上的例子是这样的,他表示分层对3DTile场景模型里的对象设置不同的颜色,通过height高度的不同。如果我们要用于我们自己的3DTile模型我们首先要获取我们3DTile场景模型的字段,我们可以通过点击事件中获取的Feature,然后通过Cesium3DTileFeature.getPropertyNames()方法获取字段的值如图
获取字段
如果没有点击事件还可以通过加载时的文件中获取xhr类型的文件,将它下载保存下来。 xhr类型文件
通过Notepad++打开,虽然都是乱码,但是第一行后面它包含着字段类型和数值。
接着如何实现高亮呢?比如说点击的对象高亮,我们就可以获取点击对象的字段属性然后字段值等于该属性,注意字符串需要===来实现。如果字段属性是获取的,我们通过字符串拼接的方法。要全字符串拼接。
var selectbuilding = feature.ID;
var selectcontent = "${name} === \'"+selectbuilding+"\'";
var transparentStyle = new Cesium.Cesium3DTileStyle({
color:{
conditions:[
[selectcontent,"rgb(255,255,0)"],
["true","rgb(2,165,188)"]//true表示剩余的显示的对象
]
},
});
运行前后效果
运行前运行后