智慧城市中城市级建筑白膜的加载与动态调色-阿里云开发者社区

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

2022-08-24 1449

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

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

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

vartileset=newCesium.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=newCesium.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)']]
      }
    });