智慧城市中城市级建筑白膜的加载与动态调色

          本文以cesium为例，重点了阐述了在智慧城市场景中，如何基于cesium进行城市级建筑模拟渲染，以及点击展示模型数据的属性信息，支持根据建筑的不同高度来渲染不同的颜色。

           cesium支持将城市建筑信息转换成b3dm数据，通过api可进行展示。转换工具一般使用cesiumlab来进行。处理好的城市白膜数据如下：

           第一步、通过Cesium3DTileset加载数据，代码如下：

var tileset = new Cesium.Cesium3DTileset({
      url: "http://localhost:8086/data/baimo/changsha/tileset.json"
});
viewer.scene.primitives.add(tileset);

上述代码将会加载城市建筑数据。

第二步、展示数据属性信息，关键代码如下：

tileset.readyPromise.then(function (tileset) {
      viewer.scene.primitives.add(tileset);
}).otherwise(function (error) {
      console.log(error);
});

第三步、根据建筑高度设置不同颜色，关键代码如下：

tileset.style = new Cesium.Cesium3DTileStyle({
      color: {
        conditions: [
          ['${height} >= 200', "color('#D33038')"],//red
          ['${height} >= 150', "color('#2747E0')"],//blue
          ['${height} >= 100', "color('#D33B7D')"],//pink
          ['${height} >= 60', "color('#FF9742')"],//orange
          ['${height} >= 30', 'rgb(252, 230, 200)'],
          ['${height} >= 20', 'rgb(248, 176, 87)'],
          ['${height} >= 10', 'rgb(198, 106, 11)'],
          ['true', 'rgb(127, 59, 8)']]
      }
    });

        需要注意的点，这里的height一定要在b3dm数据中包含的属性，否则会报错。具体的颜色信息，支持rgb也支持其他的方式进行设置。

        整体效果如下：

        总结：通过以上例子可掌握如何在cesium中加载城市建筑信息，如何展示模型的数据以及前端根据楼层高度来调节建筑的外观效果，有更深层次的应用欢迎交流。