开源Cesium

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表示剩余的显示的对象
      ]
    },
  });

运行前后效果

运行前
运行后
上一篇下一篇

猜你喜欢

热点阅读