上一节我们学习了:cesium 根据不同条件设置3D_tiles样式,今天我们要学习的是cesium 3D_tiles高级样式设置与条件渲染。

实例代码

我们可以设置不同的条件进行判断显示，比如不同的范围的颜色深度不同，或者只显示某种类型的建筑等。

// 添加3D建筑
// 创建一个新的Cesium的osm建筑对象
let tiles3d = new Cesium.createOsmBuildings();
// 将osm建筑对象添加到viewer的场景图元中
const osmBuildings = viewer.scene.primitives.add(tiles3d);
// 广州塔的经纬度和高度
var postion = Cesium.Cartesian3.fromDegrees(
  // 经度
  113.3191,
  // 纬度
  23.109,
  // 高度
  1000
);
// 通过相机飞行到指定的目标位置
viewer.camera.flyTo({
  destination: postion,
  duration: 2,
});

// 定义3D建筑的样式
tiles3d.style = new Cesium.Cesium3DTileStyle({
  defines: {
    // 计算当前建筑与广州塔位置的距离
    distance:
      "distance(vec2(${feature['cesium#longitude']},${feature['cesium#latitude']}),vec2(113.3191,23.109))",
  },
  color: {
    conditions: [
      // 根据距离设置不同的颜色
      ["${distance} < 0.01", "color('rgba(0,0,50, 0.7)')"],
      ["${distance} < 0.02", "color('rgba(0,0,50, 0.5)')"],
      ["${distance} < 0.04", "color('rgba(0,0,50, 0.2)')"],
      // 默认颜色为白色
      ["true", "color('white')"],
    ],
  },
  // 根据条件决定是否显示建筑物
  show: "${distance} < 0.04 && ${feature['building']} === 'apartments'",
});

实例演示地址

3D_tiles高级样式设置与条件渲染

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课 课程-cesium D_tiles高级样式设置与条件渲染-实践的学习笔记

实例代码下载

代码运行环境：vue3 + vite + js nodejs 14